×
Namespaces

Variants
Actions
Revision as of 13:17, 22 August 2013 by jasfox (Talk | contribs)

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.2.3
Article
Keywords: HERE Maps, JavaScript, Zoom, markers
Created: jackdenial (30 Dec 2011)
Last edited: jasfox (22 Aug 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://rawgithub.com/heremaps/examples/master/maps_js/change-marker-on-zoom.html

295 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×