×
Namespaces

Variants
Actions

HERE Maps API - How to highlight a Marker

From Nokia Developer Wiki
Jump to: navigation, search

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)

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

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

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