×
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 monospacing.)
jasfox (Talk | contribs)
m (Jasfox - links)
(4 intermediate revisions by 2 users not shown)
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
+
|dependencies= Nokia Maps API 2.2.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
+
|keywords= Nokia 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://api.maps.nokia.com/ Nokia Maps API]  
+
* [http://developer.here.net/javascript_api Nokia Maps API]
* [http://api.maps.nokia.com/en/playground/examples/maps/map_objects/spritedmarkers.html Image Markers using Sprites]
+
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/image-markers-using-css-sprite.html Image Markers using Sprites]
* [http://api.maps.nokia.com/en/playground/examples/maps/map_objects/customsvgmarker.html Creating a SVG marker]
+
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/svg-marker.html Creating a SVG marker]
 
  }}
 
  }}
  
Line 106: Line 106:
 
</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://api.maps.nokia.com/2.1.0/playground/index.html Nokia Map Playground]  KML Example. 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 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.
  
 
== Tested with ==
 
== Tested with ==
  
Firefox 7.0.1
+
Firefox 12x

Revision as of 18:52, 3 January 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: Nokia Maps API 2.2.3
Article
Keywords: Nokia Maps, JavaScript, Marker, highlight
Created: jasfox (09 Jan 2012)
Last edited: jasfox (03 Jan 2013)

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

Tested with

Firefox 12x

204 page views in the last 30 days.
×