diff --git a/client/src/components/Journey/JourneyLayeredMap.tsx b/client/src/components/Journey/JourneyLayeredMap.tsx index 021d549c5..75685de01 100644 --- a/client/src/components/Journey/JourneyLayeredMap.tsx +++ b/client/src/components/Journey/JourneyLayeredMap.tsx @@ -26,6 +26,11 @@ interface Props extends MapProps { hideLayerControl?: boolean; /** How far from the map's top the switches sit, clear of a bar laid over the map. */ controlsTop?: number | string; + /** + * The base layer, when the page keeps the satellite switch in its own bar (the + * phone); left out, the map carries the switch in its top corner. + */ + baseLayer?: BaseLayer; /** Leads from a picked place or stay to its entry. */ onOpenEntry?: (entryId: string) => void; entryTitleOf?: (entryId: number) => string | null; @@ -41,6 +46,36 @@ function offeredIf(offered: unknown, action: T): T | undefined { return offered ? action : undefined; } +/** + * The base layer the map shows: the page's, where it keeps the switch in its own + * bar, otherwise the map's own, switched from its corner. + */ +function useBaseLayer(page: BaseLayer | undefined) { + const [own, setOwn] = useState('default'); + const toggleBaseLayer = useCallback(() => setOwn((was) => (was === 'satellite' ? 'default' : 'satellite')), []); + return { baseLayer: page ?? own, toggleBaseLayer, switchOnMap: page === undefined }; +} + +/** The satellite switch in the map's top corner, unless the page keeps it in its own bar. */ +function CornerSwitcher({ + hidden, + top, + active, + onToggle, +}: { + hidden: boolean; + top: number | string; + active: BaseLayer; + onToggle: () => void; +}) { + if (hidden) return null; + return ( +
+ +
+ ); +} + /** * A journey map with its layers (JRN-04): the renderer, the reader's layer * switches and the card of a picked plan place or stay. Every journey map @@ -59,6 +94,7 @@ export default function JourneyLayeredMap({ engine = 'auto', hideLayerControl = false, controlsTop = 12, + baseLayer: pageBaseLayer, onOpenEntry, entryTitleOf, onWriteAboutPlace, @@ -68,8 +104,7 @@ export default function JourneyLayeredMap({ ...rest }: Props) { const [picked, setPicked] = useState<{ marks: JourneyMapMark[]; key: string } | null>(null); - const [baseLayer, setBaseLayer] = useState('default'); - const toggleBaseLayer = useCallback(() => setBaseLayer((was) => (was === 'satellite' ? 'default' : 'satellite')), []); + const { baseLayer, toggleBaseLayer, switchOnMap } = useBaseLayer(pageBaseLayer); const visibility = layers?.visibility; const onMarksPick = useCallback((marks: JourneyMapMark[]) => { setPicked({ marks, key: marks.map((m) => m.key).join(',') }); @@ -111,9 +146,7 @@ export default function JourneyLayeredMap({
{engine === 'leaflet' ? : }
-
- -
+