Add right-click menu

layers/index.js

@@ -1,6 +1,6 @@
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
-import Stamen from 'ol/source/Stamen.js';
+import StadiaMaps from 'ol/source/StadiaMaps.js';
 
 import chandlerLayer from './chandler/layer.js';
 import amtrakLayer from './amtrak/layer.js';
@@ -42,16 +42,16 @@ const layerCategories = [
             {
                 name: "Stamen Watercolor (Raster)",
                 layer: new TileLayer({
-                    source: new Stamen({
+                    source: new StadiaMaps({
-                        layer: 'watercolor',
+                        layer: 'stamen_watercolor',
                     }),
                 }),
             },
             {
                 name: "Stamen Toner (Raster)",
                 layer: new TileLayer({
-                    source: new Stamen({
+                    source: new StadiaMaps({
-                        layer: 'toner',
+                        layer: 'stamen_toner',
                     }),
                 }),
             },

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.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;