fix: include mapbox css

This commit is contained in:
Jan-Henrik 2026-03-02 23:44:10 +01:00
parent 655d795a02
commit 581b405244
2 changed files with 12 additions and 5 deletions

View file

@ -181,9 +181,12 @@ export default function HomePage() {
}; };
}, [pinLocation, estateValueAvailable, selectedCity, mode, threshold, profile]); }, [pinLocation, estateValueAvailable, selectedCity, mode, threshold, profile]);
// Fetch isochrone when in isochrone mode with an active pin // Fetch isochrone when in isochrone mode with an active pin.
// Isochrones are only shown in accessibility mode — switching to estate-value
// or hidden-gem clears the isochrone so those overlays become visible.
// Switching back to accessibility re-fetches the isochrone automatically.
useEffect(() => { useEffect(() => {
if (!pinLocation || overlayMode !== "isochrone") { if (!pinLocation || overlayMode !== "isochrone" || baseOverlay !== "accessibility") {
setIsochroneData(null); setIsochroneData(null);
return; return;
} }
@ -218,7 +221,7 @@ export default function HomePage() {
cancelled = true; cancelled = true;
setIsochroneLoading(false); setIsochroneLoading(false);
}; };
}, [pinLocation, overlayMode, mode, threshold]); }, [pinLocation, overlayMode, mode, threshold, baseOverlay]);
function handleProfileChange(newProfile: ProfileId) { function handleProfileChange(newProfile: ProfileId) {
setProfile(newProfile); setProfile(newProfile);

View file

@ -2,6 +2,7 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import * as maplibregl from "maplibre-gl"; import * as maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { Protocol } from "pmtiles"; import { Protocol } from "pmtiles";
import type { CategoryId, TravelMode, ProfileId } from "@transportationer/shared"; import type { CategoryId, TravelMode, ProfileId } from "@transportationer/shared";
@ -196,8 +197,11 @@ export function MapView({
}, [mapLoaded, citySlug, mode, threshold, profile]); }, [mapLoaded, citySlug, mode, threshold, profile]);
// ── Pin marker ───────────────────────────────────────────────────────────── // ── Pin marker ─────────────────────────────────────────────────────────────
// Markers are DOM elements — no need to wait for style to be loaded. // Markers are DOM elements (not style layers), but mapRef.current is only
// set inside the mount effect which runs after all earlier effects. Adding
// mapLoaded as a dep guarantees mapRef.current is non-null when this runs.
useEffect(() => { useEffect(() => {
if (!mapLoaded) return;
const map = mapRef.current; const map = mapRef.current;
if (!map) return; if (!map) return;
markerRef.current?.remove(); markerRef.current?.remove();
@ -207,7 +211,7 @@ export function MapView({
.setLngLat([pinLocation.lng, pinLocation.lat]) .setLngLat([pinLocation.lng, pinLocation.lat])
.addTo(map); .addTo(map);
} }
}, [pinLocation]); }, [mapLoaded, pinLocation]);
// ── Grid visibility ─────────────────────────────────────────────────────── // ── Grid visibility ───────────────────────────────────────────────────────
useEffect(() => { useEffect(() => {