Revision as of 13:57, 9 January 2012

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

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