currently I have a map of the globe and when I try panning on the map after zooming in on the countries, it resets the zoom to the default zoom. I am able to pan the globe but I cannot pan when I am zoomed in. It makes navigating a bit annoying. Here is my current code:
Highcharts.getJSON(
'https://code.highcharts.com/mapdata/custom/world.topo.json',
topology => {
const chart = Highcharts.mapChart('container', {
chart:
{
map: topology,
},
title: {
text: ''
},
legend: {
enabled: false,
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
fontWeight: 'bold',
fontSize: '20px'
}
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true,
buttonOptions: {
align: 'right',
verticalAlign: 'bottom'
}
},
mapView: {
maxZoom: 30,
projection: {
name: 'Orthographic',
rotation: [60, -30]
}
},
colorAxis: {
min: 0,
max: 100,
text: '',
stops: [[0, 'darkgray', ''], [0, '#5ce1e6', '{{question['answer1']}}'], [0.49, '#c9f5f7', ''], [.50, '#aee0a0', ''], [.51, '#fff4c8', ''], [1, '#ffde59', '{{question['answer2']}}']],
title: {
text: '',
},
},
credits: {
enabled: false
},
tooltip: {
borderColor: 'none',
borderRadius: 10,
useHTML: true,
formatter: function(tooltip) {
return `<b>${this.point.name}</b> <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: <b>${this.point.value1}</b>% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: <b>${this.point.value2}</b> %`
},
backgroundColor: 'black',
style: {
color: 'white'
},
},
plotOptions: {
series: {
animation: {
duration: 750
},
clip: false
}
},
mapline: {
color: 'black' // change to the desired color
},
series: [{
name: 'Graticule',
id: 'graticule',
type: 'mapline',
data: getGraticule(),
nullColor: 'gray',
color: 'black',
accessibility: {
enabled: false
},
enableMouseTracking: false
},
{
data: data1,
joinBy: 'name',
borderWidth: 0.5, // Set the border width
borderColor: 'black', // Set the border color
name: '',
states: {
hover: {
color: '', // set to same color as regular state
borderColor: '#000000'
}
},
accessibility: {
exposeAsGroupOnly: true
}
}]
});
// Render a circle filled with a radial gradient behind the globe to
// make it appear as the sea around the continents
const renderSea = () => {
let verb = 'animate';
if (!chart.sea) {
chart.sea = chart.renderer
.circle()
.attr({
fill: {
radialGradient: {
cx: 0.4,
cy: 0.4,
r: 1
},
stops: [
[0, 'white'],
[0.5, 'white']
]
},
zIndex: -1
})
.add(chart.get('graticule').group);
verb = 'attr';
}
const bounds = chart.get('graticule').bounds,
p1 = chart.mapView.projectedUnitsToPixels({
x: bounds.x1,
y: bounds.y1
}),
p2 = chart.mapView.projectedUnitsToPixels({
x: bounds.x2,
y: bounds.y2
});
chart.sea[verb]({
cx: (p1.x + p2.x) / 2,
cy: (p1.y + p2.y) / 2,
r: Math.min(p2.x - p1.x, p1.y - p2.y) / 2
});
};
renderSea();
Highcharts.addEvent(chart, 'redraw', renderSea);
}
);
I tried this:
chart: {
type: 'orthographic',
panning: true
},
mapNavigation: {
enableMouseWheelZoom: true
},
But it still zooms out when panning.
I tried this:
chart: {
map: topology,
events: {
// Prevent resetting the zoom on map panning
wheel: function (e) {
e.preventDefault();
var chart = this;
setTimeout(function () {
chart.pointer.zoomHorizontally = false;
}, 1);
}
}
},
But that doesnt do anything related to this either.
