Adjut to server changes

frontend/src/components/Map.tsx

@@ -3,7 +3,7 @@ import { Map as MapGL, useControl } from 'react-map-gl/maplibre';
 import type { MapRef } from 'react-map-gl/maplibre';
 import { MapboxOverlay } from '@deck.gl/mapbox';
 import { H3HexagonLayer } from '@deck.gl/geo-layers';
-import { IconLayer, TextLayer } from '@deck.gl/layers';
+import { IconLayer } from '@deck.gl/layers';
 import type { PickingInfo } from '@deck.gl/core';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import type { HexagonData, ViewState, ViewChangeParams, Bounds, POI, FeatureMeta } from '../types';
@@ -20,6 +20,14 @@ import {
 import PostcodeSearch from './PostcodeSearch';
 import MapLegend from './MapLegend';
 
+/** Convert POI id (e.g. "n12345") to OpenStreetMap URL */
+function osmIdToUrl(id: string): string | null {
+  const match = id.match(/^([nwr])(\d+)$/);
+  if (!match) return null;
+  const typeMap: Record<string, string> = { n: 'node', w: 'way', r: 'relation' };
+  return `https://www.openstreetmap.org/${typeMap[match[1]]}/${match[2]}`;
+}
+
 interface MapProps {
   data: HexagonData[];
   pois: POI[];
@@ -175,6 +183,7 @@ export default memo(function Map({
     y: number;
     name: string;
     category: string;
+    id: string;
   } | null>(null);
 
   const handlePoiHover = useCallback((info: PickingInfo<POI>) => {
@@ -184,6 +193,7 @@ export default memo(function Map({
         y: info.y,
         name: info.object.name,
         category: info.object.category,
+        id: info.object.id,
       });
     } else {
       setPopupInfo(null);
@@ -336,41 +346,7 @@ export default memo(function Map({
     [pois, stablePoiHover]
   );
 
-  const postcodeData = useMemo(
-    () => data.filter((d) => d.postcode && d.lat != null && d.lon != null),
-    [data]
-  );
-
-  const showPostcodes = viewState.zoom >= 13;
-  const postcodeLayer = useMemo(
-    () =>
-      showPostcodes
-        ? new TextLayer<HexagonData>({
-            id: 'postcode-labels',
-            data: postcodeData,
-            getPosition: (d) => [d.lon as number, d.lat as number],
-            getText: (d) => d.postcode as string,
-            getSize: 11,
-            getColor: theme === 'dark' ? [220, 220, 220, 220] : [30, 30, 30, 220],
-            getTextAnchor: 'middle',
-            getAlignmentBaseline: 'center',
-            fontFamily: 'Inter, system-ui, sans-serif',
-            fontWeight: 600,
-            outlineWidth: 2,
-            outlineColor: theme === 'dark' ? [30, 30, 30, 200] : [255, 255, 255, 200],
-            billboard: false,
-            sizeUnits: 'pixels',
-            sizeMinPixels: 10,
-            sizeMaxPixels: 14,
-          })
-        : null,
-    [postcodeData, showPostcodes, theme]
-  );
-
-  const layers = useMemo(
-    () => [hexLayer, poiLayer, ...(postcodeLayer ? [postcodeLayer] : [])],
-    [hexLayer, poiLayer, postcodeLayer]
-  );
+  const layers = useMemo(() => [hexLayer, poiLayer], [hexLayer, poiLayer]);
 
   return (
     <div className="flex-1 h-full relative" ref={containerRef}>
@@ -436,7 +412,7 @@ export default memo(function Map({
           )}
           {popupInfo && (
             <div
-              className="absolute pointer-events-none bg-white dark:bg-navy-800 rounded shadow-lg p-2 text-sm dark:text-warm-200"
+              className="absolute bg-white dark:bg-warm-800 rounded shadow-lg p-2 text-sm dark:text-warm-200"
               style={{
                 left: popupInfo.x,
                 top: popupInfo.y - 40,
@@ -445,7 +421,17 @@ export default memo(function Map({
               }}
             >
               <strong>{popupInfo.name}</strong>
-              <div className="text-gray-500 dark:text-warm-400 text-xs">{popupInfo.category}</div>
+              <div className="text-warm-500 dark:text-warm-400 text-xs">{popupInfo.category}</div>
+              {osmIdToUrl(popupInfo.id) && (
+                <a
+                  href={osmIdToUrl(popupInfo.id)!}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300 text-xs"
+                >
+                  View on OSM
+                </a>
+              )}
             </div>
           )}
         </>