Add right-click menu

main.js

@@ -1,9 +1,11 @@
 import './style.css';
 import {Map, View} from 'ol';
-import {fromLonLat, get} from 'ol/proj.js';
+import {fromLonLat, get, transform} from 'ol/proj.js';
 import {defaults as defaultControls} from 'ol/control.js';
 import Overlay from 'ol/Overlay.js';
 
+import ContextMenu from 'ol-contextmenu';
+
 import ToggleMenuControl from './ui/controls.js';
 
 import layerCategories from './layers/index.js';
@@ -27,8 +29,36 @@ closer.onclick = function () {
   return false;
 };
 
+const contextMenu = new ContextMenu({
+  width: 170,
+  defaultItems: false,
+  items: [
+      {
+          text: 'Open on OSM',
+          callback: obj => {
+            const coords = transform(obj.coordinate, 'EPSG:3857', 'EPSG:4326')
+            window.open(
+              `https://www.openstreetmap.org/#map=${map.getView().getZoom()}/${coords[1]}/${coords[0]}`,
+              "_blank",
+            );
+          },
+      },
+      {
+          text: 'Copy lat/long',
+          callback: async function(obj){
+            const coords = transform(obj.coordinate, 'EPSG:3857', 'EPSG:4326')
+            try {
+              await navigator.clipboard.writeText(`${coords[1]}, ${coords[0]}`);
+            } catch (error) {
+              console.error(error.message);
+            }
+          },
+      },
+  ],
+});
+
 const map = new Map({
-  controls: defaultControls().extend([new ToggleMenuControl()]),
+  controls: defaultControls().extend([new ToggleMenuControl(), contextMenu]),
   target: 'map',
   layers: [],
   overlays: [popupOverlay],

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "hls.js": "^1.5.2",
         "ol": "latest",
+        "ol-contextmenu": "^5.3.0",
         "proj4": "2.9.0"
       },
       "devDependencies": {
@@ -543,6 +544,21 @@
         "url": "https://opencollective.com/openlayers"
       }
     },
+    "node_modules/ol-contextmenu": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/ol-contextmenu/-/ol-contextmenu-5.3.0.tgz",
+      "integrity": "sha512-AO9rGKaQpLAzqpEva7mukhkWrGkL/o1s8tXPsYuYBGMoiTBbXffgTikXjTmq1m7l3gDwXWWWi6R2ROda5lgXNw==",
+      "dependencies": {
+        "tiny-emitter": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=16",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "ol": "> 7.x <= 8.x"
+      }
+    },
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -670,6 +686,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "node_modules/vite": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "hls.js": "^1.5.2",
     "ol": "latest",
+    "ol-contextmenu": "^5.3.0",
     "proj4": "2.9.0"
   }
 }

style.css

@@ -1,4 +1,5 @@
-@import "node_modules/ol/ol.css";
+@import 'ol/ol.css';
+@import 'ol-contextmenu/ol-contextmenu.css';
 
 html, body {
   margin: 0;