For example if I were showing a map of the world and I only have two points in California, upon load the map would auto zoom into California.
I've attached two images showing a similar example where upon load I'm currently showing the united states. I want the default zoom to look like the second zoomed in image.
I'm using Highcharts v10.3.3 and developing in React.
Code: Select all
const options = {
title: undefined,
legend: {
enabled: false,
},
fitDataOnLoad: true,
mapNavigation: {
enabled: false,
enableButtons: false,
enableDoubleClickZoom: false,
enableMouseWheelZoom: true,
enableTouchZoom: false,
enableDoubleClickZoomTo: false,
},
chart: {
panning: {
enabled: true,
type: 'xy',
},
proj4,
},
tooltip: {
pointFormat: '{point.name}: <b>34</b>',
borderColor: 'black',
},
plotOptions: {
mappoint: {
dataLabels: {
enabled: true,
shape: 'mapmarker',
style: {
textOutline: 'none',
fontWeight: 'bold',
fontSize: '13px',
},
y: -13,
},
marker: {
symbol: 'mapmarker',
lineWidth: 1,
},
},
},
series: [
{
mapData: mapDataUs,
showInLegend: false,
},
{
type: 'mappoint',
name: 'Cities',
states: {
inactive: {
opacity: 0.2,
},
},
data: [
{
name: 'New York',
lat: 40.7128,
lon: -74.006,
y: 9,
},
/*{
name: 'Los Angeles',
lat: 34.0522,
lon: -118.2437,
y: 9,
},*/
{
name: 'Chicago',
lat: 41.8781,
lon: -87.6298,
value: 40,
y: 6,
},
],
dataLabels: {
format: '{y}',
style: {
color: 'white',
},
shape: 'mapmarker',
borderColor: 'black',
borderWidth: 1,
},
},
],
}