×
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 - Initial Revision)
 
jasfox (Talk | contribs)
(Jasfox - Added KML example.)
Line 1: Line 1:
[[Category:Draft]][[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Code Examples]]
+
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Code Examples]]
 
{{ArticleMetaData
 
{{ArticleMetaData
 
|sourcecode= [[Media:HighlightedMarkerExample.zip]]  
 
|sourcecode= [[Media:HighlightedMarkerExample.zip]]  
Line 29: Line 29:
 
== Introduction ==
 
== Introduction ==
  
This example demonstrates how to highlight a marker, so that  the marker's 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 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.
  
 
[[File:HighlightMarkerExample.png]]
 
[[File:HighlightMarkerExample.png]]
Line 59: Line 59:
  
 
The fully coded example can be found here :  [[Media:HighlightedMarkerExample.zip]]  
 
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.
 +
 +
<code xml>
 +
<?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>
 +
</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.
  
 
== Tested with ==
 
== Tested with ==
  
 
Firefox 7.0.1
 
Firefox 7.0.1

Revision as of 13:57, 9 January 2012

Article Metadata
Code ExampleTested with
Devices(s): Firefox 7.0.1
Compatibility
Platform(s): Web Browser
Article
Created: jasfox (09 Jan 2012)
Last edited: jasfox (09 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

181 page views in the last 30 days.
×