I'm using a map in HighCharts and sometimes I need to just show a section of the map, not the entire map. I think I could manually do this by zooming into a part of the map but ideally I would like to specify a bounding box with lat/lon coordinates for example. I'm sure this must be possible — in the API there is mention of mapTransforms but I don't know how to use it. https://api.highcharts.com/highmaps/chart.mapTransforms
The best in my case would be for HighCharts only to display the parts of the map with data — there is an option in the API to not display all areas (https://api.highcharts.com/highmaps/series.map.allAreas) but this is not what I want. That option simply doesn't render the parts of the map with no data and I definitely don't want to do that.
An example of an official JSFiddle is here:
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['eu', 0],
['oc', 1],
['af', 2],
['as', 3],
['na', 4],
['sa', 5]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/world-continents'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.js">World continents</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
What would I do so that the initial map loads on, for example, mainly Europe?
Thanks to anyone who can help with this!
Take a look at the docs, where you can find the example: https://api.highcharts.com/class-reference/Highcharts.MapView#setView
However I think that for your case you should use zoomBy feature: https://api.highcharts.com/class-reference/Highcharts.MapView#zoomBy
You can use zoomTo() to zoom into specific point of your data.
I modified few things
Code
var data = [
['eu', 0],
['oc', 1],
['af', 2],
['as', 3],
['na', 4],
['sa', 5]
];
var mapData = Highcharts.maps["custom/world-continents"].features
// Create the chart
var chart = Highcharts.mapChart('container', {
chart: {
map: 'custom/world-continents',
},
. . .
series: [{
data: data,
mapData: mapData,
allowPointSelect: true,
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
function loadto() {
chart.get('EU').zoomTo();
}
loadto()
You can copy these parts it will work in the fiddle.