Cant load context Menu in Here map 3.0 . Retuns "nokia is not defined " - contextmenu

Question

When I try to load context menu in here map, it shows error in firebug as "ReferenceError: nokia is not defined"
What's it that I'm doing wrong.
Imported js files:
The code that creates the bug is:
createContextMenu(map);
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"); });
};
contextMenu.addHandler(menuItems1);
map.components.add(contextMenu);
}
Currently working on jquery 1.9.1
and
Firefox 48

Answer 1

HERE Javascript API have moved to the namspace "H" with version 3.X onward hence "nokia." would not work any more. With respect to context menu functionality, it can achieved by adding an event listener on the map
Example: https://developer.here.com/documentation/examples/maps-js/events/context-menu
/**
* Adds context menus for the map and the created objects.
* Context menu items can be different depending on the target.
* That is why in this context menu on the map shows default items as well as
* the "Add circle", whereas context menu on the circle itself shows the "Remove circle".
*
* #param {H.Map} map Reference to initialized map object
*/
function addContextMenus(map) {
// First we need to subscribe to the "contextmenu" event on the map
map.addEventListener('contextmenu', function (e) {
// As we already handle contextmenu event callback on circle object,
// we don't do anything if target is different than the map.
if (e.target !== map) {
return;
}
// "contextmenu" event might be triggered not only by a pointer,
// but a keyboard button as well. That's why ContextMenuEvent
// doesn't have a "currentPointer" property.
// Instead it has "viewportX" and "viewportY" properties
// for the associates position.
// Get geo coordinates from the screen coordinates.
var coord = map.screenToGeo(e.viewportX, e.viewportY);
// In order to add menu items, you have to push them to the "items"
// property of the event object. That has to be done synchronously, otherwise
// the ui component will not contain them. However you can change the menu entry
// text asynchronously.
e.items.push(
// Create a menu item, that has only a label,
// which displays the current coordinates.
new H.util.ContextItem({
label: [
Math.abs(coord.lat.toFixed(4)) + ((coord.lat > 0) ? 'N' : 'S'),
Math.abs(coord.lng.toFixed(4)) + ((coord.lng > 0) ? 'E' : 'W')
].join(' ')
}),
// Create an item, that will change the map center when clicking on it.
new H.util.ContextItem({
label: 'Center map here',
callback: function() {
map.setCenter(coord, true);
}
}),
// It is possible to add a seperator between items in order to logically group them.
H.util.ContextItem.SEPARATOR,
// This menu item will add a new circle to the map
new H.util.ContextItem({
label: 'Add circle',
callback: addCircle.bind(map, coord)
})
);
});
}