Add edit in JOSM/iD buttons to right-click menu

main.js

@@ -1,8 +1,9 @@
 import './style.css';
 import {Map, View} from 'ol';
-import {fromLonLat, get, transform} from 'ol/proj.js';
+import {fromLonLat, get, getTransform, toLonLat, transform} from 'ol/proj.js';
 import {defaults as defaultControls} from 'ol/control.js';
 import Overlay from 'ol/Overlay.js';
+import { applyTransform } from 'ol/extent.js';
 
 import ContextMenu from 'ol-contextmenu';
 
@@ -48,6 +49,30 @@ const contextMenu = new ContextMenu({
             }
           },
       },
+      {
+        text: 'Edit with iD',
+        callback: function(obj) {
+          const coords = toLonLat(obj.coordinate);
+          window.location.href = `https://www.openstreetmap.org/edit?editor=id#map=${map.getView().getZoom()}/${coords[1]}/${coords[0]}`;
+        },
+      },
+      {
+        text: 'Edit with JOSM',
+        callback: function(obj) {
+          const [minx, miny, maxx, maxy] = applyTransform(map.getView().calculateExtent(), getTransform('EPSG:3857', 'EPSG:4326'));
+
+          const url = `http://127.0.0.1:8111/load_and_zoom?left=${minx}&top=${maxy}&right=${maxx}&bottom=${miny}`;
+          // inspiration from
+          // https://github.com/openstreetmap/openstreetmap-website/blob/27f1fbcb580db21ca1276b9f2c40a6e1571cd90b/app/assets/javascripts/index.js#L257
+
+          const iframe = document.createElement('iframe');
+          iframe.setAttribute('src', url);
+          iframe.style.display = 'none';
+          console.log(iframe);
+          iframe.addEventListener('load', iframe.remove);
+          document.body.append(iframe);
+        },
+      }
   ],
 });