×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to create a Context Menu

From Nokia Developer Wiki
Jump to: navigation, search
Oskar Bukolt (Talk | contribs)
m (Oskar Bukolt - Update JS Lib + API Link)
Oskar Bukolt (Talk | contribs)
m (Oskar Bukolt - Update JS Lib + API Link + from right click to context menu)
Line 1: Line 1:
 
[[Category:Nokia Maps]][[Category:Code Snippet]][[Category:JavaScript]]
 
[[Category:Nokia Maps]][[Category:Code Snippet]][[Category:JavaScript]]
{{Abstract|This article explains how to enable right click on Nokia maps and add components to it - making the map tiles more interactive.}}
+
{{Abstract|This article explains how to add context menus to Nokia maps and how to customise them.}}
  
{{ArticleNeedsUpdate|timestamp=20120418065030|user=[[User:Jasfox|Jasfox]]| 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.}}
 
  
 
{{ArticleMetaData
 
{{ArticleMetaData
Line 32: Line 31:
 
* [http://api.maps.nokia.com/2.1.1/playground/?example=rightclick Extending Default Behaviour]
 
* [http://api.maps.nokia.com/2.1.1/playground/?example=rightclick Extending Default Behaviour]
 
  }}
 
  }}
 
+
[[File:NokiaMapsRightClick.png|700px]]
 
+
<br />
 +
Context menus are used to display relevant information and options to the user on right-click:
  
 
==Introduction==
 
==Introduction==
 
+
Context menus are useful because they can be customised to display items that are not present by default, and provide the user with added functionality.
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:
 
They are instantiated as follows:
  
Line 51: Line 49:
 
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.
 
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 [http://www.developer.nokia.com/Develop/Maps/Quota/ 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 [https://api.developer.nokia.com/ovi-api Nokia Developer API Registration page].
 
Please read the [http://www.developer.nokia.com/Develop/Maps/Quota/ 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 [https://api.developer.nokia.com/ovi-api Nokia Developer API Registration page].
 +
==Code Commentary==
 +
Context menu divisions are added to the context menu with the following syntax
 +
<code java> var menuItems1 = function(contextMenuEvent, group) {
 +
group.addEntry("Menu Item 1",
 +
function(activationEvent) {alert("Menu Item 1 clicked");});
 +
group.addEntry("Menu Item 2",
 +
function(activationEvent) {alert("Menu Item 2 clicked");});
 +
group.addEntry("Menu Item 3",
 +
function(activationEvent) {alert("Menu Item 3 clicked");});
 +
contextMenu.addHandler(menuItems1);
 +
</code>
 +
The {{Icode|addHandler()}} function takes as a parameter a function which by default creates a new context menu division, in this case adding three new items to the new division.
  
 +
<code java> contextMenu.removeHandler(handler); </code>
 +
The {{Icode|removeHandler()}} method removes a whole context menu division and all items within it.
 
==Implementation==
 
==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. <br />
+
 
<br />
+
 
The following statement is important:
 
The following statement is important:
 
<code java>map.components.add(contextMenu);</code>
 
<code java>map.components.add(contextMenu);</code>
Line 72: Line 83:
 
</head>
 
</head>
 
<body>
 
<body>
 +
<form>
 +
Click  to add/remove  a group of menu items from the context menu. <br />
 +
<input type = "button" id ="addRemove" value = "Add Menu Items" onclick = "addRemoveGroup(extraMenuItems)"/>
 +
 +
</form>
 
<div id="mapcanvas"  style="width:1200px; height:800px;" >&nbsp;</div>
 
<div id="mapcanvas"  style="width:1200px; height:800px;" >&nbsp;</div>
 
  <script type="text/javascript">
 
  
 +
 +
 +
  <script type="text/javascript">
 +
/*<![CDATA[*/
  
 
/////////////////////////////////////////////////////////////////////////////////////
 
/////////////////////////////////////////////////////////////////////////////////////
Line 98: Line 116:
 
new nokia.maps.map.component.panning.Kinetic()
 
new nokia.maps.map.component.panning.Kinetic()
 
],
 
],
'zoomLevel': 8,
+
'zoomLevel': 13,
  'center': [19.119, 72.8957]
+
  'center': [18.975, 72.825833]
 
});
 
});
 
 
 
var contextMenu = new nokia.maps.map.component.ContextMenu();
 
var contextMenu = new nokia.maps.map.component.ContextMenu();
 
 
                /* Add Custom items */
+
/* Add Custom Context Menu Items */
 
 
//New Group
+
//This adds three items with a menu separator
var myHandler1 = function(contextMenuEvent, group) {
+
var menuItems1 = function(contextMenuEvent, group) {
//New Entry
+
group.addEntry("Menu Item 1",
                                        group.addEntry(
+
function(activationEvent) {alert("Menu Item 1 clicked");});
"Example Group 1",
+
group.addEntry("Menu Item 2",
function(activationEvent) {
+
function(activationEvent) {alert("Menu Item 2 clicked");});
alert("Result of code executed when group entry clicked");
+
group.addEntry("Menu Item 3",
});
+
function(activationEvent) {alert("Menu Item 3 clicked");});
                }
+
    }
//New Group
+
//This adds one item with a menu separator
var myHandler2 = function(contextMenuEvent, group) {
+
var menuItems2 = function(contextMenuEvent, group) {
//New Entry
+
group.addEntry("Menu Item 4",
                                        group.addEntry(
+
function(activationEvent) {alert("Menu Item 4 clicked");});
"Example Group 2",
+
    }
function(activationEvent) {
+
//Two extra items added with a menu separator when the Add/Remove
alert("Result of code executed when group entry clicked");
+
var extraMenuItems = function(contextMenuEvent,group){
});
+
group.addEntry("Menu Item 5",
                }
+
function(activationEvent) {alert("Menu Item 5 clicked");});
 +
  group.addEntry("Menu Item 6",
 +
function(activationEvent) {alert("Menu Item 6 clicked");});
 +
}
  
contextMenu.addHandler(myHandler1);
+
contextMenu.addHandler(menuItems1);
contextMenu.addHandler(myHandler2);
+
contextMenu.addHandler(menuItems2);
map.components.add(contextMenu);
+
map.components.add(contextMenu);
 +
 +
var isAdded = false;   
 +
 +
 +
// Simple function to add/remove a group of menu items...
 +
function addRemoveGroup(handler){
 +
if (isAdded == false){
 +
contextMenu.addHandler(handler);
 +
document.getElementById("addRemove").value ="Remove Menu Items";
 +
isAdded = true;
 +
} else {
 +
contextMenu.removeHandler(handler);
 +
document.getElementById("addRemove").value ="Add Menu Items";
 +
isAdded = false;
 +
}
 +
}
 +
/*]]>*/
 
</script>
 
</script>
 
     </body>
 
     </body>
 
</html>
 
</html>
 
</code>
 
</code>
== Removing Handlers ==
+
 
Syntax for removing a handler:
+
 
<code java>contextMenu.removeHandler(existing_handler);</code>
+
 
== Screenshot ==
+
[[File:NokiaMapsRightClick.png|700px]]
+
  
 
==For more on Nokia Maps API==
 
==For more on Nokia Maps API==
  
 
Please check out the Nokia Maps API full documentation and API reference here:
 
Please check out the Nokia Maps API full documentation and API reference here:
* http://api.maps.nokia.com/
+
* http://api.maps.nokia.com/en/maps/intro.html
  
 
You may also access the interactive Nokia Maps API playground,
 
You may also access the interactive Nokia Maps API playground,

Revision as of 15:58, 13 July 2012

This article explains how to add context menus to Nokia maps and how to customise them.


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 (13 Jul 2012)

NokiaMapsRightClick.png
Context menus are used to display relevant information and options to the user on right-click:

Contents

Introduction

Context menus are useful because they can be customised to display items that are not present by default, and provide the user with added functionality. 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.

Code Commentary

Context menu divisions are added to the context menu with the following syntax

 var menuItems1 = function(contextMenuEvent, group) {
group.addEntry("Menu Item 1",
function(activationEvent) {alert("Menu Item 1 clicked");});
group.addEntry("Menu Item 2",
function(activationEvent) {alert("Menu Item 2 clicked");});
group.addEntry("Menu Item 3",
function(activationEvent) {alert("Menu Item 3 clicked");});
contextMenu.addHandler(menuItems1);

The addHandler() function takes as a parameter a function which by default creates a new context menu division, in this case adding three new items to the new division.

 contextMenu.removeHandler(handler);

The removeHandler() method removes a whole context menu division and all items within it.

Implementation

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>
<form>
Click to add/remove a group of menu items from the context menu. <br />
<input type = "button" id ="addRemove" value = "Add Menu Items" onclick = "addRemoveGroup(extraMenuItems)"/>
 
</form>
<div id="mapcanvas" style="width:1200px; height:800px;" >&nbsp;</div>
 
 
 
<script type="text/javascript">
/*<![CDATA[*/
 
/////////////////////////////////////////////////////////////////////////////////////
// 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': 13,
'center': [18.975, 72.825833]
});
 
var contextMenu = new nokia.maps.map.component.ContextMenu();
 
/* Add Custom Context Menu Items */
 
//This adds three items with a menu separator
var menuItems1 = function(contextMenuEvent, group) {
group.addEntry("Menu Item 1",
function(activationEvent) {alert("Menu Item 1 clicked");});
group.addEntry("Menu Item 2",
function(activationEvent) {alert("Menu Item 2 clicked");});
group.addEntry("Menu Item 3",
function(activationEvent) {alert("Menu Item 3 clicked");});
}
//This adds one item with a menu separator
var menuItems2 = function(contextMenuEvent, group) {
group.addEntry("Menu Item 4",
function(activationEvent) {alert("Menu Item 4 clicked");});
}
//Two extra items added with a menu separator when the Add/Remove
var extraMenuItems = function(contextMenuEvent,group){
group.addEntry("Menu Item 5",
function(activationEvent) {alert("Menu Item 5 clicked");});
group.addEntry("Menu Item 6",
function(activationEvent) {alert("Menu Item 6 clicked");});
}
 
contextMenu.addHandler(menuItems1);
contextMenu.addHandler(menuItems2);
map.components.add(contextMenu);
 
var isAdded = false;
 
 
// Simple function to add/remove a group of menu items...
function addRemoveGroup(handler){
if (isAdded == false){
contextMenu.addHandler(handler);
document.getElementById("addRemove").value ="Remove Menu Items";
isAdded = true;
} else {
contextMenu.removeHandler(handler);
document.getElementById("addRemove").value ="Add Menu Items";
isAdded = false;
}
}
/*]]>*/
</script>
</body>
</html>



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
510 page views in the last 30 days.
×