Change Marker based on zoom level in HERE Maps

This article shows how to control the display of map markers based on zoom level.

Article Metadata

Dependencies: Nokia Maps 2.1.0

---

Article

Keywords: Nokia Maps

Created: jackdenial (30 Dec 2011)

Last edited: hamishwillee (03 Jan 2012)

Adding map observer

In this code snippet, we are adding zoomLevel property of the map to monitor the zoom and we will change the marker accordingly.

// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
var map = new nokia.maps.map.Display(mapContainer, {
	// Initial center and zoom level of the map
	center: [52.51, 13.4],
	zoomLevel: 3,
	components: [
		// ZoomBar provides an UI to zoom the map in & out
		new nokia.maps.map.component.ZoomBar(), 
		// We add the behavior component to allow panning / zooming of the map
		new nokia.maps.map.component.Behavior(),
		// Creates UI to easily switch between street map satellite and terrain mapview modes
		new nokia.maps.map.component.TypeSelector()
	]
});
 
var la=52.51;
var lo=13.4;
var standardMarker = new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)));
var standardMarkerProps = [
		{
			text: "42",
			brush: {
				color: "#F80"
			}
		}];
 
map.objects.add(standardMarker);
 
var arrColor = ["#0C0101","#220202","#320303","#410505","#520707","#640909","#7A0C0C","#910F0F","#AB0E0E","#D21313","#FC1111","#9DA008","#F4F80E","#0EF82A","#6ADB78","#0C0101","#220202","#320303","#410505","#520707","#640909","#AB0E0E","#D21313","#FC1111","#9DA008"];
 
map.addObserver("zoomLevel",function(){
	        map.objects.clear();
		standardMarkerProps[0].text = map.zoomLevel;
		standardMarkerProps[0].brush.color = arrColor[map.zoomLevel];
		map.objects.add(new nokia.maps.map.StandardMarker(
			new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)), 
			standardMarkerProps[0] 
		));	
});

Output

The output of the above code would look like below screenshot. Whenever you double click the map it will zoom in and the marker will show zoomLevel in the balloon and it's color will also get changed accordingly.