×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to highlight a Marker

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - links)
jasfox (Talk | contribs)
m (Jasfox - links)
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Examples]]
+
[[Category:HERE Maps]][[Category:JavaScript]][[Category:Code Examples]]
 
{{Abstract|This code example shows how to  highlight a {{Icode|Marker}}, so that the marker changes colour when the mouse pointer is over it.}}  
 
{{Abstract|This code example shows how to  highlight a {{Icode|Marker}}, so that the marker changes colour when the mouse pointer is over it.}}  
  
 
{{ArticleMetaData
 
{{ArticleMetaData
|sourcecode= [[Media:HighlightedMarkerExample.zip|HighlightedMarkerExample.zip]]  
+
|sourcecode= [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/simple-examples/highlighting-a-marker.html highlighting-a-marker.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= Firefox, Internet Explorer, Google Chrome, Safari
 
|devices= Firefox, Internet Explorer, Google Chrome, Safari
Line 9: Line 9:
 
|platform= Web Browser
 
|platform= Web Browser
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= Nokia Maps API 2.2.3
+
|dependencies= HERE Maps API 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, Marker, highlight
+
|keywords= HERE Maps, JavaScript, Marker, highlight
 
|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 -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
Line 26: Line 26:
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.com/javascript_api HERE Maps API]
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/image-markers-using-css-sprite.html Image Markers using Sprites]
+
* [http://heremaps.github.io/examples/index.html HERE Maps on Github]
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/svg-marker.html Creating a SVG marker]
+
* [http://developer.here.com/apiexplorer/examples/api-for-js/markers/image-markers-using-css-sprite.html Image Markers using Sprites]
 +
* [http://developer.here.com/apiexplorer/examples/api-for-js/markers/svg-marker.html Creating a SVG marker]
 
  }}
 
  }}
  
Line 39: Line 40:
 
== Example code ==
 
== Example code ==
  
After setting up the map in the usual manner, we define two map colours
+
After setting up the map in the usual manner, we define two map colors
 
<code javascript>
 
<code javascript>
var red = "#FF0000";
+
var red = {color: "#FF0000"};
var blue= "#0000FF";
+
var blue= {color: "#0000FF"};
 
</code>
 
</code>
A {{Icode|StandardMarker}} is added which listens for a {{Icode|mouseover}} event. When this occurs, the code adds a '''highlight''' {{Icode|marker}} of a different colour in the same place, and makes the '''normal''' {{Icode|marker}} invisible. A reference back to the '''normal''' {{Icode|marker}} is added to the '''highlight''' {{Icode|marker}}, which in turn holds a {{Icode|mouseout}} event. When the {{Icode|mouseout}} event is fired, the '''highlight''' {{Icode|marker}} is removed , and the '''normal''' {{Icode|marker}} made visible again.
+
A {{Icode|StandardMarker}} is added which listens for a {{Icode|mouseover}} event. When this occurs, the code set a '''highlight''' {{Icode|brush}} of a different color on the marker.The associated {{Icode|mouseout}} event returns the {{Icode|brush}}to the "normal" color.
 
<code javascript>
 
<code javascript>
var normalMarker =  new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(41.0125,28.975833), {brush: {color: red}});
+
function addHighlightableMarker(map) {
normalMarker.addListener("mouseover" ,  function(evt) {  
+
var marker =  new nokia.maps.map.StandardMarker
    evt.target.visible = false;
+
(new nokia.maps.geo.Coordinate(41.0125,28.975833),  
    var highlightMarker =  new nokia.maps.map.StandardMarker(evt.target.coordinate, {brush: {color: blue}});
+
{brush: red});
    highlightMarker.normal  = evt.target;
+
 
    highlightMarker.addListener("mouseout" ,  function(evt) {  
+
 
        map.objects.remove(evt.target);
+
marker.addListener("mouseover" ,  function(evt) {  
        evt.target.normal.visible = true;
+
evt.target.set("brush", blue);
    }, false);
+
map.update(-1, 0);
    map.objects.add(highlightMarker);
+
});
}, false);
+
 
+
marker.addListener("mouseout" ,  function(evt) {  
map.objects.add(normalMarker);
+
evt.target.set("brush", red);
}          
+
map.update(-1, 0);
 +
});
 +
map.objects.add(marker);
 +
}        
 
</code>
 
</code>
  
The fully coded example can be found here : [[Media:HighlightedMarkerExample.zip]]
+
A fully working example can be found at:
 +
 
 +
http://heremaps.github.io/examples/examples.html#highlighting-a-marker
  
 
== Alternative  Solution ==
 
== Alternative  Solution ==
Line 106: Line 112:
 
</code>
 
</code>
  
Since the latest version of the Nokia Maps API is able to natively render KML files, the  KML above can be loaded directly onto a map using the code from the [http://developer.here.net/apiexplorer/examples/api-for-js/data-visualization/map-with-interactive-kml-objects.html Load KML Example] of the [http://developer.here.net/javascript_api_explorer API explorer]. The {{Icode|&lt;Placemark&gt;}} will be rendered as a {{Icode|MapMarker}}, and the icon will change when the mouse is over the marker.
+
Since the latest version of the HERE Maps API is able to natively render KML files, the  KML above can be loaded directly onto a map using the code from the [http://developer.here.com/apiexplorer/examples/api-for-js/data-visualization/map-with-interactive-kml-objects.html Load KML Example] of the [http://developer.here.com/javascript_api_explorer API explorer]. The {{Icode|&lt;Placemark&gt;}} will be rendered as a {{Icode|MapMarker}}, and the icon will change when the mouse is over the marker.
 
+
== Tested with ==
+
 
+
Firefox 12x
+

Latest revision as of 18:52, 20 December 2013

This code example shows how to highlight a Marker, so that the marker changes colour when the mouse pointer is over it.

Article Metadata
Code ExampleTested with
Devices(s): Firefox, Internet Explorer, Google Chrome, Safari
Compatibility
Platform(s): Web Browser
Dependencies: HERE Maps API 2.5.3
Article
Keywords: HERE Maps, JavaScript, Marker, highlight
Created: jasfox (09 Jan 2012)
Last edited: jasfox (20 Dec 2013)

[edit] Introduction

This example demonstrates how to highlight a Marker, so that the marker's appearance is altered if the mouse pointer is left over it. As such it is a demonstration of the use of the mouseover and mouseout events.

HighlightMarkerExample.png

[edit] Example code

After setting up the map in the usual manner, we define two map colors

var red =  {color: "#FF0000"};
var blue= {color: "#0000FF"};

A StandardMarker is added which listens for a mouseover event. When this occurs, the code set a highlight brush of a different color on the marker.The associated mouseout event returns the brushto the "normal" color.

function addHighlightableMarker(map) { 
var marker = new nokia.maps.map.StandardMarker
(new nokia.maps.geo.Coordinate(41.0125,28.975833),
{brush: red});
 
 
marker.addListener("mouseover" , function(evt) {
evt.target.set("brush", blue);
map.update(-1, 0);
});
 
marker.addListener("mouseout" , function(evt) {
evt.target.set("brush", red);
map.update(-1, 0);
});
map.objects.add(marker);
}

A fully working example can be found at:

http://heremaps.github.io/examples/examples.html#highlighting-a-marker

[edit] Alternative Solution

Highlighting markers can easily achieved using KML syntax, since this is the sole purpose of the <StyleMap> element. The <StyleMap> consists of two "modes" - a normal mode, and a highlight mode, each of which refer to a <Style> element. If two <Style> elements refer to different <IconStyle>s, the icon will change if the marker is selected.

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns='http://www.opengis.net/kml/2.2'>
<Document>
<Style id='BlueIcon'>
<IconStyle>
<Icon>
<href>http://www.example.com/blue.png</href>
</Icon>
</IconStyle>
</Style>
<Style id='RedIcon'>
<IconStyle>
<Icon>
<href>http://www.example.com/red.png</href>
</Icon>
</IconStyle>
</Style>
<StyleMap id="styleMapExample">
<Pair>
<key>normal</key>
<styleUrl>#RedIcon</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#BlueIcon</styleUrl>
</Pair>
</StyleMap>
<Placemark>
<Point>
<coordinates>28.975833,41.0125,0</coordinates>
</Point>
<styleUrl>#styleMapExample</styleUrl>
</Placemark>
</Document>
</kml>

Since the latest version of the HERE Maps API is able to natively render KML files, the KML above can be loaded directly onto a map using the code from the Load KML Example of the API explorer. The <Placemark> will be rendered as a MapMarker, and the icon will change when the mouse is over the marker.

This page was last modified on 20 December 2013, at 18:52.
297 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.

×