How To Save the Zoom View of Our Map

SibeeshVenu

9 years ago

Today we will learn how to save the zoom level of our map in our application. By this you can retain the zoomed view that the user sets so that it would be easier for users to identify things in our application.

Background

A few weeks ago I got the requirement to save the zoom level of the map. If you are new to the Bubble Map, please see here: Working with Bubble Map

Download Source Code

Save Zoomed View Of Map

Using the code

I hope you have configured a Bubble Map in your application now. Now it is time to complete our new requirement. Now what we will do is to introduce a new function that retains the zoom level from the session storage and applies it to the map. You must call this function at the end of the map configuration.

The following is the function code.
[js]
var curMax = ”
var curMin = ”
var curMaxY = ”;
var curMinY = ”;
function updateZoom(chart) {
if (sessionStorage.getItem("curMaxZoomMap") != null && typeof sessionStorage.getItem("curMaxZoomMap") != ‘undefined’ && sessionStorage.getItem("curMinZoomMap") != null && typeof sessionStorage.getItem("curMinZoomMap") != ‘undefined’) {
chart.xAxis[0].setExtremes(parseInt(sessionStorage.getItem("curMinZoomMap")), parseInt(sessionStorage.getItem("curMaxZoomMap")));
}
if (sessionStorage.getItem("curMaxZoomMapY") != null && typeof sessionStorage.getItem("curMaxZoomMapY") != ‘undefined’ && sessionStorage.getItem("curMinZoomMapY") != null && typeof sessionStorage.getItem("curMinZoomMapY") != ‘undefined’) {
chart.yAxis[0].setExtremes(parseInt(sessionStorage.getItem("curMinZoomMapY")), parseInt(sessionStorage.getItem("curMaxZoomMapY")));
}
}
[/js]

Now we have seen how to apply the zoom level to the map. Next is how to set the value to the session storage. The fact is that whenever the user does zooming in the map, it fires events in xAxis and yAxis. So we need to crate that events in both axis.

Let’s look at that code now.

[js]
xAxis: {
events: {
afterSetExtremes: function (e) {
curMax = e.max;
curMin = e.min;
sessionStorage.setItem("curMaxZoomMap", curMax);
sessionStorage.setItem("curMinZoomMap", curMin);
}
}
},
yAxis: {
events: {
afterSetExtremes: function (e) {
curMaxY = e.max;
curMinY = e.min;
sessionStorage.setItem("curMaxZoomMapY", curMaxY);
sessionStorage.setItem("curMinZoomMapY", curMinY);
}
}
}
[/js]

Once you have included this event you can see the values in session storage in your browser whenever the user zooms the map.

Save Zoomed View Of Bubble Map

Our next step is to include the zoomTo even in the series of our map.
[js]
events: {
click: function (e) {
e.point.zoomTo();
}
}
[/js]

So your series configuration will be as follows.
[js]
series: [{
mapData: map,
borderColor: ‘#E0E0E0’,
colour: ‘#E0E0E0’,
showInLegend: false,
enableMouseTracking: true,
cursor: ‘pointer’,
dataLabels: {
enabled: true,
format: ‘{point.properties.postal-code}’,
textDecoration: ‘none’,
style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }
},
events: {
click: function (e) {
e.point.zoomTo();
}
},
}
[/js]

That is all guys, you can retain the zoom level of your map even if you reload. Cool!

Complete Code
[html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Map Demo – sibeeshpassion</title>
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/highmaps.js"></script>
<script src="Scripts/proj4.js"></script>
<script src="Scripts/us-all.js"></script>
<script src="Scripts/world.js"></script>

}
data1.push(entry);
}
});
chart = $(‘#container’).highcharts(‘Map’, {
chart: {
borderWidth: 1
},
title: {
text: ‘Bubble map’
},
subtitle: {
text: ‘Bubble map sub title’
},

tooltip: {
pointFormat: ‘{point.State}: {point.Quantity}’
},

mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: ‘bottom’
}
},
xAxis: {
events: {
afterSetExtremes: function (e) {
curMax = e.max;
curMin = e.min;
sessionStorage.setItem("curMaxZoomMap", curMax);
sessionStorage.setItem("curMinZoomMap", curMin);
}
}
},
yAxis: {
events: {
afterSetExtremes: function (e) {
curMaxY = e.max;
curMinY = e.min;
sessionStorage.setItem("curMaxZoomMapY", curMaxY);
sessionStorage.setItem("curMinZoomMapY", curMinY);
}
}
},
legend: {
enabled: true,
title: {
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || ‘black’
}
},
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘bottom’,
floating: true,
valueDecimals: 0,
valueSuffix: ‘$’,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘rgba(255, 255, 255, 0.85)’,
symbolRadius: 0,
symbolHeight: 14
},
series: [{
mapData: map,
borderColor: ‘#E0E0E0’,
colour: ‘#E0E0E0’,
showInLegend: false,
enableMouseTracking: true,
cursor: ‘pointer’,
dataLabels: {
enabled: true,
format: ‘{point.properties.postal-code}’,
textDecoration: ‘none’,
style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }
},
events: {
click: function (e) {
e.point.zoomTo();
}
},
},
{
type: ‘mapbubble’,
color: ‘#E0E0E0’,
dataLabels: {
enabled: true,
formatter: function () {
}
},
enableMouseTracking: true,
joinBy: [‘iso-a2’, ‘code’],
name: zPoint,
data: data1,
minSize: $("#mapMinBubSize").val(),
maxSize: $("#mapMaxBubSize").val(),
color: $("#mapColor").val(),
displayNegative: true,
sizeBy: ‘width’,
cursor: ‘pointer’,
negativeColor: Highcharts.getOptions().colors[0]
}
],
chart: {
marginRight: 50
},
exporting: {
enabled: false
}
}, function (chart) {
updateZoom(chart);
});
}

</script>
</head>
<body>
Bubble Map Demo – sibeeshpassion
<br />
<br />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<label>Min Bubble Size</label>
<input type="number" value="8" min="1" id="mapMinBubSize" title="Type Bubble Min Size." />
<label>Max Bubble Size</label>
<input type="number" min="1" value="40" id="mapMaxBubSize" title="Type Bubble Max Size." />
<label>Color</label>
<input type="color" value="#BAD6F2" id="mapColor" title="Select Bubble Color." />
<label>Select Map</label>
<select name="tech" id="mapSelectMap" class="tech" title="Select Map.">
<option value="0">Select Map</option>
<option value="countries/us/us-all" selected="selected">US alone</option>
<option value="custom/world">Custom World</option>
</select>
<div id="apply" style="cursor: pointer; background-color: red; color: white; width: 100px; padding: 5px; float: right;">Apply Settings</div>
</body>
</html>
[/html]

Conclusion

Please download the source code for more details. I hope you liked this article. Now please share your thoughts and suggestions. It matters a lot.

Kindest Regards
Sibeesh Venu