diff --git a/src/app/components/SpaceMemberMap.svelte b/src/app/components/SpaceMemberMap.svelte index 3414354d..d1fd52b2 100644 --- a/src/app/components/SpaceMemberMap.svelte +++ b/src/app/components/SpaceMemberMap.svelte @@ -2,7 +2,7 @@ import "leaflet/dist/leaflet.css" import {mount, onMount, unmount} from "svelte" - import type {Map as LeafletMap, Marker} from "leaflet" + import type {Map as LeafletMap, Marker, TileLayer} from "leaflet" import type {Maybe} from "@welshman/lib" import ProfileCircle from "@app/components/ProfileCircle.svelte" import ProfileDetail from "@app/components/ProfileDetail.svelte" @@ -17,8 +17,13 @@ const {url, pins}: Props = $props() - const tileUrl = $derived( - `https://{s}.basemaps.cartocdn.com/${$activeTheme === "dark" ? "dark" : "light"}_all/{z}/{x}/{y}{r}.png`, + const canvas = $derived($activeTheme === "dark" ? "Dark" : "Light") + + const tileUrls = $derived( + ["Base", "Reference"].map( + layer => + `https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_${canvas}_Gray_${layer}/MapServer/tile/{z}/{y}/{x}`, + ), ) const openProfile = (pubkey: string) => pushModal(ProfileDetail, {pubkey, url}) @@ -41,17 +46,23 @@ }) $effect(() => { - if (leaflet && map) { - const tiles = leaflet - .tileLayer(tileUrl, { - maxZoom: 12, - attribution: - 'OpenStreetMap, CARTO', - }) - .addTo(map) + const tiles: TileLayer[] = [] - return () => tiles.remove() + if (leaflet && map) { + for (const tileUrl of tileUrls) { + tiles.push( + leaflet + .tileLayer(tileUrl, { + maxZoom: 12, + attribution: + 'Esri, HERE, Garmin, OpenStreetMap contributors', + }) + .addTo(map), + ) + } } + + return () => tiles.forEach(tile => tile.remove()) }) $effect(() => {