Change Marker based on zoom level in HERE Maps

Jump to: navigation, search

This article shows how to control the display of map markers based on zoom level. This can be useful both to ensure that markers are not distorted as the map level changes, or indeed to ensure that those displayed are still relevant.

Article Metadata

Code Example

Source file: marker.html

Tested with

Devices(s): Internet Explorer, Firefox, Google Chrome, Opera

Compatibility

Platform(s): Web

Dependencies: HERE Maps 2.2.3

Article

Keywords: HERE Maps, JavaScript, Zoom, markers

Created: jackdenial (30 Dec 2011)

Last edited: jasfox (24 Apr 2013)

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>Changing Marker on Zoom</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script type="text/javascript" src="http://api.maps.nokia.com/2.2.3/jsl.js" charset="utf-8"></script>
    </head>
    <body>
 
        <div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
        <script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you 
// register on http://api.developer.nokia.com/ 
//
			nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); 
			nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
 
//			
/////////////////////////////////////////////////////////////////////////////////////
 
// 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.text = map.zoomLevel;
		standardMarkerProps.brush.color = arrColor[map.zoomLevel];
		map.objects.add(new nokia.maps.map.StandardMarker(
			new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)), 
			standardMarkerProps
		));	
});
 
</script>
</body>
</html>

Output

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

Demo

Double click to zoom-in
Double right-click to zoom-out

Wiki

Wiki Resources

Main Platforms

Other

Natural Languages

Toolbox

Namespaces

Variants

Views

Actions

Contents

Change Marker based on zoom level in HERE Maps

Comments

Hamishwillee - Is there an URL where we can see this "in action"?

Jackdenial - Updated the "In Action" Demo URL

Hamishwillee - @Jaydeep - looks good to me!

Article Metadata

See Also

Adding map observer

Output

Demo