Custom Region Maps

Elastic Stack Kibana
1

Hello,

I configured Kibana to read a custom region geojson file following this guide: https://www.elastic.co/blog/custom-region-maps-in-kibana-6-0
However, no regions are showed in the map even if the Vector Map and Join Field are correctly set on the Visualization.
I'm thinking that the issue could be the format of the geojson file, but I have tried with several versions (the latter being https://gist.githubusercontent.com/datajournalism-it/f1abb68e718b54f6a0fe/raw/23636ff76534439b52b87a67e766b11fa7373aa9/regioni-con-trento-bolzano.geojson)

What could I check to see what's going on?

Thank you

2

Hi there,

Which version of Kibana are you using? While trying to reproduce, I noticed a deprecation warning about the region map configuration from the blog post. I wonder if this could be causing your problem? You now need to nest it under a map namespace:

# Custom Region Maps
map:
  regionmap:
    layers:
       - name: "Australian States"
         url: "http://localhost:8000/aus_state.geojson"
         attribution: "https://exploratory.io/maps"
         fields:
            - name: "STATE_NAME"
              description: "State Name"

And forgive me if this is a dumb question, but have you gone through each of the "Troubleshooting" pointers at the bottom of the blog post?

Thanks,
CJ

3

Hi,

if I try using the map namespace I get a fatal error:

FATAL { ValidationError: child "map" fails because ["map" must be an object]

While using my kibana.yml configuration file I'm not getting any error message. I'm running Kibana 6.

I also tried using another geojson file from the website exploratory.io (so the format should be correct) and the behaviour is the same.
Please note that the geojson is on a webserver, but from the Kibana server a CURL to the geojson path url it's successful, so it should work.

4

I have investigated more deeply on this issue thanks to this post: Region Map does not show

The problem is that Kibana is not loading the geojson file from the webserver because of this error (found via the developer tab in my browser):

VM4472:1 Mixed Content: The page at 'https://localhost:8443/app/kibana#/visualize/create?type=region_map&indexPattern=4bd1d750-702e-11e8-a22c-d3afc294b8fc&_g=()&_a=(filters:!(),linked:!f,query:(language:lucene,query:''),uiState:(mapCenter:!(40.64730356252251,19.863281250000004),mapZoom:4,spy:!n),vis:(aggs:!((enabled:!t,id:'1',params:(),schema:metric,type:count),(enabled:!t,id:'2',params:(field:regione.keyword,missingBucket:!f,missingBucketLabel:Missing,order:desc,orderBy:'1',otherBucket:!f,otherBucketLabel:Other,size:5),schema:segment,type:te...%3Ca%20href%3D%22http:%2F%2Fwww.openstreetmap.org%2Fcopyright%22%3EOpenStreetMap%3C%2Fa%3E%20contributors%20%7C%20%3Ca%20href%3D%22https:%2F%2Fwww.elastic.co%2Felastic-maps-service%22%3EElastic%20Maps%20Service%3C%2Fa%3E%3C%2Fp%3E%26%2310;',id:road_map,maxZoom:10,minZoom:0,subdomains:!(),url:'https:%2F%2Ftiles.maps.elastic.co%2Fv2%2Fdefault%2F%7Bz%7D%2F%7Bx%7D%2F%7By%7D.png%3Felastic_tile_service_tos%3Dagree%26my_app_name%3Dkibana%26my_app_version%3D6.2.4')))),title:'New%20Visualization',type:region_map))' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://apache:8080/regioni.geojson'. This request has been blocked; the content must be served over HTTPS.

I have configured my webserver to use HTTPS, but now I'm getting a connection timeout.
While I'm still investigating on this issue which appears to be not a Kibana misconfiguration, I'm wondering if someone knows some easier and faster method to load a geojson file.

5

I'm also trying directly using the github link for the geojson posted in my very first message, but in the debug I'm reading this error:

vendors.bundle.js?v=16627:53 OPTIONS https://gist.githubusercontent.com/datajournalism-it/f1abb68e718b54f6a0fe/raw/23636ff76534439b52b87a67e766b11fa7373aa9/regioni-con-trento-bolzano.geojson 400 (Bad Request)

6

I have enabled CORS on my Apache webserver but I'm still getting this error from Kibana:

No 'Access-Control-Allow-Origin' header is present on the requested resource

Someone has got an idea?

7

When you enabled CORS I'm assuming you were following the steps here? https://enable-cors.org/server_apache.html

8

Yes, of course. Unfortunately it seems an Apache configuration issue.
Clearly, there is some setting I'm not implementing.

However, I've tried using https://www.npmjs.com/package/http-server as suggested in the guide, and with that webserver the thing works. I still have to test the HTTPS scenario though.

First thing first, thanks for your kind support. I have to say that maybe a easier user-experience would be beneficial.
If I complete the whole thing I will update this post with a brief explanation as a reference.

9

Thank you! I wish I could be more helpful, to be honest. If you do have time to share your eventual solution, I know that I and other community members would really appreciate it. And if you want to suggest any concrete improvements to the UX that would help you, please ping us with them in our GitHub repo and I'll make sure the right people see it. Thanks!

CJ

10

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.