HERE Maps API - How to highlight a Marker
m (Jasfox - link) |
m (Jasfox - links) |
||
| (One intermediate revision by one user 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:// | + | * [http://developer.here.net/javascript_api Nokia Maps API] |
| − | * [http:// | + | * [http://developer.here.net/apiexplorer/examples/api-for-js/markers/image-markers-using-css-sprite.html Image Markers using Sprites] |
| − | * [http:// | + | * [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:// | + | 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|<Placemark>}} will be rendered as a {{Icode|MapMarker}}, and the icon will change when the mouse is over the marker. |
== Tested with == | == Tested with == | ||
| − | Firefox | + | 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 Example
Tested with
Compatibility
Article
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.
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
