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 over the next few weeks. Thanks for all your past and future contributions.

Revision as of 15:18, 3 January 2013 by jasfox (Talk | contribs)

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 Example
Source file: marker.html
Tested with
Devices(s): Internet Explorer, Firefox, Google Chrome, Opera
Platform(s): Web
Dependencies: Nokia Maps 2.2.3
Keywords: Nokia Maps, JavaScript, Zoom, markers
Created: jackdenial (30 Dec 2011)
Last edited: jasfox (03 Jan 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" "">
<html xmlns="">
<title>Changing Marker on Zoom</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="" charset="utf-8"></script>
<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
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, {
// 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
// We add the behavior component to allow panning / zooming of the map
// Creates UI to easily switch between street map satellite and terrain mapview modes
var la=52.51;
var lo=13.4;
var standardMarker = new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)));
var standardMarkerProps =
text: "42",
brush: {
color: "#F80"
var arrColor = ["#0C0101","#220202","#320303","#410505","#520707","#640909","#7A0C0C","#910F0F",
standardMarkerProps.text = map.zoomLevel;
standardMarkerProps.brush.color = arrColor[map.zoomLevel];
new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)),


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.



  • Double click to zoom-in
  • Double right-click to zoom-out
166 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.