fix: sharper markers, marker color scheme

app/routes/explore.tsx

@@ -33,6 +33,8 @@
 	LngLatLike,
 	MapLayerMouseEvent,
 	MapLibreEvent,
+	MapLibreMap,
+	StyleImageMetadata,
 	type FilterSpecification,
 } from 'maplibre-gl'
 import BoxMarker from '~/components/map/layers/cluster/box-marker'
@@ -471,48 +473,59 @@
 	}
 
 	const loadImageIfNotExists = async (
-		map: MapInstance,
+		map: MapLibreMap,
 		id: string,
 		url: string,
+		options?: Partial<StyleImageMetadata>,
 	) => {
-		if (!map.getImage(id)) {
-			const imgResponse = await map.loadImage(url)
-			map.addImage(id, imgResponse.data)
+		if (map.hasImage(id)) return;
+
+		const image = await map.loadImage(url);
+
+		if (!map.hasImage(id)) {
+			map.addImage(id, image.data, options);
 		}
-	}
+	};
 
 	const handleMapLoad = async (e: MapLibreEvent) => {
 		const map = e.target
+		const retinaImageOptions = { pixelRatio: 2 };
 		await Promise.allSettled([
 			loadImageIfNotExists(
 				map,
 				'osem-device-active',
 				'/img/device_marker_active.png',
+				retinaImageOptions
 			),
 			loadImageIfNotExists(
 				map,
 				'osem-device-inactive',
 				'/img/device_marker_inactive.png',
+				retinaImageOptions
 			),
 			loadImageIfNotExists(
 				map,
 				'osem-device-old',
 				'/img/device_marker_old.png',
+				retinaImageOptions
 			),
 			loadImageIfNotExists(
 				map,
 				'osem-mobile-active',
 				'/img/mobile_marker_active.png',
+				retinaImageOptions
 			),
 			loadImageIfNotExists(
 				map,
 				'osem-mobile-inactive',
 				'/img/mobile_marker_inactive.png',
+				retinaImageOptions
 			),
 			loadImageIfNotExists(
 				map,
 				'osem-mobile-old',
 				'/img/mobile_marker_old.png',
+				retinaImageOptions
 			),
 		])
 	}
@@ -520,8 +533,7 @@
 	return (
 		<div className="h-full w-full">
 			<MapProvider>
 				<MapHeader
-					user={user}
 					devices={devices}
 					measurementCount={measurementCount}
 					onHomeClick={handleHomeClick}