From 17493d931ea84671530179381f4e862c7f66a5d5 Mon Sep 17 00:00:00 2001
From: Coracle-Bot <npub1klq6260@nostr.local>
Date: Mon, 28 Sep 2026 22:27:49 +0000
Subject: [PATCH] Draw the directory map with CARTO tiles rather than Esri's

---
 .env                                     |  1 +
 README.md                                |  1 +
 electron/main.ts                         |  2 +-
 src/app/components/SpaceMemberMap.svelte | 32 +++++++++---------------
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/.env b/.env
index 07df11fe..f987717d 100644
--- a/.env
+++ b/.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
diff --git a/README.md b/README.md
index f10428ff..43bbe0da 100644
--- a/README.md
+++ b/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.
 
diff --git a/electron/main.ts b/electron/main.ts
index 56affb7d..3f3a2f98 100644
--- a/electron/main.ts
+++ b/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:",
diff --git a/src/app/components/SpaceMemberMap.svelte b/src/app/components/SpaceMemberMap.svelte
index d1fd52b2..d67f96ea 100644
--- a/src/app/components/SpaceMemberMap.svelte
+++ b/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(() => {