Draw the directory map with CARTO tiles rather than Esri's

.env

@@ -22,6 +22,7 @@ VITE_DEFAULT_SEARCH_RELAYS=relay.ditto.pub,antiprimal.net,relay.vertexlab.io
 VITE_DEFAULT_MESSAGING_RELAYS=auth.nostr1.com,relay.keychat.io,relay.ditto.pub
 VITE_SIGNER_RELAYS=ephemeral.snowflare.cc,bucket.coracle.social
 VITE_THUMBNAIL_URL=https://vthumbs.coracle.social
+VITE_CARTO_BASEMAP_KEY=
 VITE_GLITCHTIP_API_KEY=
 GLITCHTIP_AUTH_TOKEN=
 VITE_HOSTING_BACKEND_URL=https://api.hosting.coracle.social

README.md

@@ -61,6 +61,7 @@ Create an `.env.local` file to override any of the values in `.env`:
 - `VITE_PUSH_BRIDGE` - WebSocket URL of the push notification relay bridge
 - `VITE_POMADE_SIGNERS` - A comma-separated list of Pomade signer server URLs (3+ required to enable email signup)
 - `VITE_THUMBNAIL_URL` - URL of the image thumbnail service
+- `VITE_CARTO_BASEMAP_KEY` - A CARTO Basemaps key for the member map's tiles, free from https://carto.com/basemaps/apikey/. Without one the tiles carry an "API key required" watermark.
 
 These values **won't** be used for a built version. Instead, env variables should be provided to `scripts/build/app.sh` directly or to the built container.
 

electron/main.ts

@@ -138,7 +138,7 @@ createCapacitorElectronApp({
       "default-src 'self'",
       "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://plausible.coracle.social",
       "style-src 'self' 'unsafe-inline'",
-      "img-src 'self' data: blob: https://*.basemaps.cartocdn.com",
+      "img-src 'self' data: blob: https://basemaps.cartocdn.com",
       "font-src 'self' data:",
       "media-src 'self' blob:",
       "connect-src 'self' https: wss: ws: http:",

src/app/components/SpaceMemberMap.svelte

@@ -17,14 +17,7 @@
 
   const {url, pins}: Props = $props()
 
-  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 basemap = $derived($activeTheme === "dark" ? "dark_all" : "light_all")
 
   const openProfile = (pubkey: string) => pushModal(ProfileDetail, {pubkey, url})
 
@@ -46,23 +39,22 @@
   })
 
   $effect(() => {
-    const tiles: TileLayer[] = []
+    let tile: Maybe<TileLayer>
 
     if (leaflet && map) {
-      for (const tileUrl of tileUrls) {
-        tiles.push(
-          leaflet
-            .tileLayer(tileUrl, {
-              maxZoom: 12,
-              attribution:
-                'Esri, HERE, Garmin, <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-            })
-            .addTo(map),
+      tile = leaflet
+        .tileLayer(
+          `https://basemaps.cartocdn.com/rastertiles/${basemap}/{z}/{x}/{y}.png?key=${import.meta.env.VITE_CARTO_BASEMAP_KEY}`,
+          {
+            maxZoom: 12,
+            attribution:
+              '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions/">CARTO</a>',
+          },
         )
-      }
+        .addTo(map)
     }
 
-    return () => tiles.forEach(tile => tile.remove())
+    return () => tile?.remove()
   })
 
   $effect(() => {