×
Namespaces

Variants
Actions
(Difference between revisions)

Change Marker based on zoom level in HERE Maps

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - links)
jasfox (Talk | contribs)
m (Jasfox - link)
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Code Snippet]][[Category:Nokia Maps]][[Category:JavaScript]]
+
[[Category:Code Snippet]][[Category:HERE Maps]][[Category:JavaScript]][[Category:Code Examples]]
 
{{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.}}
 
{{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.}}
  
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
|sourcecode=[http://www.planmyroute.info/marker.html marker.html]
+
|sourcecode= [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/simple-examples/change-marker-on-zoom.html change-marker-on-zoom.html]
 
|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= Internet Explorer, Firefox, Google Chrome, Opera
 
|devices= Internet Explorer, Firefox, Google Chrome, Opera
Line 9: Line 9:
 
|platform= Web
 
|platform= Web
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies=Nokia Maps 2.2.3
+
|dependencies= HERE Maps 2.5.3
|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, JavaScript, Zoom, markers
+
|keywords= HERE Maps, JavaScript, Zoom, markers
|id= <!-- Article Id (Knowledge base articles only) -->
+
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate=20111230
+
|creationdate= 20111230
|author=[[User:Jackdenial]]
+
|author= [[User:Jackdenial]]
 
}}
 
}}
  
  
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.net/javascript_api HERE Maps API]
 +
* [http://heremaps.github.io/examples/index.html HERE Maps on Github]
 
* [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/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]
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/events/map-observe-to-control-2nd-map.html Observing Map Properties]
Line 35: Line 35:
 
==Adding map observer==
 
==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.
+
In this code snippet, we are adding an observer to the {{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">
+
var arrColor = ["#0C0101","#220202","#320303","#410505","#520707",
<html xmlns="http://www.w3.org/1999/xhtml">
+
"#640909","#7A0C0C","#910F0F","#AB0E0E","#D21313","#FC1111","#9DA008",
    <head>
+
"#F4F80E","#0EF82A","#6ADB78","#0C0101","#220202","#320303","#410505",
      <title>Changing Marker on Zoom</title>
+
"#520707","#640909","#AB0E0E","#D21313","#FC1111","#9DA008"];
      <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>
+
 
  </code>
 
  </code>
 +
<code javascript>
 +
function addZoomObserver(map){
 +
map.addObserver("zoomLevel",function(){
 +
updateMarker();
 +
});
 +
}
 +
</code>
 +
<code javascript>
 +
function updateMarker(){
 +
marker.set("text",  map.zoomLevel);
 +
var brush = {color: arrColor[map.zoomLevel]};
 +
marker.set("brush", brush);
 +
}</code>
  
 
==Output==
 
==Output==
Line 115: Line 63:
 
[[File:zoomLevel.jpg]]
 
[[File:zoomLevel.jpg]]
  
==Demo==
+
Working Example:
  
* Double click to zoom-in
+
http://heremaps.github.io/examples/examples.html#change-marker-on-zoom
* Double right-click to zoom-out
+

Latest revision as of 18:08, 20 December 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 ExampleTested with
Devices(s): Internet Explorer, Firefox, Google Chrome, Opera
Compatibility
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, JavaScript, Zoom, markers
Created: jackdenial (30 Dec 2011)
Last edited: jasfox (20 Dec 2013)


[edit] 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",
"#640909","#7A0C0C","#910F0F","#AB0E0E","#D21313","#FC1111","#9DA008",
"#F4F80E","#0EF82A","#6ADB78","#0C0101","#220202","#320303","#410505",
"#520707","#640909","#AB0E0E","#D21313","#FC1111","#9DA008"];
function addZoomObserver(map){
map.addObserver("zoomLevel",function(){
updateMarker();
});
}
function updateMarker(){
marker.set("text", map.zoomLevel);
var brush = {color: arrColor[map.zoomLevel]};
marker.set("brush", brush);
}

[edit] 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

Working Example:

http://heremaps.github.io/examples/examples.html#change-marker-on-zoom

This page was last modified on 20 December 2013, at 18:08.
132 page views in the last 30 days.
×