×
Namespaces

Variants
Actions
Revision as of 13:28, 28 November 2013 by jasfox (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

HERE Maps API - How to create a Context Menu

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to add context menus to HERE Maps and how to customise them.


Article Metadata
Code Example
Source file: context-menu.html
Compatibility
Platform(s): Web browser
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, component, Context Menu, Right Click, JavaScript
Created: Maveric (21 Jun 2011)
Updated: avnee.nathani (31 Dec 2011)
Last edited: jasfox (28 Nov 2013)

70%
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

HERE 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 Terms and Conditions and check the Pricing Plans 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 for free following the instructions here

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.

Example code

The example displays a context menu when the map is right clicked, Further alerts() are displayed when the menu items are clicked. Remember to add in your own AppId and Token.

function createContextMenu(map){
contextMenu = new nokia.maps.map.component.ContextMenu();
 
/* Add Custom Context Menu Items */
 
//This adds three items with a menu separator
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
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 Add/Remove button clicked
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);
}
function addRemoveGroup(handler){
if (isAdded == false){
contextMenu.addHandler(handler);
$('#addRemove').prop('value','Remove Menu Items');
isAdded = true;
} else {
contextMenu.removeHandler(handler);
$('#addRemove').prop('value','Add Menu Items');
isAdded = false;
}
}

A working example can be found at:

http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/context-menu.html


For more on the HERE Maps API

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

You may also access the interactive API explorer

Tested with

  • Google Chrome 11.0x
  • Mozilla Firefox 5.0b
This page was last modified on 28 November 2013, at 13:28.
349 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.

×