From 1656ebf14d3aeb85f00f3b8b6863e7e0c9bbae2c Mon Sep 17 00:00:00 2001
From: Daniele Bacarella Context menu
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. +
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.
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.
Context items can be visually separated from each other by using the H.util.ContextItem.SEPARATOR.
diff --git a/context-menu/demo.js b/context-menu/demo.js
index 31bb07f..b3c2071 100644
--- a/context-menu/demo.js
+++ b/context-menu/demo.js
@@ -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;
- }
+ // 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:
@@ -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
});
From 648f5b0d27f23754a885be84bef5f0013e5c7be2 Mon Sep 17 00:00:00 2001
From: Daniele Bacarella