×
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 - Add Category)
rahulvala (Talk | contribs)
m (Rahulvala -)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Web]][[Category:Location]]
+
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Web]][[Category:Location]][[Category:How To]]
 
{{ArticleMetaData
 
{{ArticleMetaData
 
|sourcecode= [[Media:HighlightedMarkerExample.zip]]  
 
|sourcecode= [[Media:HighlightedMarkerExample.zip]]  

Revision as of 09:56, 14 January 2012

Article Metadata
Code ExampleTested with
Devices(s): Firefox 7.0.1
Compatibility
Platform(s): Web Browser
Article
Keywords: Nokia Maps, JavaScript, Marker
Created: jasfox (09 Jan 2012)
Last edited: rahulvala (14 Jan 2012)


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

Contents

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 colours

var red = "#FF0000";
var blue= "#0000FF";

A Standard Marker is added which listens for a mouseover event. When this occurs, the code adds a "highlight" marker of a different colour in the same place, and makes the "normal" marker invisible. A reference back to the "normal" marker is added to the "highlight" marker, which in turn holds a mouseout event. When the "mouseout" event is fired, the "highlight" marker is removed , and the "normal" marker made visible again.

var	normalMarker =  new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(41.0125,28.975833), {brush: {color: red}});
normalMarker.addListener("mouseover" , function(evt) {
evt.target.visible = false;
var highlightMarker = new nokia.maps.map.StandardMarker(evt.target.coordinate, {brush: {color: blue}});
highlightMarker.normal = evt.target;
highlightMarker.addListener("mouseout" , function(evt) {
map.objects.remove(evt.target);
evt.target.normal.visible = true;
}, false);
map.objects.add(highlightMarker);
}, false);
 
map.objects.add(normalMarker);
}

The fully coded example can be found here : Media:HighlightedMarkerExample.zip

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 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 Nokia Map Playground KML Example. The <Placemark>will be rendered as a MapMarker, and the icon will change when the mouse is over the marker.

Tested with

Firefox 7.0.1

204 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.

×