From 1656ebf14d3aeb85f00f3b8b6863e7e0c9bbae2c Mon Sep 17 00:00:00 2001 From: Daniele Bacarella Date: Fri, 30 May 2025 12:40:40 +0200 Subject: [PATCH 1/2] Fixed Context menu example to work with all engines --- context-menu/demo.html | 6 +- context-menu/demo.js | 124 +++++++++++++++++------------------------ 2 files changed, 55 insertions(+), 75 deletions(-) diff --git a/context-menu/demo.html b/context-menu/demo.html index 972d6cc..ea2c1e9 100644 --- a/context-menu/demo.html +++ b/context-menu/demo.html @@ -3,14 +3,14 @@ - + Context menu - + @@ -25,7 +25,7 @@

Context menu

Code

-

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 Date: Fri, 30 May 2025 12:43:55 +0200 Subject: [PATCH 2/2] minor Signed-off-by: Daniele Bacarella --- context-menu/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/context-menu/demo.js b/context-menu/demo.js index b3c2071..2d3ad2c 100644 --- a/context-menu/demo.js +++ b/context-menu/demo.js @@ -9,7 +9,7 @@ function addContextMenus(map) { // First we need to subscribe to the "contextmenu" event on the map map.addEventListener('contextmenu', function (e) { - // Push the proper context items according to the event target + // 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(