×
Namespaces

Variants
Actions
Revision as of 15:49, 30 December 2011 by jackdenial (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Change Marker based on zoom level in HERE Maps

From Nokia Developer Wiki
Jump to: navigation, search

Introduction

Sometimes, we want to show a number of markers on the map world wide. But when the user zooms in or zooms out the markers get distorted, we want them to be smaller or may be we want the markers to be changed if a user zooms the map at street level. Lets try to write a code for this.

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.

// 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 standardMarker = new nokia.maps.map.StandardMarker(map.center);
// Next we need to add it to the map's object collection so it will be rendered onto the map.
map.objects.add(standardMarker);
 
map.addObserver("zoomLevel",function(){
if(map.zoomLevel > 5)
 
});
142 page views in the last 30 days.
×