From 1cee9c38ce86a6c80f7baf4a4cb82656b9df29e4 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Tue, 3 Feb 2026 20:27:21 +0000
Subject: [PATCH] Adjut to server changes

---
 frontend/src/App.tsx                          |  1 -
 .../src/components/ExternalSearchLinks.tsx    |  2 +-
 frontend/src/components/Map.tsx               | 62 +++++++------------
 frontend/src/index.html                       |  8 +--
 frontend/src/lib/external-search.ts           | 31 +++-------
 5 files changed, 35 insertions(+), 69 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0d320cd..3157f1e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -776,7 +776,6 @@ export default function App() {
                     return {
                       lat: hex.lat as number,
                       lon: hex.lon as number,
-                      postcode: (hex.postcode as string | undefined) ?? null,
                       resolution,
                     };
                   })()}
diff --git a/frontend/src/components/ExternalSearchLinks.tsx b/frontend/src/components/ExternalSearchLinks.tsx
index 2ae4bd2..f7da92e 100644
--- a/frontend/src/components/ExternalSearchLinks.tsx
+++ b/frontend/src/components/ExternalSearchLinks.tsx
@@ -15,7 +15,7 @@ export default function ExternalSearchLinks({
 }) {
   const urls = useMemo(() => buildPropertySearchUrls(location, filters), [location, filters]);
   const radiusMiles = H3_RADIUS_MILES[location.resolution] ?? 1;
-  const label = location.postcode || `${radiusMiles}mi radius`;
+  const label = `${radiusMiles}mi radius`;
 
   return (
     <div className="p-3 border-b border-warm-200 dark:border-navy-700">
diff --git a/frontend/src/components/Map.tsx b/frontend/src/components/Map.tsx
index 24e7fd2..1ecda34 100644
--- a/frontend/src/components/Map.tsx
+++ b/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>
           )}
         </>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 3db1b79..3e658e7 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -5,13 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Narrowit — Every neighbourhood in England & Wales</title>
     <meta name="description" content="Explore property prices, energy ratings, crime stats, school ratings, and more across England & Wales on one interactive map." />
-    <meta property="og:title" content="Narrowit — Every neighbourhood in England & Wales" />
-    <meta property="og:description" content="Explore property prices, energy ratings, crime stats, school ratings, and more across England & Wales on one interactive map." />
-    <meta property="og:type" content="website" />
-    <meta property="og:image" content="/api/og-image" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Narrowit — Every neighbourhood in England & Wales" />
-    <meta name="twitter:description" content="Explore property prices, energy ratings, crime stats, school ratings, and more across England & Wales on one interactive map." />
+    <meta name="x-og-placeholder" content="__NARROWIT_OG_TAGS__" />
     <script>
       (function() {
         if (localStorage.getItem('theme') === 'dark') {
diff --git a/frontend/src/lib/external-search.ts b/frontend/src/lib/external-search.ts
index 5d14dcf..8d49680 100644
--- a/frontend/src/lib/external-search.ts
+++ b/frontend/src/lib/external-search.ts
@@ -3,7 +3,6 @@ import type { FeatureFilters } from '../types';
 export interface HexagonLocation {
   lat: number;
   lon: number;
-  postcode: string | null;
   resolution: number;
 }
 
@@ -52,7 +51,7 @@ export function buildPropertySearchUrls(
   location: HexagonLocation,
   filters: FeatureFilters
 ): { rightmove: string; onthemarket: string; zoopla: string } {
-  const { lat, lon, postcode, resolution } = location;
+  const { lat, lon, resolution } = location;
   const radiusMiles = H3_RADIUS_MILES[resolution] ?? 1;
   const coordStr = `${lat.toFixed(5)},${lon.toFixed(5)}`;
 
@@ -69,7 +68,7 @@ export function buildPropertySearchUrls(
       : [];
 
   const rmParams = new URLSearchParams();
-  rmParams.set('searchLocation', postcode || coordStr);
+  rmParams.set('searchLocation', coordStr);
   rmParams.set('channel', 'BUY');
   rmParams.set('radius', String(nearestRadius(radiusMiles, RIGHTMOVE_RADII)));
   if (minPrice !== undefined) rmParams.set('minPrice', String(Math.round(minPrice)));
@@ -98,19 +97,13 @@ export function buildPropertySearchUrls(
   otmParams.set('radius', String(nearestRadius(radiusMiles, OTM_RADII)));
   if (minPrice !== undefined) otmParams.set('min-price', String(Math.round(minPrice)));
   if (maxPrice !== undefined) otmParams.set('max-price', String(Math.round(maxPrice)));
-  let onthemarket: string;
-  if (postcode) {
-    const slug = postcode.replace(/\s+/g, '-').toLowerCase();
-    onthemarket = `https://www.onthemarket.com/for-sale/${otmType}/${slug}/?${otmParams.toString()}`;
-  } else {
-    otmParams.set('search-site', 'geo');
-    otmParams.set('geo-lat', String(lat));
-    otmParams.set('geo-lng', String(lon));
-    onthemarket = `https://www.onthemarket.com/for-sale/${otmType}/?${otmParams.toString()}`;
-  }
+  otmParams.set('search-site', 'geo');
+  otmParams.set('geo-lat', String(lat));
+  otmParams.set('geo-lng', String(lon));
+  const onthemarket = `https://www.onthemarket.com/for-sale/${otmType}/?${otmParams.toString()}`;
 
   const zParams = new URLSearchParams();
-  zParams.set('q', postcode || coordStr);
+  zParams.set('q', coordStr);
   zParams.set('search_source', 'for-sale');
   zParams.set('radius', String(nearestRadius(radiusMiles, ZOOPLA_RADII)));
   if (minPrice !== undefined) zParams.set('price_min', String(Math.round(minPrice)));
@@ -123,14 +116,8 @@ export function buildPropertySearchUrls(
       zParams.append('property_sub_type', zt!);
     }
   }
-  let zoopla: string;
-  if (postcode) {
-    const slug = postcode.replace(/\s+/g, '-').toLowerCase();
-    zoopla = `https://www.zoopla.co.uk/for-sale/property/${slug}/?${zParams.toString()}`;
-  } else {
-    zParams.set('geo_autocomplete_identifier', `geo_${lat}_${lon}`);
-    zoopla = `https://www.zoopla.co.uk/for-sale/property/?${zParams.toString()}`;
-  }
+  zParams.set('geo_autocomplete_identifier', `geo_${lat}_${lon}`);
+  const zoopla = `https://www.zoopla.co.uk/for-sale/property/?${zParams.toString()}`;
 
   return { rightmove, onthemarket, zoopla };
 }