"Open in OSM" in context menu

bikehopper · Dec 21, 2024 · 506633b · 506633b
1 parent 82e6f5e
commit 506633b
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/src/components/BikeHopperMap.tsx b/src/components/BikeHopperMap.tsx
@@ -281,6 +281,17 @@ const BikeHopperMap = forwardRef(function BikeHopperMapInternal(
       );
   };
 
+  const handleOpenInOSMClick = (evt: MouseEvent) => {
+    const map = mapRef.current;
+    if (!contextMenuAt || !map) return;
+    const zoom = map.getZoom() + 2; // OSM's zoom numbers are about 2 greater
+    const lng = contextMenuAt[2];
+    const lat = contextMenuAt[3];
+    window.open(
+      `https://www.openstreetmap.org/#map=${zoom}/${lat}/${lng}&layers=P`,
+    );
+  };
+
   const [isDragging, setIsDragging] = useState(false);
   const handleMarkerDragStart = (evt: MarkerDragEvent) => {
     resetLongPressTimer();
@@ -773,6 +784,25 @@ const BikeHopperMap = forwardRef(function BikeHopperMapInternal(
                 />
               </span>
             </DropdownMenu.Item>
+            <DropdownMenu.Separator className="my-1 h-px bg-gray-200 dark:bg-gray-700" />
+            <DropdownMenu.Item
+              key="open-in-osm"
+              className="flex select-none items-center rounded-md px-2 py-2
+                text-sm outline-none
+                text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
+              onClick={handleOpenInOSMClick}
+            >
+              <span className="flex-grow text-gray-700 dark:text-gray-300">
+                <FormattedMessage
+                  defaultMessage="Open in OSM"
+                  description={
+                    'menu item. ' +
+                    'Appears in context menu under a location you have selected on the map. ' +
+                    'Opens OpenStreetMap (abbreviated OSM) to that location.'
+                  }
+                />
+              </span>
+            </DropdownMenu.Item>
           </DropdownMenu.Content>
         </DropdownMenu.Portal>
       </DropdownMenu.Root>