Skip to content

Fixed Context menu example to work with all engines #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 30, 2025
Merged

Fixed Context menu example to work with all engines #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1656ebf
Fixed Context menu example to work with all engines
dbacarel May 30, 2025
648f5b0
minor
dbacarel May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions context-menu/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<title>Context menu</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../template.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script>
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
Expand All @@ -25,7 +25,7 @@ <h1>Context menu</h1>
</p>
<div id="map"></div>
<h3>Code</h3>
<p>In order to add context menu items, first you need to subscribe to contextmenu event. ContextMenuEvent has a special items property, where menu items are stored. Each menu item is an instance of H.util.ContextItem class.
<p>In order to add context menu items, first you need to subscribe to contextmenu event. ContextMenuEvent has a special items property, where menu items are stored. Each menu item is an instance of H.util.ContextItem class.
</p>
<p>By default new menu items does not replace the previous ones, instead all items are collected and displayed together. However you can easily modify the items array to change this behaviour. </p>
<p>Context items can be visually separated from each other by using the H.util.ContextItem.SEPARATOR.
Expand Down
124 changes: 52 additions & 72 deletions context-menu/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,83 +9,63 @@
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;
}
// Create and push the proper context items according to the event target
if (e.target instanceof H.map.Circle) {
// Add a single item to the context menu displaying "Remove circle"
e.items.push(
new H.util.ContextItem({
label: 'Remove circle',
callback: function () {
map.removeObject(e.target);
}
})
);
} else {
// "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.

// "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);

// 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: function () {
// Create and add the circle to the map
map.addObject(new H.map.Circle(coord, 5000));
}
})
);
}

// 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)
})
);
});
}

/**
* Adds a circle which has a context menu item to remove itself.
*
* @this H.Map
* @param {H.geo.Point} coord Circle center coordinates
*/
function addCircle(coord) {
// Create a new circle object
var circle = new H.map.Circle(coord, 5000),
map = this;

// Subscribe to the "contextmenu" eventas we did for the map.
circle.addEventListener('contextmenu', function(e) {
// Add another menu item,
// that will be visible only when clicking on this object.
//
// New item doesn't replace items, which are added by the map.
// So we may want to add a separator to between them.
e.items.push(
new H.util.ContextItem({
label: 'Remove',
callback: function() {
map.removeObject(circle);
}
})
);
});

// Make the circle visible, by adding it to the map
map.addObject(circle);
}

/**
* Boilerplate map initialization code starts below:
Expand All @@ -99,7 +79,7 @@ var defaultLayers = platform.createDefaultLayers();

// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
center: {lat: 52.55006203880433, lng: 13.27548854220585},
center: { lat: 52.55006203880433, lng: 13.27548854220585 },
zoom: 9,
pixelRatio: window.devicePixelRatio || 1
});
Expand Down