×
Namespaces

Variants
Actions
(Difference between revisions)

Change Marker based on zoom level in HERE Maps

From Nokia Developer Wiki
Jump to: navigation, search
jackdenial (Talk | contribs)
(Jackdenial - - Adding Map Observer)
jasfox (Talk | contribs)
m (Jasfox - links)
(16 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[[Category:Draft]]
+
[[Category:Code Snippet]][[Category:Nokia Maps]][[Category:JavaScript]]
==Introduction==
+
{{Abstract|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.}}
  
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.
+
{{ArticleMetaData
 +
|sourcecode=[http://www.planmyroute.info/marker.html marker.html]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= Internet Explorer, Firefox, Google Chrome, Opera
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= Web
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies=Nokia Maps 2.2.3
 +
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Nokia Maps, JavaScript, Zoom, markers
 +
|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
 +
|author=[[User:Jackdenial]]
 +
}}
  
==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.
+
{{SeeAlso|
 +
* [http://developer.here.net/javascript_api Nokia Maps API]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/map/zooming-the-map.html Zooming the Map]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/events/map-observe-to-control-2nd-map.html Observing Map Properties]
 +
}}
 +
 
 +
==Adding map observer==
 +
 
 +
In this code snippet, we are adding {{Icode|zoomLevel}} property of the map to monitor the zoom and we will change the marker accordingly.
  
 
<code javascript>
 
<code javascript>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
    <head>
 +
      <title>Changing Marker on Zoom</title>
 +
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
      <script type="text/javascript" src="http://api.maps.nokia.com/2.2.3/jsl.js" charset="utf-8"></script>
 +
    </head>
 +
    <body>
 +
 +
        <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 http://api.developer.nokia.com/
 +
//
 +
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
 
// Get the DOM node to which we will append the map
 
var mapContainer = document.getElementById("mapContainer");
 
var mapContainer = document.getElementById("mapContainer");
Line 24: Line 76:
 
]
 
]
 
});
 
});
 
+
 
var la=52.51;
 
var la=52.51;
 
var lo=13.4;
 
var lo=13.4;
 
var standardMarker = new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)));
 
var standardMarker = new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)));
var standardMarkerProps = [
+
var standardMarkerProps =  
 
{
 
{
 
text: "42",
 
text: "42",
Line 34: Line 86:
 
color: "#F80"
 
color: "#F80"
 
}
 
}
}];
+
};
 
+
 
map.objects.add(standardMarker);
 
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"];
+
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.addObserver("zoomLevel",function(){
 
        map.objects.clear();
 
        map.objects.clear();
standardMarkerProps[0].text = map.zoomLevel;
+
standardMarkerProps.text = map.zoomLevel;
standardMarkerProps[0].brush.color = arrColor[map.zoomLevel];
+
standardMarkerProps.brush.color = arrColor[map.zoomLevel];
 
map.objects.add(new nokia.maps.map.StandardMarker(
 
map.objects.add(new nokia.maps.map.StandardMarker(
 
new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)),  
 
new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)),  
standardMarkerProps[0]
+
standardMarkerProps
 
));
 
));
 
});
 
});
</code>
+
 +
</script>
 +
</body>
 +
</html>
 +
</code>
  
 
==Output==
 
==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.
+
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 {{Icode|zoomLevel}} in the balloon and its color will also get changed accordingly.
  
 
[[File:zoomLevel.jpg]]
 
[[File:zoomLevel.jpg]]
 +
 +
==Demo==
 +
 +
* Double click to zoom-in
 +
* Double right-click to zoom-out

Revision as of 18:18, 3 January 2013

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
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.3
Article
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Changing Marker on Zoom</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.maps.nokia.com/2.2.3/jsl.js" charset="utf-8"></script>
</head>
<body>
 
<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 http://api.developer.nokia.com/
//
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 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.text = map.zoomLevel;
standardMarkerProps.brush.color = arrColor[map.zoomLevel];
map.objects.add(new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(parseFloat(la), parseFloat(lo)),
standardMarkerProps
));
});
 
</script>
</body>
</html>

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

Demo

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

×