×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to create a Context Menu

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - Add warning.)
Oskar Bukolt (Talk | contribs)
m (Oskar Bukolt - Update JS Lib + API Link)
Line 11: Line 11:
 
|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.1.0
+
|dependencies=Nokia Maps 2.2.1
 
|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 29: Line 29:
  
 
{{SeeAlso|
 
{{SeeAlso|
*  [http://api.maps.nokia.com/ Nokia Maps API]  
+
*  [http://api.maps.nokia.com/en/maps/intro.html Nokia Maps API]  
 
* [http://api.maps.nokia.com/2.1.1/playground/?example&#61;rightclick Extending Default Behaviour]
 
* [http://api.maps.nokia.com/2.1.1/playground/?example&#61;rightclick Extending Default Behaviour]
 
  }}
 
  }}
Line 37: Line 37:
 
==Introduction==
 
==Introduction==
  
When the user clicks the mouse right button, a RightClick event takes place. The Nokia Maps API there is certain functionality that can be attached to it and the opening menu.
+
Context menus as implemented in the Nokia Maps API are used to display relevant information and options to the user on right-click.  
  
In this example we will add Routing Component and the Search component.
+
They are instantiated as follows:
  
map.components.add(myRightClick);
+
<code java>var contextMenu = new nokia.maps.map.component.ContextMenu();</code>
map.components.add(myRoutingComponent);
+
map.components.add(mySearchComponent);
+
 
+
These can be then bound to further parts of your program to provide additional functionality.
+
  
 
==Prerequisites==
 
==Prerequisites==
Line 58: Line 54:
 
==Implementation==
 
==Implementation==
  
In the example we will add a RightClick() component to the map, then populate it with Routing and Search.
+
Context menus are divided into groups which are visually demarcated by line separators. Each groups consists of one or more entries. In the example we create an instance of context menu, and add two handlers to it with the contextMenu.addHandler() method. When the context menu is opened by the user, each handler creates a new group and populates it using the group.addEntry() method. The second parameter is a call-back function which executes some JavaScript code when the user clicks on the entry. <br />
 
+
<br />
 +
The following statement is important:
 +
<code java>map.components.add(contextMenu);</code>
 +
Without this the context box is not rendered on the map.
  
 
==Example code==
 
==Example code==
  
 
<code java>
 
<code java>
<html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
+
<html xmlns="http://www.w3.org/1999/xhtml">
    <script type="text/javascript"
+
<head>
    src="http://api.maps.nokia.com/2.0.0/jsl.js" charset="utf-8">
+
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</script>
+
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
      <link rel="stylesheet" href="style.css" />
+
<title>Context Menu</title>
</head>
+
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js"></script>
<body>
+
</head>
<div id="map" style="width:100%; height:100%;"></div>
+
<body>
</body>
+
<div id="mapcanvas" style="width:1200px; height:800px;" >&nbsp;</div>
<script type="text/javascript">
+
+
  <script type="text/javascript">
myRightClick = new nokia.maps.map.component.RightClick () ;
+
 
myRoutingComponent = new nokia.maps.routing.component.RightClick();
+
 
mySearchComponent = new nokia.maps.search.component.RightClick();
+
/////////////////////////////////////////////////////////////////////////////////////
+
// Don't forget to set your API credentials
var map = new nokia.maps.map.Display(document.getElementById("map"),  // new instance of Nokia Maps
+
//
{
+
// Replace with your appId and token which you can obtain when you
+
// register on http://api.developer.nokia.com/
    components: [
+
//
        new nokia.maps.map.component.Behavior(),
+
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");  
                new nokia.maps.map.component.ZoomBar(),
+
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
                new nokia.maps.map.component.Overview(),                            
+
//
                new nokia.maps.map.component.TypeSelector(),    
+
/////////////////////////////////////////////////////////////////////////////////////
                new nokia.maps.map.component.ScaleBar()
+
 
                ],
+
// Get the DOM node to which we will append the map
    'zoomLevel': 8,  
+
var mapContainer = document.getElementById("mapcanvas");
    'center':[19.119, 72.8957]
+
});
+
+
// Create a map inside the map container DOM node
map.set("baseMapType", map.NORMAL);
+
var map = new nokia.maps.map.Display(mapContainer, {
+
components: [
map.components.add(myRightClick);
+
new nokia.maps.map.component.panning.Drag(),
map.components.add(myRoutingComponent);
+
new nokia.maps.map.component.panning.Kinetic()
map.components.add(mySearchComponent);
+
],
+
'zoomLevel': 8,
</script>
+
  'center': [19.119, 72.8957]
</body>
+
});
 +
 +
var contextMenu = new nokia.maps.map.component.ContextMenu();
 +
 +
                /* Add Custom items */
 +
 +
//New Group
 +
var myHandler1 = function(contextMenuEvent, group) {
 +
//New Entry
 +
                                        group.addEntry(
 +
"Example Group 1",
 +
function(activationEvent) {
 +
alert("Result of code executed when group entry clicked");
 +
});
 +
                }
 +
//New Group
 +
var myHandler2 = function(contextMenuEvent, group) {
 +
//New Entry
 +
                                        group.addEntry(
 +
"Example Group 2",
 +
function(activationEvent) {
 +
alert("Result of code executed when group entry clicked");
 +
});
 +
                }
 +
 
 +
contextMenu.addHandler(myHandler1);
 +
contextMenu.addHandler(myHandler2);
 +
map.components.add(contextMenu);
 +
</script>
 +
    </body>
 
</html>
 
</html>
 
</code>
 
</code>
 
+
== Removing Handlers ==
 +
Syntax for removing a handler:
 +
<code java>contextMenu.removeHandler(existing_handler);</code>
 
== Screenshot ==
 
== Screenshot ==
 
[[File:NokiaMapsRightClick.png|700px]]
 
[[File:NokiaMapsRightClick.png|700px]]

Revision as of 18:57, 12 July 2012

This article explains how to enable right click on Nokia maps and add components to it - making the map tiles more interactive.

Needs-update.pngThis article needs to be updated: If you found this article useful, please fix the problems below then delete the {{ArticleNeedsUpdate}} template from the article to remove this warning.

Reasons: jasfox (18 Apr 2012)
This article refers to an outdated version 2.1.x of the API. Since version 2.2.x RightClick has been removed and replaced by Context Menu.

Article Metadata
Compatibility
Platform(s): Web browser
Dependencies: Nokia Maps 2.2.1
Article
Created: Maveric (21 Jun 2011)
Updated: avnee.nathani (31 Dec 2011)
Last edited: Oskar Bukolt (12 Jul 2012)


Contents

Introduction

Context menus as implemented in the Nokia Maps API are used to display relevant information and options to the user on right-click.

They are instantiated as follows:

var contextMenu = new nokia.maps.map.component.ContextMenu();

Prerequisites

Nokia Maps API supported web browser (basically any modern web browser)

Important note about maps credentials

Nokia provides several services options within the Maps API offering. The service is free to use, but you must obtain and use authentication and authorization credentials to use the services. Please read the Location API Business Models and Usage Restrictions page to decide which business model best fits your needs. Authentication requires unique Maps API credentials, namely an AppId and a token. You can get these credentials free from the Nokia Developer API Registration page.

Implementation

Context menus are divided into groups which are visually demarcated by line separators. Each groups consists of one or more entries. In the example we create an instance of context menu, and add two handlers to it with the contextMenu.addHandler() method. When the context menu is opened by the user, each handler creates a new group and populates it using the group.addEntry() method. The second parameter is a call-back function which executes some JavaScript code when the user clicks on the entry.

The following statement is important:

map.components.add(contextMenu);

Without this the context box is not rendered on the map.

Example code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<title>Context Menu</title>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js"></script>
</head>
<body>
<div id="mapcanvas" style="width:1200px; height:800px;" >&nbsp;</div>
 
<script type="text/javascript">
 
 
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
//
/////////////////////////////////////////////////////////////////////////////////////
 
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapcanvas");
 
 
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
components: [
new nokia.maps.map.component.panning.Drag(),
new nokia.maps.map.component.panning.Kinetic()
],
'zoomLevel': 8,
'center': [19.119, 72.8957]
});
 
var contextMenu = new nokia.maps.map.component.ContextMenu();
 
/* Add Custom items */
 
//New Group
var myHandler1 = function(contextMenuEvent, group) {
//New Entry
group.addEntry(
"Example Group 1",
function(activationEvent) {
alert("Result of code executed when group entry clicked");
});
}
//New Group
var myHandler2 = function(contextMenuEvent, group) {
//New Entry
group.addEntry(
"Example Group 2",
function(activationEvent) {
alert("Result of code executed when group entry clicked");
});
}
 
contextMenu.addHandler(myHandler1);
contextMenu.addHandler(myHandler2);
map.components.add(contextMenu);
</script>
</body>
</html>

Removing Handlers

Syntax for removing a handler:

contextMenu.removeHandler(existing_handler);

Screenshot

NokiaMapsRightClick.png

For more on Nokia Maps API

Please check out the Nokia Maps API full documentation and API reference here:

You may also access the interactive Nokia Maps API playground,

Tested with

  • Google Chrome 11.0x
  • Mozilla Firefox 5.0b
212 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.

×