feat(map): switch to maplibre native

package.json

@@ -39,9 +39,11 @@
 	},
 	"dependencies": {
 		"@mapbox/geojson-rewind": "^0.5.2",
-		"@maplibre/maplibre-gl-leaflet": "^0.1.3",
+		"@nazka/map-gl-js-spiderfy": "^2.0.0",
 		"@tanstack/match-sorter-utils": "^8.19.4",
 		"@tanstack/svelte-table": "^8.21.3",
+		"@turf/convex": "^7.3.5",
+		"@turf/helpers": "^7.3.5",
 		"@zerodevx/svelte-toast": "^0.9.6",
 		"axios": "^1.15.0",
 		"axios-retry": "^4.5.0",
@@ -53,12 +55,8 @@
 		"husky": "^9.1.7",
 		"i18n-iso-countries": "^7.14.0",
 		"js-confetti": "^0.13.1",
-		"leaflet": "^1.9.4",
-		"leaflet.featuregroup.subgroup": "^1.0.2",
-		"leaflet.locatecontrol": "^0.90.0",
-		"leaflet.markercluster": "^1.5.3",
 		"localforage": "^1.10.0",
-		"maplibre-gl": "^4.7.1",
+		"maplibre-gl": "^5.24.0",
 		"marked": "^18.0.0",
 		"opening_hours": "^3.12.0",
 		"qrcode": "^1.5.4",
@@ -80,9 +78,6 @@
 		"@types/d3-geo": "^3.1.0",
 		"@types/dompurify": "^3.2.0",
 		"@types/geojson": "^7946.0.16",
-		"@types/leaflet": "1.9.21",
-		"@types/leaflet.featuregroup.subgroup": "^1.0.4",
-		"@types/leaflet.markercluster": "^1.5.6",
 		"@types/node": "^22.19.18",
 		"@types/qrcode": "^1.5.6",
 		"jsdom": "^29.0.2",

src/app.css

@@ -170,153 +170,9 @@
 			filter: drop-shadow(0 0 6px #f7931a) drop-shadow(0 0 12px #f7931a);
 		}
 	}
-
-	/* Fix for Leaflet controls not visible on mobile Firefox/Brave */
-	/* Only apply to fullscreen map to avoid breaking embedded maps */
-	.map-fullscreen .leaflet-bottom {
-		position: fixed !important;
-		bottom: 0 !important;
-	}
-}
-
-/* Center icons in Leaflet control buttons */
-.leaflet-bar a {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-/* Invert custom button icons in dark mode */
-.dark .leaflet-bar a img {
-	filter: invert(1);
-}
-
-/* Dark mode for Leaflet controls - Tailwind gray palette */
-:root {
-	/* Marker label colors - Light mode (Tailwind palette references) */
-	--marker-label-color: #0e7490; /* cyan-700 - better contrast on varied map backgrounds */
-	--marker-label-shadow: #ffffff; /* white */
-	--marker-label-boosted-color: #f97316; /* orange-500 - warmer, more prominent */
-	--marker-label-boosted-shadow: #ffffff; /* white */
-}
-
-.dark {
-	--leaflet-bg: #1f2937; /* gray-800 */
-	--leaflet-bg-transparent: rgba(31, 41, 55, 0.8);
-	--leaflet-border: #374151; /* gray-700 */
-	--leaflet-border-muted: #6b7280; /* gray-500 */
-	--leaflet-text: #f3f4f6; /* gray-100 */
-	--leaflet-text-muted: #9ca3af; /* gray-400 */
-	--leaflet-link: #60a5fa; /* blue-400 */
-	--marker-label-color: #22d3ee; /* cyan-400 - bright for dark backgrounds */
-	--marker-label-shadow: rgba(0, 0, 0, 0.95); /* near-black */
-	--marker-label-boosted-color: #fb923c; /* orange-400 - bright warm tone */
-	--marker-label-boosted-shadow: rgba(0, 0, 0, 0.95); /* near-black */
-}
-
-.dark .leaflet-bar,
-.dark .leaflet-control-layers {
-	background-color: var(--leaflet-bg);
-	border-color: var(--leaflet-border);
-}
-
-.dark .leaflet-bar a {
-	color: var(--leaflet-text);
-	background-color: var(--leaflet-bg);
-	border-bottom-color: var(--leaflet-border);
-}
-
-.dark .leaflet-bar a:hover {
-	background-color: var(--leaflet-border);
-}
-
-.dark .leaflet-control-layers-toggle {
-	background-color: var(--leaflet-bg);
-}
-
-.dark .leaflet-control-layers-list {
-	background-color: var(--leaflet-bg);
-	color: var(--leaflet-text);
-}
-
-.dark .leaflet-control-attribution {
-	background-color: var(--leaflet-bg-transparent);
-	color: var(--leaflet-text-muted);
-}
-
-.dark .leaflet-control-attribution a {
-	color: var(--leaflet-link);
-}
-
-.dark .leaflet-control-scale-line {
-	background-color: var(--leaflet-bg-transparent);
-	color: var(--leaflet-text);
-	border-color: var(--leaflet-border-muted);
-	text-shadow: none;
 }
 
 /* Dark mode for select dropdown options (Windows/Linux native rendering fix) */
 .dark select option {
 	background-color: rgb(55 65 81); /* gray-700 */
 }
-
-/* Marker label styles for Leaflet permanent tooltips */
-.leaflet-tooltip.marker-label,
-.leaflet-tooltip.marker-label-boosted {
-	background: none !important;
-	border: none !important;
-	outline: none !important;
-	box-shadow: none !important;
-	font-size: 14px;
-	padding: 2px 4px;
-	margin: 0;
-	border-radius: 0;
-	text-align: left;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: inline-block;
-	max-width: 160px;
-	min-width: unset;
-	width: auto;
-	height: auto;
-	font-weight: 500;
-	line-height: 1.2;
-}
-
-.leaflet-tooltip.marker-label {
-	color: var(--marker-label-color);
-	text-shadow:
-		-1px -1px 0 var(--marker-label-shadow),
-		1px -1px 0 var(--marker-label-shadow),
-		-1px 1px 0 var(--marker-label-shadow),
-		1px 1px 0 var(--marker-label-shadow);
-}
-
-.leaflet-tooltip.marker-label-boosted {
-	color: var(--marker-label-boosted-color);
-	font-weight: 600;
-	text-shadow:
-		-1px -1px 0 var(--marker-label-boosted-shadow),
-		1px -1px 0 var(--marker-label-boosted-shadow),
-		-1px 1px 0 var(--marker-label-boosted-shadow),
-		1px 1px 0 var(--marker-label-boosted-shadow);
-	filter: drop-shadow(0 1px 2px rgba(249, 115, 22, 0.35));
-}
-
-/* Z-index layering for marker labels and tooltips
- * - Tooltips (350): Below markers to prevent interaction blocking
- * - Markers: Use Leaflet's default z-index management for proper interaction states
- * - Clusters: Default Leaflet z-index (higher, not modified)
- */
-.leaflet-map-pane .leaflet-tooltip-pane {
-	z-index: 350 !important;
-}
-
-/* Hide the tooltip arrow/pointer for permanent labels */
-.leaflet-tooltip.marker-label::before,
-.leaflet-tooltip.marker-label .leaflet-tooltip-tip-container,
-.leaflet-tooltip.marker-label-boosted::before,
-.leaflet-tooltip.marker-label-boosted .leaflet-tooltip-tip-container {
-	display: none !important;
-}

src/routes/map/components/CommunityRail.svelte → src/components/CommunityRail.svelte

@@ -1,34 +1,38 @@
 <script lang="ts">
 import rewind from "@mapbox/geojson-rewind";
-import type { GeoJSON as LeafletGeoJSON, Map as LeafletMap } from "leaflet";
-import { onDestroy, onMount } from "svelte";
+import type { Feature, FeatureCollection } from "geojson";
+import type { GeoJSONSource, Map as MapLibreMap } from "maplibre-gl";
+import { onMount } from "svelte";
 import { fly } from "svelte/transition";
 
-import {
-	MAP_PANEL_MARGIN,
-	MERCHANT_DRAWER_WIDTH,
-	PANEL_DRAWER_GAP,
-} from "$lib/constants";
+import { MAP_PANEL_MARGIN } from "$lib/constants";
 import { merchantDrawer } from "$lib/merchantDrawerStore";
 import { merchantList } from "$lib/merchantListStore";
 import { areas } from "$lib/store";
 import { areasSync } from "$lib/sync/areas";
-import type { Area, Leaflet } from "$lib/types";
+import type { Area } from "$lib/types";
 import { areaIconSrc, getCommunitiesAtCoordinates } from "$lib/utils";
 
 import { resolve } from "$app/paths";
 
-// Enter from 10px below (slides up), exit reverses. Y motion avoids the
-// horizontal scrollbar that X motion caused when the rail sat at the viewport edge.
+// Community rail rendered alongside /map. Preview polygon lives on a
+// dedicated GeoJSON source + fill/outline layers added once and reused
+// — re-using the layer beats re-adding it per hover when the user
+// rapid-fires the avatars.
+
 const DESKTOP_FLY = { duration: 280, y: 10 };
-// Mobile rail is anchored top-left, so enter from above sliding down.
 const MOBILE_FLY = { duration: 280, y: -10 };
 
+const SOURCE_ID = "community-preview";
+const FILL_LAYER_ID = "community-preview-fill";
+const OUTLINE_LAYER_ID = "community-preview-outline";
+
+const EMPTY_FC: FeatureCollection = { type: "FeatureCollection", features: [] };
+
 export let lat: number | null = null;
 export let lon: number | null = null;
 export let zoom: number | null = null;
-export let map: LeafletMap | undefined = undefined;
-export let leaflet: Leaflet | undefined = undefined;
+export let map: MapLibreMap | undefined = undefined;
 
 const MIN_ZOOM = 6;
 const MOBILE_VISIBLE_LIMIT = 4;
@@ -41,13 +45,11 @@ $: allCommunities =
 $: mobileVisible = allCommunities.slice(0, MOBILE_VISIBLE_LIMIT);
 $: mobileOverflow = Math.max(0, allCommunities.length - MOBILE_VISIBLE_LIMIT);
 
-$: rightOffset = $merchantDrawer.isOpen
-	? MAP_PANEL_MARGIN + MERCHANT_DRAWER_WIDTH + PANEL_DRAWER_GAP
-	: MAP_PANEL_MARGIN;
+let previewCommunityId: string | null = null;
+let layersAdded = false;
 
-// Clear hover preview if the previewed community is no longer visible.
-// This handles the case where the rail DOM is removed (pan / zoom-out)
-// before mouseleave or blur fires on the hovered anchor.
+// Clear hover preview if the previewed community is no longer visible
+// (rail removed by pan / zoom-out before mouseleave/blur fires).
 $: if (
 	previewCommunityId &&
 	!allCommunities.some((c) => c.id === previewCommunityId)
@@ -66,53 +68,83 @@ const handleImgError = (e: Event) => {
 	img.src = "/images/bitcoin.svg";
 };
 
-let previewLayer: LeafletGeoJSON | null = null;
-let previewCommunityId: string | null = null;
+const ensureLayers = (m: MapLibreMap) => {
+	if (layersAdded) return;
+	if (!m.getSource(SOURCE_ID)) {
+		m.addSource(SOURCE_ID, { type: "geojson", data: EMPTY_FC });
+	}
+	if (!m.getLayer(FILL_LAYER_ID)) {
+		m.addLayer({
+			id: FILL_LAYER_ID,
+			type: "fill",
+			source: SOURCE_ID,
+			paint: {
+				"fill-color": "#F7931A",
+				"fill-opacity": 0.3,
+			},
+		});
+	}
+	if (!m.getLayer(OUTLINE_LAYER_ID)) {
+		m.addLayer({
+			id: OUTLINE_LAYER_ID,
+			type: "line",
+			source: SOURCE_ID,
+			paint: {
+				"line-color": "#000000",
+				"line-width": 1,
+			},
+		});
+	}
+	layersAdded = true;
+};
 
 function clearPreview() {
-	if (previewLayer && map) {
-		map.removeLayer(previewLayer);
-	}
-	previewLayer = null;
 	previewCommunityId = null;
+	if (!map) return;
+	const source = map.getSource(SOURCE_ID) as GeoJSONSource | undefined;
+	source?.setData(EMPTY_FC);
 }
 
 function showPreview(community: Area) {
-	if (!map || !leaflet || !community.tags.geo_json) return;
-	clearPreview();
+	if (!map || !community.tags.geo_json) return;
+	ensureLayers(map);
+	const source = map.getSource(SOURCE_ID) as GeoJSONSource | undefined;
+	if (!source) return;
 	try {
-		const gj = rewind(community.tags.geo_json, true);
-		previewLayer = leaflet
-			.geoJSON(gj, {
-				style: {
-					color: "#000000",
-					weight: 1,
-					fillColor: "#F7931A",
-					fillOpacity: 0.3,
-				},
-				interactive: false,
-			})
-			.addTo(map);
+		// Right-hand-rule winding for fill rendering correctness.
+		const gj = rewind(community.tags.geo_json, true) as
+			| Feature
+			| FeatureCollection;
+		source.setData(gj);
 		previewCommunityId = community.id;
 	} catch (e) {
 		console.error("CommunityRail: failed to draw preview", e);
 	}
 }
 
 onMount(() => {
-	// /map does not otherwise sync the areas store; trigger it here so the
-	// rail has data. areasSync has its own 5-min cache so repeat calls are cheap.
+	// /map doesn't otherwise sync the areas store; trigger it here so the
+	// rail has data. areasSync has its own 5-min cache.
 	areasSync();
 });
 
-onDestroy(clearPreview);
+// No onDestroy map cleanup: /map (the owner) calls map.remove() in its
+// own onDestroy, which runs before this child component's fragment is
+// torn down. By that point the MapLibre Map's internal `style` is
+// undefined, so any m.getLayer / m.getSource here threw
+//   Cannot read properties of undefined (reading 'getLayer')
+// even though `if (!map) return` passed — the JS object still exists,
+// the bare-method `m.getLayer` just deferences a now-undefined `m.style`.
+// map.remove() already disposes our sources and layers.
 </script>
 
 {#if allCommunities.length > 0}
-	<!-- Desktop: bottom-right, above Leaflet attribution. Shifts left when drawer opens. -->
+	<!-- Desktop: bottom-right, above the attribution. The merchant drawer + list
+	     panel live on the left side of the map, so the rail's right offset is
+	     fixed. -->
 	<div
-		class="pointer-events-none absolute bottom-10 z-[1001] hidden flex-col-reverse gap-2 transition-[right] duration-200 md:flex"
-		style="right: {rightOffset}px"
+		class="pointer-events-none absolute bottom-10 z-[1001] hidden flex-col-reverse gap-2 md:flex"
+		style="right: {MAP_PANEL_MARGIN}px"
 	>
 		{#each allCommunities as community (community.id)}
 			<a
@@ -137,7 +169,7 @@ onDestroy(clearPreview);
 		{/each}
 	</div>
 
-	<!-- Mobile: top-left. Hidden when the merchant drawer or the nearby/worldwide list is open so the active merchant context owns the screen. -->
+	<!-- Mobile: top-left. Hidden when drawer or list panel is open. -->
 	<div
 		class="pointer-events-none absolute top-3 left-3 z-[1001] flex flex-col gap-1.5 md:hidden"
 		class:hidden={$merchantDrawer.isOpen || $merchantList.isOpen}