×
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 - links)
jasfox (Talk | contribs)
m (Jasfox - link)
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:Code Examples]][[Category:JavaScript]]
+
[[Category:HERE Maps]][[Category:Code Examples]][[Category:JavaScript]]
 
{{Abstract|This article explains how to set up a map event {{Icode|listener}} so that designated markers on the map are '''interactive'''.
 
{{Abstract|This article explains how to set up a map event {{Icode|listener}} so that designated markers on the map are '''interactive'''.
 
If a marker is given an {{Icode|$href}} attribute, clicking on the marker will forward the user to the given URL. If a marker is given a
 
If a marker is given an {{Icode|$href}} attribute, clicking on the marker will forward the user to the given URL. If a marker is given a
{{Icode|$click}} attribute, the browser will run the text of {{Icode|$click}} attribute as JavaScript when the marker is clicked. Through a combination of
+
{{Icode|$click}} attribute, the browser will run the text of {{Icode|$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 {{Icode|click}} events of many map objects are serviced but
 
these functions most map interactions should be satisfied. This is an example of ''event delegation'', since the {{Icode|click}} events of many map objects are serviced but
 
only one {{Icode|click}} event listener is created.}}  
 
only one {{Icode|click}} event listener is created.}}  
  
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= [[Media:nm_interactive_marker.zip|Markers Example]]  
+
|sourcecode= [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/demos/marker-interactivity-component/libs/interactive-control.js libs/interactive-control.js]
 +
 
 +
<br/>Examples:
 +
* [http://heremaps.github.io/examples/examples.html#marker-interactivity-component__index marker-interactivity-component]
 
|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= Google Chrome , Firefox, Internet Explorer 8
+
|devices= Google Chrome, Firefox, Internet Explorer 8
 
|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=Nokia Maps 2.2.3
+
|dependencies= HERE Maps 2.5.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, Click, Link, Forward
+
|keywords= HERE Maps, JavaScript, Marker, Click, Link, Forward
|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 -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate=20120308
+
|creationdate= 20120308
|author=[[User:jasfox]]
+
|author= [[User:jasfox]]
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.com/javascript_api HERE Maps API]
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/marker.html Adding a Marker]
+
* [http://heremaps.github.io/examples/index.html HERE Maps on Github]
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/image-markers-using-css-sprite.html Markers using Sprites]
+
* [http://developer.here.com/apiexplorer/examples/api-for-js/markers/marker.html Adding a Marker]
* [http://developer.here.net/apiexplorer/examples/api-for-js/events/event-delegation.html Event Delegation Example]
+
* [http://developer.here.com/apiexplorer/examples/api-for-js/markers/image-markers-using-css-sprite.html Markers using Sprites]
* [[Nokia Maps API - How to add map markers]]
+
* [http://developer.here.com/apiexplorer/examples/api-for-js/events/event-delegation.html Event Delegation Example]
*  [[Nokia Maps API - How to create a Tooltip]]
+
* [[HERE Maps API - How to add map markers]]
 +
*  [[HERE Maps API - How to create a Tooltip]]
 
}}
 
}}
 
== Introduction ==
 
== Introduction ==
Line 48: Line 51:
  
 
* If a marker has an {{Icode|$href}} attribute, clicking on the marker will forward the user to the given URL.
 
* If a marker has an {{Icode|$href}} attribute, clicking on the marker will forward the user to the given URL.
* If a marker has a {{Icode|$click}} attribute, the browser will run the text of {{Icode|$click}} attribute as JavaScript when the marker is clicked.
+
* If a marker has a {{Icode|$click}} attribute, the browser will run the text of {{Icode|$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  {{Icode|window.location}}; to run some arbitrary JavaScript, we could use the {{Icode|eval()}} method, but it is better practice to create our own function as shown and to run it directly.
 
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  {{Icode|window.location}}; to run some arbitrary JavaScript, we could use the {{Icode|eval()}} method, but it is better practice to create our own function as shown and to run it directly.
Line 66: Line 69:
 
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 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
 
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 104: Line 107:
 
</code>
 
</code>
  
A marker with a {{Icode|$click}} attribute and works like a firing an {{Icode|onclick}} event.
+
A marker with a {{Icode|$click}} attribute and works like a firing an {{Icode|onclick}} event.
 
<code javascript>
 
<code javascript>
 
var markerWithClickEvent= new nokia.maps.map.StandardMarker(
 
var markerWithClickEvent= new nokia.maps.map.StandardMarker(
Line 113: Line 116:
  
 
== Summary ==
 
== Summary ==
The  [[Media:nm_interactive_marker.zip|Sample Code]] provides an example of '''interactive''' markers in action.
+
 
 +
[[File:interactive markers.png]]
 +
 
 +
A working example which bundles the interactivity into a map component and shows '''interactive''' markers in action can be found at:
 +
 
 +
http://heremaps.github.io/examples/examples.html#marker-interactivity-component__index
 +
 
 
*    The Blue marker works like a link, clicking on it forwards you to a new page
 
*    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 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.
 
*    The Red marker is just a marker, it does nothing special, note that cursor does not change as you hover over it.
 
[[File:interactive_markers.png]]
 

Latest revision as of 15:51, 20 December 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 ExampleTested with
Devices(s): Google Chrome, Firefox, Internet Explorer 8
Compatibility
Platform(s): Web Browser
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, JavaScript, Marker, Click, Link, Forward
Created: jasfox (08 Mar 2012)
Last edited: jasfox (20 Dec 2013)

Contents

[edit] 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

[edit] Code Commentary

[edit] 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();
}
});

[edit] 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');
});

[edit] 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");'}
);

[edit] Summary

Interactive markers.png

A working example which bundles the interactivity into a map component and shows interactive markers in action can be found at:

http://heremaps.github.io/examples/examples.html#marker-interactivity-component__index

  • 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.
This page was last modified on 20 December 2013, at 15:51.
217 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×