×
Namespaces

Variants
Actions

Change Marker based on zoom level in HERE Maps

From Nokia Developer Wiki
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 ExampleTested with
Devices(s): Internet Explorer, Firefox, Google Chrome, Opera
Compatibility
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, JavaScript, Zoom, markers
Created: jackdenial (30 Dec 2011)
Last edited: jasfox (20 Dec 2013)


Adding map observer

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

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"];
function addZoomObserver(map){
map.addObserver("zoomLevel",function(){
updateMarker();
});
}
function updateMarker(){
marker.set("text", map.zoomLevel);
var brush = {color: arrColor[map.zoomLevel]};
marker.set("brush", brush);
}

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.

ZoomLevel.jpg

Working Example:

http://heremaps.github.io/examples/examples.html#change-marker-on-zoom

This page was last modified on 20 December 2013, at 18:08.
212 page views in the last 30 days.
×