Toufik94
Posts: 6
Joined: Sun Sep 11, 2022 2:30 pm

Can't get drilldown map to work with custom GeoJSON file

Hi all,

I'm new on this form and to Highcharts and I'm currently trying to get Highmaps to work. To do this I'm following the USA demo that Highcharts provided on the website using this JsFeedle: https://jsfiddle.net/gh/get/library/pur ... -drilldown

Looks good so far and I really love the functionality but I can't seem to get this work for my own Geojson/Topojson file. I have two files: one of the Netherlands and all its municipalities and one with all of their neighbourhoods. You can find the files in respectively order here https://cartomap.github.io/nl/wgs84/gem ... 1.topojson and here https://cartomap.github.io/nl/wgs84/wijk_2021.topojson.

However, when I try to replace the USA map with for example the first topojson file of the Netherlands (the one with the municipalities) it doesn't load anything. I tried to console.log on the data variable (so the Highcharts.geojson(topology) output) and it shows my topojson file but it also shows that the name attribute is always undefined. I guess this has to do with how these two custom topojsons are formatted?

The problem is: I can't seem to get this work and I don't understand the documentation and the demo code enough to do this myself. I'm really looking for some kind of starting point to get custom files work with the demo that you've provded for the USA. Can someone please guide me in the right direction using a JSfeelde or Codepen?

Thank you in advance!
Toufik94
Posts: 6
Joined: Sun Sep 11, 2022 2:30 pm

Re: Can't get drilldown map to work with custom GeoJSON file

No one who can help me out? I really need this to work within now and a couple of weeks.

Your help would be appreciated a lot.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Can't get drilldown map to work with custom GeoJSON file

Hello,

The maps you link to have a different data structure than Higchart maps, so simply replacing the links in the demo is not enough. I suggest you use maps of the Netherlands from the Highcharts Map Collection.

Demo: https://jsfiddle.net/BlackLabel/bjcL29ek/
Map Collection: https://code.highcharts.com/mapdata/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
Toufik94
Posts: 6
Joined: Sun Sep 11, 2022 2:30 pm

Re: Can't get drilldown map to work with custom GeoJSON file

michal.f wrote: Mon Sep 12, 2022 1:24 pm Hello,

The maps you link to have a different data structure than Higchart maps, so simply replacing the links in the demo is not enough. I suggest you use maps of the Netherlands from the Highcharts Map Collection.

Demo: https://jsfiddle.net/BlackLabel/bjcL29ek/
Map Collection: https://code.highcharts.com/mapdata/

Best regards!

Hi Michal,

Thanks for your reply. I was aware of the fact that the map collection of the Netherlands provided by Highcharts will work. However, I cannot use those topojsons because it doesn't provide all the information that I need. The map of the Netherlands slightly updates every year. Sometimes there are new municipalities or older ones dissapear. The github link that I provided yearly updates the geojson/topojson files. Besides, Highcharts does not provide a topo or geojson file for the Dutch neighbourhoods which is why I need to use the versions that I provided in my openingpost.

However, it seems like Highmaps doesn't support different formats. Isn't there a way to modify the code in the demo to make the files in my opening post work? For example: the demo seems to be looking for a name attribute which I do have but it's named differently (statnaam). Or is there no other way then to completely modify my custom geojson/topojson files to the standards that Highmaps want?

With kind regards,

Toufik
Toufik94
Posts: 6
Joined: Sun Sep 11, 2022 2:30 pm

Re: Can't get drilldown map to work with custom GeoJSON file

No one? Is Highmaps limited to the Map collection files?

If this is the case then Highmaps might not be the library for me..which is fine. But I have to know.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Can't get drilldown map to work with custom GeoJSON file

Hi,
Is Highmaps limited to the Map collection files?
No, it is not.

Let's start with how the working map works - it boils down to some key pieces.
The map of the USA has each state with some properties. One of the properties is 'hc-key'.
Using the 'hc-key' property we can find a map of that state in the map collection using the pattern of:

Code: Select all

https://code.highcharts.com/mapdata/countries/us/${hc-key}-all.topo.json
On the USA map, if you click a state you will initiate the drilldown that is based on loading the map of the state and this is possible because 'hc-key' is all we need to find the detailed map.
I have two files: one of the Netherlands and all its municipalities and one with all of their neighbourhoods.
This is not enough to have drilldown for each region. Unless you want to drilldown into the second map on any click like here:
https://jsfiddle.net/BlackLabel/uw6fo2vn/1/

I hope this is a good starting point.

Best regards,
Kacper Madej
Highcharts Developer
Toufik94
Posts: 6
Joined: Sun Sep 11, 2022 2:30 pm

Re: Can't get drilldown map to work with custom GeoJSON file

KacperMadej wrote: Tue Sep 13, 2022 4:36 pm Hi,
Is Highmaps limited to the Map collection files?
No, it is not.

Let's start with how the working map works - it boils down to some key pieces.
The map of the USA has each state with some properties. One of the properties is 'hc-key'.
Using the 'hc-key' property we can find a map of that state in the map collection using the pattern of:

Code: Select all

https://code.highcharts.com/mapdata/countries/us/${hc-key}-all.topo.json
On the USA map, if you click a state you will initiate the drilldown that is based on loading the map of the state and this is possible because 'hc-key' is all we need to find the detailed map.
I have two files: one of the Netherlands and all its municipalities and one with all of their neighbourhoods.
This is not enough to have drilldown for each region. Unless you want to drilldown into the second map on any click like here:
https://jsfiddle.net/BlackLabel/uw6fo2vn/1/

I hope this is a good starting point.

Best regards,
Hi KacperMadej,

Thank you for your valueble reply. Your Jsfeedle seems like something I can try to work with. I just had one more question: you mentioned that the topojsons that I provided aren't well formatted to actually use the drilldown option. How should my topojsons look like in order to make the drilldown work and how would I implement that in for example the Jsfeedle that you provided?

Best regards,

Toufik
Toufik94
Posts: 6
Joined: Sun Sep 11, 2022 2:30 pm

Re: Can't get drilldown map to work with custom GeoJSON file

I managed to get it to work myself by using slightly different geojson files. The one I've used for the neighbourhoods have some extra properties which are the municipality code and the municipality name. With those properties I can link the neighbourhoods to the geojson of the municpalities.

https://jsfiddle.net/s7bj9dwk/70/

Thanks everyone for your help. This was really a bottleneck but I'm glad I've finally managed to make it work.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Can't get drilldown map to work with custom GeoJSON file

Thank you for sharing the final result.

P.S.
You got it to work so below is a short answer purely to leave no unanswered questions:
Formatting of the map files for dilldown includes name property for each data point (so the breadcrumbs show correct text) and something useful on drilldown property (for each data point that should be drillable) so on drilldown a relevant map shows.

Best regards,
Kacper Madej
Highcharts Developer

Return to “Highcharts Maps”