Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Change Marker based on zoom level in HERE Maps

From 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
Platform(s): Web
Dependencies: HERE Maps 2.5.3
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",
function addZoomObserver(map){
function updateMarker(){
marker.set("text", map.zoomLevel);
var brush = {color: arrColor[map.zoomLevel]};
marker.set("brush", brush);


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.


Working Example:

This page was last modified on 20 December 2013, at 15:08.
85 page views in the last 30 days.