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 (
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
= { 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) => {
@@ -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({
- 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 (
@@ -436,7 +412,7 @@ export default memo(function Map({
)}
{popupInfo && (
{popupInfo.name}
-
{popupInfo.category}
+
{popupInfo.category}
+ {osmIdToUrl(popupInfo.id) && (
+
+ View on OSM
+
+ )}
)}
>
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 @@
Narrowit — Every neighbourhood in England & Wales
-
-
-
-
-
-
-
+