raminaidubandi
Posts: 2
Joined: Wed Mar 30, 2022 8:03 am

Highcharts US Map drilldown multi level

Hi,

I am working on US map where i need the drilldown functionality from states to counties and then to cities. I am able to drilldown from state to counties and then when i click on any county, by default newyork map is being shown. Below is the code i am using. Please provide any example which satisfies my requirement or suggest what changes to be done for achieving my required functionality.

e.point.drilldown always gives us-ny when i click on any county or city.

var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
small = $('#divMap').width() < 400;

$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i; // Non-random bogus data
});

Highcharts.mapChart('divMap', {
chart: {

events: {
drillup: function (e) {

this.setTitle(null, {
text: '',
});
if (e.seriesOptions) {

}
},
drilldown: function (e) {
if (!e.seriesOptions) {
debugger;
var locationType = e.point.properties.type;
var locationName = e.point.name;
var chart = this,
mapKey = 'countries/us/' + 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
console.log(mapKey);
$.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;
// Since the cities maps are not avialable
this.drilldown = 'us-ny'
});

console.log(data);

// 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}'
}
});
});
}

chart.applyDrilldown();

this.setTitle(null, {
text: e.point.name
});
}
}
},

title: {
text: null
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
subtitle: {
text: null,
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},

legend: small ? {} : {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},

colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},

mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},

plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series: [
{
data: data,
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
}
},
{
type: 'mapline',
data: separators,
color: 'silver',
enableMouseTracking: false,
animation: {
duration: 500
}
},
],

drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Highcharts US Map drilldown multi level

Hi,

Welcome to our forum and thanks for contacting us with your question!

The reason why you are getting us-ny each time is that it is hardcoded.

Code: Select all

            $.each(data, function(i) {
              this.value = i;
// Since the cities maps are not available
		this.drilldown = 'us-ny'
            });

As my colleague mentioned in a similar thread: Drilldown map to states - cities/county-- cities , to create a fully working example with 3rd drilldown level (state-county-city) the access to a standalone map of the certain county is necessary. For now, there is no such map in our map collection.

You can find the list of all available maps here:
https://code.highcharts.com/mapdata/

If you cannot find the required map you might consider creating it on your own. Here you can find some useful information about this process:
https://www.highcharts.com/docs/maps/cu ... ojson-maps
https://www.highcharts.com/docs/maps/create-custom-maps

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Maps”