×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to interact with Markers

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - link.)
jasfox (Talk | contribs)
m (Jasfox - links)
(4 intermediate revisions by one user not shown)
Line 13: Line 13:
 
|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 2.2.1
+
|dependencies=Nokia Maps 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. -->
Line 30: Line 30:
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
* [http://api.maps.nokia.com/en/maps/intro.html Nokia Maps API]
+
* [http://developer.here.net/javascript_api Nokia Maps API]
* [http://api.maps.nokia.com/en/playground/examples/maps/map_objects/standardmarker.html Adding a Marker]
+
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/marker.html Adding a Marker]
* [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 Markers using Sprites]
* [http://api.maps.nokia.com/en/playground/examples/maps/events/eventdelegation.html Event Delegation Example]
+
* [http://developer.here.net/apiexplorer/examples/api-for-js/events/event-delegation.html Event Delegation Example]
 
* [[Nokia Maps API - How to add map markers]]
 
* [[Nokia Maps API - How to add map markers]]
 
*  [[Nokia Maps API - How to create a Tooltip]]
 
*  [[Nokia Maps API - How to create a Tooltip]]
Line 65: Line 65:
 
=== Adding Visual Feedback ===
 
=== Adding Visual Feedback ===
 
Markers give points of focus to a map, but there is nothing intrinsic about them which means that a user will automatically click on them. You need to give the user some sort of visual indication that the markers are to be clicked.
 
Markers give points of focus to a map, but there is nothing intrinsic about them which means that a user will automatically click on them. You need to give the user some sort of visual indication that the markers are to be clicked.
A lack of visual feeback (especially when the interaction results in updating the page) is known as "Mystery Meat Navigation" and results in a poor user experience. It is much better Human Computer Interaction to '''warn''' the user
+
A lack of visual feedback (especially when the interaction results in updating the page) is known as "Mystery Meat Navigation" and results in a poor user experience. It is much better Human Computer Interaction to '''warn''' the user
 
prior to  his decision that something will happen if they click on the screen at this point.  We need to change the shape of the mouse pointer when the user hovers over an interactive marker. This can be done by dynamically altering the  
 
prior to  his decision that something will happen if they click on the screen at this point.  We need to change the shape of the mouse pointer when the user hovers over an interactive marker. This can be done by dynamically altering the  
 
{{Icode|document.body.style.cursor}} style.
 
{{Icode|document.body.style.cursor}} style.
Line 78: Line 78:
 
</code>
 
</code>
  
Again we can use the wire up the {{Icode|click}}, {{Icode|mouseover}} and  {{Icode|mouseout}} events to ensure that the mouse pointer is altered when a relevant marker has focus, and reverted back when that focus is lost (or the marker has been clicked.)
+
Again we can wire up the {{Icode|click}}, {{Icode|mouseover}} and  {{Icode|mouseout}} events to ensure that the mouse pointer is altered when a relevant marker has focus, and changed back when that focus is lost (or the marker has been clicked.)
  
 
<code javascript>
 
<code javascript>
Line 96: Line 96:
  
 
=== Creating the markers ===
 
=== Creating the markers ===
The markers are created in the usual manner, but each '''interactive''' marker has an additional attribute. A marker with an {{Icode|$href}} attribute and works like a link.
+
The markers are created in the usual manner, but each '''interactive''' marker has an additional attribute. A marker with an {{Icode|$href}} attribute works like a link.
 
<code javascript>
 
<code javascript>
 
var markerWithLink= new nokia.maps.map.StandardMarker(
 
var markerWithLink= new nokia.maps.map.StandardMarker(

Revision as of 18:55, 3 January 2013

This article explains how to set up a map event listener so that designated markers on the map are interactive. If a marker is given an $href attribute, clicking on the marker will forward the user to the given URL. If a marker is given a $click attribute, the browser will run the text of $click attribute as JavaScript when the marker is clicked. Through a combination of these functions most map interactions should be satisfied. This is an example of event delegation, since the click events of many map objects are serviced but only one click event listener is created.

Article Metadata
Code Example
Source file: Markers Example
Tested with
Devices(s): Google Chrome , Firefox, Internet Explorer 8
Compatibility
Platform(s): Web Browser
Dependencies: Nokia Maps 2.2.3
Article
Keywords: Nokia Maps, JavaScript, Marker, Click, Link, Forward
Created: jasfox (08 Mar 2012)
Last edited: jasfox (03 Jan 2013)

Contents

Introduction

A frequent use case of the Nokia Map API, would be where data is summarised by displaying it on a map, and clicking on the map markers should result in further information being displayed about that particular marker. This interaction can be achieved through associating some extra data with each marker and adding an event listener to read and process that data. The simple JavaScript functions described below can be re-used on an web page to process standard onclick and forward events

Code Commentary

Adding a "click" Event Listener to the Map

Tip.pngTip: If you have lots of groups of map objects and want each subset to do different things, you could place each group into its own map container and wire up the event listener on each individual map container instead.

After having created a map in the usual manner, a click event listener needs to be created. This will fire whenever the map itself or any of its children is clicked. To reduce the interaction down to only to certain objects, we can check the properties of the evt.target (i.e. the actual object that was clicked) and see if it satisfies our criteria. In this case we want to service two cases :

  • If a marker has an $href attribute, clicking on the marker will forward the user to the given URL.
  • If a marker has a $click attribute, the browser will run the text of $click attribute as JavaScript when the marker is clicked.

Hence there is a check to see if the given attribute has been defined, followed by the necessary code to service the request. To forward a browser to another web page, we simply need to set the window.location; to run some arbitrary JavaScript, we could use the eval() method, but it is better practice to create our own function as shown and to run it directly.

map.addListener("click", function(evt) {	
if (( evt.target.$href === undefined) == false){
window.location = evt.target.$href;
} else if (( evt.target.$click === undefined) == false){
var onClickDo = new Function(evt.target.$click);
onClickDo();
}
});

Adding Visual Feedback

Markers give points of focus to a map, but there is nothing intrinsic about them which means that a user will automatically click on them. You need to give the user some sort of visual indication that the markers are to be clicked. A lack of visual feedback (especially when the interaction results in updating the page) is known as "Mystery Meat Navigation" and results in a poor user experience. It is much better Human Computer Interaction to warn the user prior to his decision that something will happen if they click on the screen at this point. We need to change the shape of the mouse pointer when the user hovers over an interactive marker. This can be done by dynamically altering the document.body.style.cursor style.

function changeCursor(target, cursor){
if ((( target.$href === undefined) == false) ||
(( target.$click === undefined) == false)){
document.body.style.cursor = cursor;
}
}

Again we can wire up the click, mouseover and mouseout events to ensure that the mouse pointer is altered when a relevant marker has focus, and changed back when that focus is lost (or the marker has been clicked.)

map.addListener("click", function(evt) {
changeCursor(evt.target, 'default');
.... etc ...
});
 
map.addListener("mouseover", function(evt) {
changeCursor(evt.target, 'pointer');
});
 
map.addListener("mouseout", function(evt) {
changeCursor(evt.target, 'default');
});

Creating the markers

The markers are created in the usual manner, but each interactive marker has an additional attribute. A marker with an $href attribute works like a link.

var markerWithLink= new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(52.516237, 13.377686),
{$href : 'http://example.com/'}
);

A marker with a $click attribute and works like a firing an onclick event.

var markerWithClickEvent= new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(52.520816, 13.409417),
{$click : 'alert("Hello World");'}
);

Summary

The Sample Code provides an example of interactive markers in action.

  • The Blue marker works like a link, clicking on it forwards you to a new page
  • The Green marker executes a line of JavaScript (as shown) when it is clicked.
  • The Red marker is just a marker, it does nothing special, note that cursor does not change as you hover over it.

Interactive markers.png

223 page views in the last 30 days.
×