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],