Review suggestions

web/package-lock.json

@@ -14,7 +14,6 @@
 				"justified-layout": "^4.1.0",
 				"leaflet": "^1.9.3",
 				"leaflet.markercluster": "^1.5.3",
-				"leaflet.tilelayer.colorfilter": "^1.2.5",
 				"lodash-es": "^4.17.21",
 				"luxon": "^3.2.1",
 				"rxjs": "^7.8.0",
@@ -9064,11 +9063,6 @@
 				"leaflet": "^1.3.1"
 			}
 		},
-		"node_modules/leaflet.tilelayer.colorfilter": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/leaflet.tilelayer.colorfilter/-/leaflet.tilelayer.colorfilter-1.2.5.tgz",
-			"integrity": "sha512-wUvqVlpEofDEDi0ocXApXAcz1l06RsNBEw3L/2ColaygDPERswgas2Jgv/DVrWrVd0HQAxDerwFqOtBI+zbw3w=="
-		},
 		"node_modules/leven": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -18085,11 +18079,6 @@
 			"integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
 			"requires": {}
 		},
-		"leaflet.tilelayer.colorfilter": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/leaflet.tilelayer.colorfilter/-/leaflet.tilelayer.colorfilter-1.2.5.tgz",
-			"integrity": "sha512-wUvqVlpEofDEDi0ocXApXAcz1l06RsNBEw3L/2ColaygDPERswgas2Jgv/DVrWrVd0HQAxDerwFqOtBI+zbw3w=="
-		},
 		"leven": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",

web/package.json

@@ -63,7 +63,6 @@
 		"justified-layout": "^4.1.0",
 		"leaflet": "^1.9.3",
 		"leaflet.markercluster": "^1.5.3",
-		"leaflet.tilelayer.colorfilter": "^1.2.5",
 		"lodash-es": "^4.17.21",
 		"luxon": "^3.2.1",
 		"rxjs": "^7.8.0",

web/src/app.css

@@ -93,32 +93,3 @@ input:focus-visible {
 		scrollbar-width: none;
 	}
 }
-
-/* Leaflet */
-
-.leaflet-marker-icon {
-	border-radius: 25%;
-}
-
-.marker-cluster {
-	background-clip: padding-box;
-	border-radius: 20px;
-}
-
-.marker-cluster div {
-	width: 40px;
-	height: 40px;
-	margin-left: 5px;
-	margin-top: 5px;
-
-	text-align: center;
-	border-radius: 20px;
-	font-weight: bold;
-
-	background-color: rgb(236, 237, 246);
-	color: rgb(69, 80, 169);
-}
-
-.marker-cluster span {
-	line-height: 40px;
-}

web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte

@@ -88,3 +88,32 @@
 {#if cluster}
 	<slot />
 {/if}
+
+<style>
+	:global(.leaflet-marker-icon) {
+		border-radius: 25%;
+	}
+
+	:global(.marker-cluster) {
+		background-clip: padding-box;
+		border-radius: 20px;
+	}
+
+	:global(.marker-cluster div) {
+		width: 40px;
+		height: 40px;
+		margin-left: 5px;
+		margin-top: 5px;
+
+		text-align: center;
+		border-radius: 20px;
+		font-weight: bold;
+
+		background-color: rgb(236, 237, 246);
+		color: rgb(69, 80, 169);
+	}
+
+	:global(.marker-cluster span) {
+		line-height: 40px;
+	}
+</style>

web/src/lib/components/shared-components/leaflet/tile-layer.svelte

@@ -1,29 +1,34 @@
-<script lang="ts" context="module">
-	type TileLayerFilterOptions = TileLayerOptions & {
-		filter?: string[];
-	};
-</script>
-
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import 'leaflet.tilelayer.colorfilter';
-	import { TileLayer, type TileLayerOptions } from 'leaflet';
+	import L, { TileLayer, type TileLayerOptions } from 'leaflet';
 	import { getMapContext } from './map.svelte';
-	import L from 'leaflet';
 
 	export let urlTemplate: string;
-	export let options: TileLayerFilterOptions | undefined = undefined;
+	export let options: TileLayerOptions | undefined = undefined;
+	export let allowDarkMode: boolean = false;
+
 	let tileLayer: TileLayer;
 
 	const map = getMapContext();
 
 	onMount(() => {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		tileLayer = new L.tileLayer.colorFilter(urlTemplate, options).addTo(map);
+		tileLayer = new L.TileLayer(urlTemplate, {
+			className: allowDarkMode ? 'leaflet-layer-dynamic' : 'leaflet-layer',
+			...options
+		}).addTo(map);
 	});
 
 	onDestroy(() => {
 		if (tileLayer) tileLayer.remove();
 	});
 </script>
+
+<style>
+	:global(.leaflet-layer-dynamic) {
+		filter: brightness(100%) contrast(100%) saturate(80%);
+	}
+
+	:global(.dark .leaflet-layer-dynamic) {
+		filter: invert(100%) brightness(130%) saturate(0%);
+	}
+</style>

web/src/routes/(user)/map/+page.svelte

@@ -9,15 +9,16 @@
 		isViewingAssetStoreState,
 		viewingAssetStoreState
 	} from '$lib/stores/asset-interaction.store';
-	import { colorTheme } from '$lib/stores/preferences.store';
 
 	export let data: PageData;
 
 	let initialMapCenter: [number, number] = [48, 11];
 
-	if (data.mapMarkers.length) {
-		let firstMarker = data.mapMarkers[0];
-		initialMapCenter = [firstMarker.lat, firstMarker.lon];
+	$: {
+		if (data.mapMarkers.length) {
+			let firstMarker = data.mapMarkers[0];
+			initialMapCenter = [firstMarker.lat, firstMarker.lon];
+		}
 	}
 
 	let viewingAssets: string[] = [];
@@ -47,26 +48,13 @@
 
 	<div class="h-[90%] w-full">
 		<Map latlng={initialMapCenter} zoom={7}>
-			{#if $colorTheme === 'dark'}
-				<TileLayer
-					urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
-					options={{
-						filter: ['invert:100%', 'bright:127%', 'saturate:0%'],
-						attribution:
-							'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-					}}
-				/>
-			{:else}
-				<TileLayer
-					urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
-					options={{
-						filter: ['bright:101%', 'contrast:101%', 'saturate:79%'],
-						attribution:
-							'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-					}}
-				/>
-			{/if}
-
+			<TileLayer
+				allowDarkMode={true}
+				urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
+				options={{
+					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+				}}
+			/>
 			<AssetMarkerCluster
 				markers={data.mapMarkers}
 				on:view={(event) => onViewAssets(event.detail.assets)}