×
Namespaces

Variants
Actions
(Difference between revisions)

Change Marker based on zoom level in HERE Maps

From Nokia Developer Wiki
Jump to: navigation, search
chintandave_er (Talk | contribs)
(Chintandave er - added articlemeta tag and Abstract)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update of Template:ArticleMetaData)
Line 3: Line 3:
  
 
{{ArticleMetaData
 
{{ArticleMetaData
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= Nokia Maps
 
|keywords= Nokia Maps
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by=<!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|creationdate=20111230
 
|creationdate=20111230
|author= [[User:jackdenial]]
+
|author=[[User:Jackdenial]]
 
}}
 
}}
  

Revision as of 03:22, 3 January 2012

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.].

Article Metadata
Article
Keywords: Nokia Maps
Created: jackdenial (30 Dec 2011)
Last edited: hamishwillee (03 Jan 2012)

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 la=52.51;
var lo=13.4;
var standardMarker = new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)));
var standardMarkerProps = [
{
text: "42",
brush: {
color: "#F80"
}
}];
 
map.objects.add(standardMarker);
 
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"];
 
map.addObserver("zoomLevel",function(){
map.objects.clear();
standardMarkerProps[0].text = map.zoomLevel;
standardMarkerProps[0].brush.color = arrColor[map.zoomLevel];
map.objects.add(new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)),
standardMarkerProps[0]
));
});

Output

The output of the above code would look like below screenshot. Whenever you double click the map it will zoom in and the marker will show zoomLevel in the balloon and it's color will also get changed accordingly.

ZoomLevel.jpg

128 page views in the last 30 days.
×