I am currently trying to create a drilldown map on Highmaps using this example:
I have got this to work with my own data for a different country correctly.
The code from this example is:
$(function () {
var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
// Some responsiveness
small = $('#container').width() < 400;
// Set drilldown pointers
$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i; // Non-random bogus data
});
// Instanciate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
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
$.getScript('/' + mapKey + '.js', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.value = 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: 'USA' });
}
}
},
title: {
text: 'Highcharts Map Drilldown'
},
subtitle: {
text: 'USA',
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}'
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
});<script src=".1.1.min.js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>I am currently trying to create a drilldown map on Highmaps using this example: http://www.highcharts./maps/demo/map-drilldown
I have got this to work with my own data for a different country correctly.
The code from this example is:
$(function () {
var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
// Some responsiveness
small = $('#container').width() < 400;
// Set drilldown pointers
$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i; // Non-random bogus data
});
// Instanciate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
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
$.getScript('https://code.highcharts./mapdata/' + mapKey + '.js', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.value = 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: 'USA' });
}
}
},
title: {
text: 'Highcharts Map Drilldown'
},
subtitle: {
text: 'USA',
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}'
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
});<script src="https://code.jquery./jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts./maps/highmaps.js"></script>
<script src="https://code.highcharts./maps/modules/data.js"></script>
<script src="https://code.highcharts./maps/modules/drilldown.js"></script>
<script src="https://code.highcharts./maps/modules/exporting.js"></script>
<script src="https://code.highcharts./maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts./mapdata/countries/us/us-all.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>From my understanding, when a user clicks on a particular state, a separate js file containing the geo information for that state is loaded. However, I think that there is something missing from the code in that when there is no line of code which removes the data from the state-level js file once the user clicks 'Back to USA' and chooses another state. This results in some overlap i.e. when I click California, the California js file is called. The california state map remains under subsequent maps once I call another state. This is not hugely noticeable for this map due to it's square-like shape. However, in my example I can still see previously-loaded states (at a very small size) once I load another.
Can anyone give some insight into how I could get the previously-loaded state-level map to be removed once the user clicks on a different state?
Thanks in advance.
Share edited Oct 25, 2018 at 18:24 Dhana 1,6584 gold badges24 silver badges40 bronze badges asked Nov 26, 2016 at 12:16 Maeve90Maeve90 3451 gold badge6 silver badges15 bronze badges 4- I have this same issue! Did you ever find a solution? – es3735746 Commented Feb 2, 2017 at 3:35
- I had a similar behavior. The problem was, I only had references to the map object and highcharts added some lines to my map object which caused your described problem. Try the following: instead of data = Highcharts.geojson(Highcharts.maps[mapKey]); try JSON.parse(JSON.stringify(Highcharts.geojson(Highcharts.maps[mapKey]))); It creates a new object with your intended data and does not reuse an instance of "data". Hope it helps, at least it helped me :) – NapkinHD Commented Dec 12, 2017 at 15:43
- The problem still occurs when using the newest version of Highmaps? I tried to reproduce the issue, but it doesn't give described effect. – daniel_s Commented Oct 19, 2018 at 12:33
- 1 No it doesn't :) – Juan Elfers Commented Oct 19, 2018 at 12:49
2 Answers
Reset to default 6Well, I've found the solution. You were using an old version of Highmaps, probably 4 or 5. Just update it to +6 and that's all: https://code.highcharts./maps/highmaps.js
I just updated code snippet with latest Highmap.js
$(function () {
var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
// Some responsiveness
small = $('#container').width() < 400;
// Set drilldown pointers
$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i; // Non-random bogus data
});
// Instanciate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
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
$.getScript('https://code.highcharts./mapdata/' + mapKey + '.js', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.value = 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: 'USA' });
}
}
},
title: {
text: 'Highcharts Map Drilldown'
},
subtitle: {
text: 'USA',
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}'
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
});<script src="https://code.jquery./jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts./maps/highmaps.js"></script>
<script src="https://code.highcharts./maps/modules/data.js"></script>
<script src="https://code.highcharts./maps/modules/drilldown.js"></script>
<script src="https://code.highcharts./maps/modules/exporting.js"></script>
<script src="https://code.highcharts./maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts./mapdata/countries/us/us-all.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>