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