mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-22 06:56:35 +00:00
Maurice
5b4a7e82ff
The trip planner and the journal get a "From Dawarich" list: the stays recorded for those dates, each one a row that can be dismissed or turned into a place or an entry after a review step that shows time, name, note and day. A place that came from a recording carries the Dawarich mark next to its name so its origin stays visible afterwards. The recorded route lies over the trip and journal maps as an overlay, coloured per day and cut along the reader's own timezone rather than UTC. It is fetched for the window on screen and never stored. The Atlas gets its own panel beside the map for the countries and cities the recordings prove, and the wish list is ticked off there, on the day of the visit, undoably. The phone has its own take on all of it, in the mobile shell's colours and with native sheets.
55 lines
2.9 KiB
TypeScript
55 lines
2.9 KiB
TypeScript
import { Suspense } from 'react'
|
|
import { AlertTriangle, Clock, Info } from 'lucide-react'
|
|
import { Tooltip } from '../shared/Tooltip'
|
|
import { useSettingsStore } from '../../store/settingsStore'
|
|
import { MapView } from './MapView'
|
|
import ErrorBoundary from '../shared/ErrorBoundary'
|
|
import { MapViewGLMapbox, MapViewGLMaplibre } from './glLazy'
|
|
import { useRoadtripHazards } from './useRoadtripHazards'
|
|
import { useTranslation } from '../../i18n/TranslationContext'
|
|
|
|
// Auto-selects the map renderer based on user settings. Keeps the existing
|
|
// Leaflet MapView untouched so the Mapbox GL variant can mature iteratively
|
|
// behind a toggle. Atlas is not affected — it imports Leaflet directly.
|
|
//
|
|
// Offline maps: only the Leaflet renderer supports full pre-download (raster
|
|
// tiles via sync/tilePrefetcher.ts). GL maps are best-effort offline — their
|
|
// vector tiles are cached opportunistically by the Service Worker as you view
|
|
// them online (see the GL tile rules in vite.config.js), not prefetched.
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export function MapViewAuto(props: any) {
|
|
const { t } = useTranslation()
|
|
const hazards = useRoadtripHazards(props.tripId, !!props.clusterLoosely)
|
|
// `dawarichTrack` arrives as a prop rather than being fetched here: the pill
|
|
// that switches it on lives at page level and needs the load status, so the
|
|
// fetch sits in useTripPlanner and both shells read the same one.
|
|
const mapProps = { ...props, hazards: hazards.feed?.hazards }
|
|
const provider = useSettingsStore(s => s.settings.map_provider)
|
|
const token = useSettingsStore(s => s.settings.mapbox_access_token)
|
|
// Fall back to Leaflet when Mapbox is selected but no token is set,
|
|
// so trip planner never shows an empty map due to a missing token.
|
|
const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl'
|
|
: provider === 'mapbox-gl' && token ? 'mapbox-gl'
|
|
: null
|
|
// One chunk per engine: picking the binding here is what keeps mapbox-gl and
|
|
// maplibre-gl out of each other's downloads.
|
|
const MapViewGL = glProvider === 'maplibre-gl' ? MapViewGLMaplibre : MapViewGLMapbox
|
|
if (glProvider) {
|
|
// Render the previous Leaflet map as the fallback so there's no blank flash
|
|
// while the GL chunk loads on first use.
|
|
return (
|
|
// Outside the Suspense on purpose: Suspense handles the pending promise,
|
|
// a rejected one (chunk gone after a deploy) throws past it. Falling back
|
|
// to Leaflet keeps a usable map instead of an error card.
|
|
// resetKeys: with two engine chunks, a failure under one provider must not
|
|
// keep showing Leaflet after the user switches to the other.
|
|
<ErrorBoundary boundaryId="map:gl" resetKeys={[glProvider]} fallback={<MapView {...mapProps} />}>
|
|
<Suspense fallback={<MapView {...mapProps} />}>
|
|
<MapViewGL {...mapProps} glProvider={glProvider} />
|
|
</Suspense>
|
|
</ErrorBoundary>
|
|
)
|
|
}
|
|
return <MapView {...mapProps} />
|
|
}
|