layers/index.js

@@ -1,6 +1,6 @@
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
-import StadiaMaps from 'ol/source/StadiaMaps.js';
+import Stamen from 'ol/source/Stamen.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 StadiaMaps({
+                    source: new Stamen({
-                        layer: 'stamen_watercolor',
+                        layer: 'watercolor',
                     }),
                 }),
             },
             {
                 name: "Stamen Toner (Raster)",
                 layer: new TileLayer({
-                    source: new StadiaMaps({
+                    source: new Stamen({
-                        layer: 'stamen_toner',
+                        layer: 'toner',
                     }),
                 }),
             },

main.js

@@ -1,11 +1,9 @@
 import './style.css';
 import {Map, View} from 'ol';
-import {fromLonLat, get, transform} from 'ol/proj.js';
+import {fromLonLat, get} 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';
@@ -29,36 +27,8 @@ 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(), contextMenu]),
+  controls: defaultControls().extend([new ToggleMenuControl()]),
   target: 'map',
   layers: [],
   overlays: [popupOverlay],

package.json

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

style.css

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