- {!addFilterCollapsed && (
-
-
{
- if (name === SCHOOL_FILTER_NAME) {
- if (defaultSchoolFeatureName) onTogglePin(defaultSchoolFeatureName);
- return;
- }
- if (name === SPECIFIC_CRIMES_FILTER_NAME) {
- if (defaultSpecificCrimeFeatureName) onTogglePin(defaultSpecificCrimeFeatureName);
- return;
- }
- onTogglePin(name);
- }}
- onNavigateToSource={onNavigateToSource}
- openInfoFeature={openInfoFeature}
- onClearOpenInfoFeature={onClearOpenInfoFeature}
- travelTimeEntries={travelTimeEntries}
- onAddTravelTimeEntry={handleAddTravelTimeAndScroll}
- />
- {!isLicensed && (
-
-
- {t('filters.upgradePrompt')}
-
-
- {t('filters.oneTimeLifetime')}
-
-
- {t('filters.upgradeToFullMap')}
-
-
-
-
+
+ {!addFilterCollapsed && (
+
{
+ if (name === SCHOOL_FILTER_NAME) {
+ if (defaultSchoolFeatureName) onTogglePin(defaultSchoolFeatureName);
+ return;
+ }
+ if (name === SPECIFIC_CRIMES_FILTER_NAME) {
+ if (defaultSpecificCrimeFeatureName)
+ onTogglePin(defaultSpecificCrimeFeatureName);
+ return;
+ }
+ if (name === ETHNICITIES_FILTER_NAME) {
+ if (defaultEthnicityFeatureName) onTogglePin(defaultEthnicityFeatureName);
+ return;
+ }
+ if (POI_FILTER_NAMES.includes(name as PoiFilterName)) {
+ const defaultPoiFeatureName =
+ defaultPoiFilterFeatureNames[name as PoiFilterName];
+ if (defaultPoiFeatureName) onTogglePin(defaultPoiFeatureName);
+ return;
+ }
+ onTogglePin(name);
+ }}
+ onNavigateToSource={onNavigateToSource}
+ openInfoFeature={openInfoFeature}
+ onClearOpenInfoFeature={onClearOpenInfoFeature}
+ travelTimeEntries={travelTimeEntries}
+ onAddTravelTimeEntry={handleAddTravelTimeAndScroll}
+ />
+ )}
+ {!isLicensed && (
+
+
+ {t('filters.upgradePrompt')}
+
+
+ {t('filters.oneTimeLifetime')}
+
+
+ {t('filters.upgradeToFullMap')}
+
+
+
+
diff --git a/frontend/src/components/map/HoverCard.tsx b/frontend/src/components/map/HoverCard.tsx
index 241b940..8fc042a 100644
--- a/frontend/src/components/map/HoverCard.tsx
+++ b/frontend/src/components/map/HoverCard.tsx
@@ -5,6 +5,8 @@ import { formatValue } from '../../lib/format';
import { ts } from '../../i18n/server';
import { SCHOOL_FILTER_NAME, getSchoolBackendFeatureName } from '../../lib/school-filter';
import { getSpecificCrimeFeatureName } from '../../lib/crime-filter';
+import { getEthnicityFeatureName } from '../../lib/ethnicity-filter';
+import { POI_DISTANCE_FILTER_NAME, getPoiDistanceFeatureName } from '../../lib/poi-distance-filter';
interface HoverCardData {
count: number;
@@ -45,7 +47,14 @@ export default memo(function HoverCard({
for (const name of activeFilterNames.slice(0, 4)) {
const schoolBackendName = getSchoolBackendFeatureName(name);
const specificCrimeFeatureName = getSpecificCrimeFeatureName(name);
- const backendName = schoolBackendName ?? specificCrimeFeatureName ?? name;
+ const ethnicityFeatureName = getEthnicityFeatureName(name);
+ const poiDistanceFeatureName = getPoiDistanceFeatureName(name);
+ const backendName =
+ schoolBackendName ??
+ specificCrimeFeatureName ??
+ ethnicityFeatureName ??
+ poiDistanceFeatureName ??
+ name;
const val = data[`avg_${backendName}`] ?? data[`min_${backendName}`];
if (val == null || typeof val !== 'number') continue;
const meta = featureMap.get(backendName);
@@ -54,7 +63,11 @@ export default memo(function HoverCard({
if (label) results.push({ name: backendName, value: ts(label) });
} else {
results.push({
- name: schoolBackendName ? SCHOOL_FILTER_NAME : backendName,
+ name: schoolBackendName
+ ? SCHOOL_FILTER_NAME
+ : poiDistanceFeatureName
+ ? POI_DISTANCE_FILTER_NAME
+ : backendName,
value: formatValue(val, meta),
});
}
diff --git a/frontend/src/components/map/Map.tsx b/frontend/src/components/map/Map.tsx
index 87964e6..a0eea7f 100644
--- a/frontend/src/components/map/Map.tsx
+++ b/frontend/src/components/map/Map.tsx
@@ -1,6 +1,8 @@
import { useCallback, useRef, useEffect, useState, useMemo, memo } from 'react';
+import type { CSSProperties } from 'react';
import { useTranslation } from 'react-i18next';
import { Map as MapGL, useControl, ScaleControl } from 'react-map-gl/maplibre';
+import type { MapRef } from 'react-map-gl/maplibre';
import { MapboxOverlay } from '@deck.gl/mapbox';
import 'maplibre-gl/dist/maplibre-gl.css';
import type {
@@ -18,17 +20,12 @@ import type {
import {
zoomToResolution,
getBoundsFromViewState,
+ getBoundsWithBottomScreenInset,
getMapStyle,
getPoiIconUrl,
getMapCenterForTargetScreenPoint,
} from '../../lib/map-utils';
-import {
- INITIAL_VIEW_STATE,
- MAP_MIN_ZOOM,
- MAP_BOUNDS,
- POI_GROUP_COLORS,
- POI_DEFAULT_COLOR,
-} from '../../lib/consts';
+import { MAP_MIN_ZOOM, MAP_BOUNDS, POI_GROUP_COLORS } from '../../lib/consts';
import LocationSearch, { type SearchedLocation } from './LocationSearch';
import MapLegend from './MapLegend';
import HoverCard from './HoverCard';
@@ -57,7 +54,7 @@ interface MapProps {
hoveredHexagonId: string | null;
onHexagonClick: (id: string, isPostcode?: boolean, geometry?: PostcodeGeometry) => void;
onHexagonHover: (h3: string | null, x?: number, y?: number) => void;
- initialViewState?: ViewState;
+ initialViewState: ViewState;
flyToRef?: React.MutableRefObject<
((lat: number, lng: number, zoom: number, options?: MapFlyToOptions) => void) | null
>;
@@ -75,6 +72,7 @@ interface MapProps {
travelTimeEntries?: TravelTimeEntry[];
densityLabel?: string;
totalCount?: number;
+ bottomScreenInset?: number;
}
const EMPTY_TRAVEL_ENTRIES: TravelTimeEntry[] = [];
@@ -84,6 +82,10 @@ interface Dimensions {
height: number;
}
+type MapContainerStyle = CSSProperties & {
+ '--map-mobile-bottom-inset'?: string;
+};
+
function resolveInset(
pixelValue: number | undefined,
ratioValue: number | undefined,
@@ -185,6 +187,27 @@ class SafeMapboxOverlay extends MapboxOverlay {
}
}
+function getPoiGroupColor(group: string): [number, number, number] {
+ const color = POI_GROUP_COLORS[group];
+ if (!color) {
+ throw new Error(`Missing POI group color for '${group}'`);
+ }
+ return color;
+}
+
+function getRenderedViewState(map: MapRef | null): ViewState | null {
+ if (!map) return null;
+
+ const center = map.getCenter();
+ return {
+ longitude: center.lng,
+ latitude: center.lat,
+ zoom: map.getZoom(),
+ pitch: map.getPitch(),
+ bearing: map.getBearing(),
+ };
+}
+
function DeckOverlay({
layers,
getTooltip,
@@ -240,18 +263,18 @@ export default memo(function Map({
travelTimeEntries = EMPTY_TRAVEL_ENTRIES,
densityLabel: densityLabelProp,
totalCount: totalCountProp,
+ bottomScreenInset = 0,
}: MapProps) {
const containerRef = useRef
(null);
+ const mapRef = useRef(null);
const { t } = useTranslation();
const modes = useTranslatedModes();
const densityLabel = densityLabelProp ?? t('mapLegend.numberOfProperties');
- const [internalViewState, setInternalViewState] = useState(
- initialViewState || INITIAL_VIEW_STATE
- );
+ const [internalViewState, setInternalViewState] = useState(initialViewState);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
// In screenshot mode, use the prop directly for instant updates (no async lag)
- const viewState = screenshotMode && initialViewState ? initialViewState : internalViewState;
+ const viewState = screenshotMode ? initialViewState : internalViewState;
useEffect(() => {
const container = containerRef.current;
@@ -282,17 +305,33 @@ export default memo(function Map({
useEffect(() => {
if (dimensions.width === 0 || dimensions.height === 0) return;
- const bounds = getBoundsFromViewState(viewState, dimensions.width, dimensions.height);
- const resolution = zoomToResolution(viewState.zoom);
+ let frame = 0;
+ const emit = () => {
+ const renderedViewState = getRenderedViewState(mapRef.current);
+ // mapRef can be null on the very first effect run if MapLibre hasn't
+ // finished mounting; retry next frame so the initial bounds always reach
+ // the data hook.
+ if (!renderedViewState) {
+ frame = window.requestAnimationFrame(emit);
+ return;
+ }
+ // The bottom sheet can reveal covered map area without a pan/zoom event.
+ const dataBoundsHeight = dimensions.height + Math.max(0, bottomScreenInset);
+ const bounds = getBoundsFromViewState(renderedViewState, dimensions.width, dataBoundsHeight);
+ const resolution = zoomToResolution(renderedViewState.zoom);
- onViewChange({
- resolution,
- bounds,
- zoom: viewState.zoom,
- latitude: viewState.latitude,
- longitude: viewState.longitude,
- });
- }, [viewState, dimensions, onViewChange]);
+ onViewChange({
+ resolution,
+ bounds,
+ zoom: renderedViewState.zoom,
+ latitude: renderedViewState.latitude,
+ longitude: renderedViewState.longitude,
+ });
+ };
+ frame = window.requestAnimationFrame(emit);
+
+ return () => window.cancelAnimationFrame(frame);
+ }, [viewState, dimensions, bottomScreenInset, onViewChange]);
const handleMove = useCallback((evt: { viewState: ViewState }) => {
setInternalViewState((prev) => {
@@ -342,6 +381,14 @@ export default memo(function Map({
if (flyToRef) flyToRef.current = handleFlyTo;
const mapStyle = useMemo(() => getMapStyle(theme), [theme]);
+ const maxBounds = useMemo(
+ () => getBoundsWithBottomScreenInset(MAP_BOUNDS, MAP_MIN_ZOOM, bottomScreenInset),
+ [bottomScreenInset]
+ );
+ const mapContainerStyle = useMemo(
+ () => (bottomScreenInset > 0 ? { '--map-mobile-bottom-inset': `${bottomScreenInset}px` } : {}),
+ [bottomScreenInset]
+ );
const {
layers,
@@ -374,8 +421,14 @@ export default memo(function Map({
});
return (
-
+
0 ? 'map-has-mobile-bottom-sheet' : ''}`}
+ ref={containerRef}
+ style={mapContainerStyle}
+ onMouseLeave={handleMouseLeave}
+ >
{rangeMin}
@@ -213,7 +231,7 @@ export default function MapLegend({
)}
{isEnum ? (
-
diff --git a/frontend/src/components/map/MapPage.tsx b/frontend/src/components/map/MapPage.tsx
index 500a025..497e1f2 100644
--- a/frontend/src/components/map/MapPage.tsx
+++ b/frontend/src/components/map/MapPage.tsx
@@ -38,10 +38,15 @@ import { canWheelScrollInsideTarget } from '../../lib/dom-scroll';
import { INITIAL_VIEW_STATE } from '../../lib/consts';
import { getSchoolBackendFeatureName } from '../../lib/school-filter';
import { getSpecificCrimeFeatureName } from '../../lib/crime-filter';
+import { getEthnicityFeatureName } from '../../lib/ethnicity-filter';
+import { getPoiDistanceFeatureName } from '../../lib/poi-distance-filter';
import { useLicense } from '../../hooks/useLicense';
import { SpinnerIcon } from '../ui/icons/SpinnerIcon';
import { MapPinIcon } from '../ui/icons/MapPinIcon';
import { BookmarkIcon } from '../ui/icons/BookmarkIcon';
+import { CheckIcon } from '../ui/icons/CheckIcon';
+import { CloseIcon } from '../ui/icons/CloseIcon';
+import { InfoIcon } from '../ui/icons/InfoIcon';
const Map = lazy(() => import('./Map'));
const Filters = lazy(() => import('./Filters'));
@@ -55,7 +60,71 @@ const MapPageSelectionPane = lazy(() =>
import('./MapPageSelectionPane').then((module) => ({ default: module.MapPageSelectionPane }))
);
const UpgradeModal = lazy(() => import('../ui/UpgradeModal'));
-const Joyride = lazy(() => import('react-joyride'));
+const Joyride = lazy(() => import('react-joyride').then((module) => ({ default: module.Joyride })));
+
+const EXPORT_FILE_NAME = 'perfect-postcode-export.xlsx';
+const EXPORT_TIMEOUT_MS = 150_000;
+const EXPORT_NOTICE_MS = 6000;
+const EXPORT_ERROR_NOTICE_MS = 9000;
+
+type ExportNotice = {
+ kind: 'success' | 'error';
+ message: string;
+};
+
+function getExportFileName(res: Response): string {
+ const disposition = res.headers.get('content-disposition');
+ if (!disposition) return EXPORT_FILE_NAME;
+
+ const encodedMatch = disposition.match(/filename\*=UTF-8''([^;]+)/i);
+ if (encodedMatch?.[1]) {
+ try {
+ return decodeURIComponent(encodedMatch[1].trim());
+ } catch {
+ return encodedMatch[1].trim();
+ }
+ }
+
+ const match = disposition.match(/filename="?([^";]+)"?/i);
+ return match?.[1]?.trim() || EXPORT_FILE_NAME;
+}
+
+async function getExportErrorMessage(res: Response): Promise {
+ const fallback = `HTTP ${res.status}${res.statusText ? ` ${res.statusText}` : ''}`;
+ const contentType = res.headers.get('content-type') ?? '';
+
+ try {
+ if (contentType.includes('application/json')) {
+ const data: unknown = await res.json();
+ if (data && typeof data === 'object') {
+ const record = data as Record;
+ const message = record.message ?? record.error;
+ if (typeof message === 'string' && message.trim()) return message.trim();
+ }
+ return fallback;
+ }
+
+ const text = await res.text();
+ return text.trim() || fallback;
+ } catch {
+ return fallback;
+ }
+}
+
+function triggerExportDownload(blob: Blob, fileName: string): void {
+ const objectUrl = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = objectUrl;
+ link.download = fileName;
+ link.rel = 'noopener';
+ link.style.display = 'none';
+
+ document.body.appendChild(link);
+ link.click();
+ link.remove();
+
+ window.setTimeout(() => URL.revokeObjectURL(objectUrl), 30_000);
+}
function MapFallback() {
return (
@@ -98,8 +167,8 @@ interface MapPageProps {
initialPostcode?: string;
shareCode?: string;
user?: { id: string; subscription: string; isAdmin?: boolean } | null;
- onLoginClick?: () => void;
- onRegisterClick?: () => void;
+ onLoginClick: () => void;
+ onRegisterClick: () => void;
onSaveProperty?: (property: Property) => void;
onUnsaveProperty?: (id: string) => void;
isPropertySaved?: (address?: string, postcode?: string) => boolean;
@@ -146,11 +215,14 @@ export default function MapPage({
const [rightPaneWidth, rightPaneHandlers] = usePaneResize(384, 200, 0.45, 'right');
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
+ const [mobileBottomSheetHeight, setMobileBottomSheetHeight] = useState(0);
const [poiPaneOpen, setPoiPaneOpen] = useState(false);
const [currentLocation, setCurrentLocation] = useState<{ lat: number; lng: number } | null>(null);
const [showBookmarkToast, setShowBookmarkToast] = useState(false);
const bookmarkToastDismissed = useRef(localStorage.getItem('bookmark_toast_dismissed') === '1');
+ const [exportNotice, setExportNotice] = useState(null);
+ const exportNoticeTimeoutRef = useRef(null);
const handleSavePropertyWithToast = useCallback(
(property: Property) => {
@@ -166,6 +238,35 @@ export default function MapPage({
const { t } = useTranslation();
const modes = useTranslatedModes();
+ const clearExportNoticeTimer = useCallback(() => {
+ if (exportNoticeTimeoutRef.current !== null) {
+ window.clearTimeout(exportNoticeTimeoutRef.current);
+ exportNoticeTimeoutRef.current = null;
+ }
+ }, []);
+
+ const clearExportNotice = useCallback(() => {
+ clearExportNoticeTimer();
+ setExportNotice(null);
+ }, [clearExportNoticeTimer]);
+
+ const showExportNotice = useCallback(
+ (notice: ExportNotice) => {
+ clearExportNoticeTimer();
+ setExportNotice(notice);
+ exportNoticeTimeoutRef.current = window.setTimeout(
+ () => {
+ setExportNotice(null);
+ exportNoticeTimeoutRef.current = null;
+ },
+ notice.kind === 'error' ? EXPORT_ERROR_NOTICE_MS : EXPORT_NOTICE_MS
+ );
+ },
+ [clearExportNoticeTimer]
+ );
+
+ useEffect(() => clearExportNoticeTimer, [clearExportNoticeTimer]);
+
const {
filters,
activeFeature,
@@ -555,10 +656,16 @@ export default function MapPage({
]);
const tutorial = useTutorial(initialLoading, isMobile, deferTutorial);
+ const tutorialTheme = useMemo(() => getTutorialStyles(theme), [theme]);
const [exporting, setExporting] = useState(false);
const handleExport = useCallback(() => {
- if (!mapData.bounds || exporting) return;
+ if (exporting) return;
+ if (!mapData.bounds) {
+ showExportNotice({ kind: 'error', message: t('header.exportUnavailable') });
+ return;
+ }
+
const { south, west, north, east } = mapData.bounds;
const params = new URLSearchParams({
bounds: `${south},${west},${north},${east}`,
@@ -567,23 +674,48 @@ export default function MapPage({
if (filterStr) params.set('filters', filterStr);
const url = apiUrl('export', params);
+ const controller = new AbortController();
+ let timedOut = false;
+ const timeoutId = window.setTimeout(() => {
+ timedOut = true;
+ controller.abort();
+ }, EXPORT_TIMEOUT_MS);
+
setExporting(true);
- fetch(url, authHeaders())
- .then((res) => {
- if (!res.ok) throw new Error(`HTTP ${res.status}`);
- return res.blob();
- })
- .then((blob) => {
- const link = document.createElement('a');
- link.href = URL.createObjectURL(blob);
- link.download = 'perfect-postcode-export.xlsx';
- link.click();
- URL.revokeObjectURL(link.href);
+ clearExportNotice();
+
+ void (async () => {
+ try {
+ const res = await fetch(url, authHeaders({ signal: controller.signal }));
+ if (!res.ok) throw new Error(await getExportErrorMessage(res));
+
+ const blob = await res.blob();
+ if (blob.size === 0) throw new Error(t('header.exportEmpty'));
+
+ triggerExportDownload(blob, getExportFileName(res));
trackEvent('Export');
- })
- .catch((err) => logNonAbortError('Export failed', err))
- .finally(() => setExporting(false));
- }, [mapData.bounds, filters, features, exporting]);
+ showExportNotice({ kind: 'success', message: t('header.exportReady') });
+ } catch (err) {
+ if (!timedOut) logNonAbortError('Export failed', err);
+ const detail = err instanceof Error && err.message.trim() ? ` ${err.message}` : '';
+ showExportNotice({
+ kind: 'error',
+ message: timedOut ? t('header.exportTimedOut') : `${t('header.exportFailed')}${detail}`,
+ });
+ } finally {
+ window.clearTimeout(timeoutId);
+ setExporting(false);
+ }
+ })();
+ }, [
+ clearExportNotice,
+ exporting,
+ features,
+ filters,
+ mapData.bounds,
+ showExportNotice,
+ t,
+ ]);
useEffect(() => {
onExportStateChange?.({ onExport: handleExport, exporting });
@@ -600,6 +732,8 @@ export default function MapPage({
const featureName = viewFeature
? (getSchoolBackendFeatureName(viewFeature) ??
getSpecificCrimeFeatureName(viewFeature) ??
+ getEthnicityFeatureName(viewFeature) ??
+ getPoiDistanceFeatureName(viewFeature) ??
viewFeature)
: null;
return featureName ? features.find((f) => f.name === featureName) || null : null;
@@ -609,6 +743,8 @@ export default function MapPage({
viewFeature
? (getSchoolBackendFeatureName(viewFeature) ??
getSpecificCrimeFeatureName(viewFeature) ??
+ getEthnicityFeatureName(viewFeature) ??
+ getPoiDistanceFeatureName(viewFeature) ??
viewFeature)
: null,
[viewFeature]
@@ -685,6 +821,28 @@ export default function MapPage({
);
+ const exportToast = exportNotice && (
+
+ {exportNotice.kind === 'success' ? (
+ {exportNotice.message}
+
+
+
+ );
+
if (screenshotMode) {
return (
@@ -805,7 +963,7 @@ export default function MapPage({
aiFilterSummary={aiFilterSummary}
onAiFilterSubmit={handleAiFilterSubmit}
isLoggedIn={!!user}
- onLoginRequired={onRegisterClick ?? (() => {})}
+ onLoginRequired={onRegisterClick}
isLicensed={user?.subscription === 'licensed'}
onUpgradeClick={() => onNavigateTo('pricing')}
onResetTutorial={!isMobile ? tutorial.resetTutorial : undefined}
@@ -859,6 +1017,7 @@ export default function MapPage({
featureName={mobileLegendMeta.name}
theme={theme}
inline
+ suffix={mobileLegendMeta.suffix}
raw={mobileLegendMeta.raw}
/>
);
@@ -926,21 +1085,11 @@ export default function MapPage({
hideLegend
hideLocationSearch={mobileDrawerOpen && !!selectedHexagon}
travelTimeEntries={entries}
+ bottomScreenInset={mobileBottomSheetHeight}
/>
- {mapData.loading && (
-
- )}
-
setPoiPaneOpen((p) => !p)}
className={`absolute top-3 right-3 z-20 p-2 rounded-lg shadow-lg bg-white dark:bg-warm-800 ${poiPaneOpen ? 'text-teal-600 dark:text-teal-400' : 'text-warm-500 dark:text-warm-400 hover:text-teal-600 dark:hover:text-teal-400'}`}
@@ -955,7 +1104,10 @@ export default function MapPage({
+
{renderFilters({ destinationDropdownPortal: false })}
@@ -979,13 +1131,14 @@ export default function MapPage({
)}
{bookmarkToast}
+ {exportToast}
{mapData.licenseRequired && (
{})}
- onRegisterClick={onRegisterClick ?? (() => {})}
+ onLoginClick={onLoginClick}
+ onRegisterClick={onRegisterClick}
onStartCheckout={() => license.startCheckout()}
onZoomToFreeZone={handleZoomToFreeZone}
isShareReturn={!!shareReturnViewRef.current}
@@ -1015,11 +1168,14 @@ export default function MapPage({
steps={tutorial.steps}
run={tutorial.run}
continuous
- showProgress
- showSkipButton
- callback={tutorial.handleCallback}
- styles={getTutorialStyles(theme)}
- disableScrolling
+ onEvent={tutorial.handleCallback}
+ styles={tutorialTheme.styles}
+ options={{
+ ...tutorialTheme.options,
+ buttons: ['back', 'close', 'primary', 'skip'],
+ showProgress: true,
+ skipScroll: true,
+ }}
locale={{ last: 'Finish' }}
/>
@@ -1044,6 +1200,15 @@ export default function MapPage({