×
Namespaces

Variants
Actions
Revision as of 18:57, 12 July 2012 by Oskar Bukolt (Talk | contribs)

HERE Maps API - How to create a Context Menu

From Nokia Developer Wiki
Jump to: navigation, search

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