From 2242863fddbaaa40040b7cfc48d76ba1d19da885 Mon Sep 17 00:00:00 2001
From: Chandler Swift <chandler@chandlerswift.com>
Date: Fri, 2 Feb 2024 03:14:58 -0600
Subject: [PATCH] Add right-click menu

---
 main.js           | 34 ++++++++++++++++++++++++++++++++--
 package-lock.json | 21 +++++++++++++++++++++
 package.json      |  1 +
 style.css         |  3 ++-
 4 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/main.js b/main.js
index f1ecc9f..cba5c02 100644
--- a/main.js
+++ b/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],
diff --git a/package-lock.json b/package-lock.json
index e65d740..90fd008 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 1933f6b..e82e108 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "hls.js": "^1.5.2",
     "ol": "latest",
+    "ol-contextmenu": "^5.3.0",
     "proj4": "2.9.0"
   }
 }
diff --git a/style.css b/style.css
index 3973b8b..a0ddfed 100644
--- a/style.css
+++ b/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;