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;