HighMaps with drilledDown

Question

I am using highmaps in my application with drilledown enabled, it works fine for the sample data given for usa.

But it does not work with the data for srilanka. what could be the issue?

Here is my code:

  $('#container').highcharts('Map', {
        chart : {
            events: {
                drilldown: function (e) {

                    if (!e.seriesOptions) {
                        var chart = this,
                            mapKey = 'countries/lk/' + e.point.drilldown + '-all',
                            // Handle error, the timeout is cleared on success
                            fail = setTimeout(function () {
                                if (!Highcharts.maps[mapKey]) {
                                    chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);

                                    fail = setTimeout(function () {
                                        chart.hideLoading();
                                    }, 1000);
                                }
                            }, 3000);

                        // Show the spinner
                        chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner

                        // Load the drilldown map
                        $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {

                            data = Highcharts.geojson(Highcharts.maps[mapKey]);

                            // Set a non-random bogus value
                            $.each(data, function (i) {
                                this.value = i;
                                  console.log(i);
                            });


                            // Hide loading and add series
                            chart.hideLoading();
                            clearTimeout(fail);
                            chart.addSeriesAsDrilldown(e.point, {
                                name: e.point.name,
                                data: data,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            });
                        });
                    }


                    this.setTitle(null, { text: e.point.name });
                },
                drillup: function () {
                    this.setTitle(null, { text: 'Sri Lanka' });
                }
            }
        }

JSFiddle Link

Answer 1

The drilldown data doesn't exist in the Highmaps Map Collection for Sri Lanka. If you scroll down the page you can see that at the moment the only countries with data below country level (e.g. admin2 level) are Canada, Germany, France, Netherlands, Norway, USA.

When you click a district the fiddle is trying to retrieve data from a corresponding URL:

mapKey = 'countries/lk/' + e.point.drilldown + '-all',

and for Sri Lanka it is failing because the JS file for each district does not exist.

There is more info in the Highmaps docs about creating maps:

Highmaps loads its maps from GeoJSON, an open standard for description of geographic features. Most GIS software supports this format as export from for instance Shapefile or KML export. Read more in the API reference and see the live demo.

There are three basic sources for your map:

1. Use our Map collection. Read the tutorial article on the map collection to get started.
2. Find an SVG map online and convert it using our (experimental) online converter.
3. Create your own map from scratch using an SVG editor, then convert them online. Read our tutorial on Custom maps for Highmaps.

and about the Highmaps Maps Collection:

For your convenience, Highmaps offers a free collection of maps, optimized for use with Highmaps. For common maps, it saves you the trouble of finding or drawing suitable SVG or GeoJSON maps.

For Admin2, we have only compiled selected countries, and these maps are created from national files with their own license which is specified on the SVG map and in the other format files as meta data. If you miss your country, please contact us and we'll try to find a suitable shapefile and generate more maps.