×
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.
165 page views in the last 30 days.
×