fix: include mapbox css
This commit is contained in:
parent
655d795a02
commit
581b405244
2 changed files with 12 additions and 5 deletions
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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(() => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue