HERE Maps API - How to create a Context Menu
This article explains how to enable right click on Nokia maps and add components to it - making the map tiles more interactive.
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
Article
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;" > </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
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
