×
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)
(Jasfox - Added KML example.)
jasfox (Talk | contribs)
m (Jasfox - links)
(13 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Code Examples]]
+
[[Category:Nokia 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.}}
 +
 
 
{{ArticleMetaData
 
{{ArticleMetaData
|sourcecode= [[Media:HighlightedMarkerExample.zip]]  
+
|sourcecode= [[Media:HighlightedMarkerExample.zip|HighlightedMarkerExample.zip]]  
 
|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 7.0.1
+
|devices= Firefox, Internet Explorer, Google Chrome, Safari
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|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= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
+
|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= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
+
|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 23: Line 25:
 
|author=[[User:jasfox]]
 
|author=[[User:jasfox]]
 
}}
 
}}
 
+
{{SeeAlso|
 
+
* [http://developer.here.net/javascript_api Nokia Maps API]
{{Abstract|This code example shows how to  highlight a Marker, so that the marker changes colour when the mouse pointer is over it.}}  
+
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/image-markers-using-css-sprite.html Image Markers using Sprites]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/svg-marker.html Creating a SVG marker]
 +
}}
  
 
== Introduction ==
 
== 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.
+
This example demonstrates how to highlight a {{Icode|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 {{Icode|mouseover}} and {{Icode|mouseout}} events.
  
 
[[File:HighlightMarkerExample.png]]
 
[[File:HighlightMarkerExample.png]]
Line 40: Line 44:
 
var blue= "#0000FF";
 
var blue= "#0000FF";
 
</code>
 
</code>
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.
+
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.
 
<code javascript>
 
<code javascript>
 
var normalMarker =  new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(41.0125,28.975833), {brush: {color: red}});
 
var normalMarker =  new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(41.0125,28.975833), {brush: {color: red}});
Line 61: Line 65:
  
 
== Alternative  Solution ==
 
== 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.
+
Highlighting markers can easily achieved using  ''KML'' syntax, since this is the sole purpose of the {{Icode|&lt;StyleMap&gt;}} element. The {{Icode|&lt;StyleMap&gt;}} consists of two "modes" - a '''normal''' mode, and a '''highlight''' mode, each of which refer to a {{Icode|&lt;Style&gt;}} element.
If two <Style> elements  refer to different <IconStyle>s, the icon will change if the marker is selected.
+
If two {{Icode|&lt;Style&gt;}} elements  refer to different {{Icode|&lt;IconStyle&gt;}}s, the icon will change if the marker is selected.
  
 
<code xml>
 
<code xml>
Line 102: 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 <Placemark>will be rendered as a ''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

189 page views in the last 30 days.
×