From c2e9fe0aac69bf64000214f72e5f44ffadcfe2ff Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Mon, 8 May 2023 21:05:06 -0500
Subject: [PATCH] feat(web): improve map styling and interaction (#2399)

* improve map styling and interaction

* Update style
---
 .../leaflet/asset-marker-cluster.svelte       | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte b/web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
index 15475733e2..7784694651 100644
--- a/web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
+++ b/web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
@@ -28,7 +28,8 @@
 					iconAnchor: [12, 41],
 					popupAnchor: [1, -34],
 					tooltipAnchor: [16, -28],
-					shadowSize: [41, 41]
+					shadowSize: [41, 41],
+					className: 'asset-marker-icon'
 				})
 			});
 
@@ -67,6 +68,16 @@
 			dispatch('view', { assets: ids });
 		});
 
+		cluster.on('clustermouseover', (event: LeafletEvent) => {
+			if (event.sourceTarget.getChildCount() <= 10) {
+				event.sourceTarget.spiderfy();
+			}
+		});
+
+		cluster.on('clustermouseout', (event: LeafletEvent) => {
+			event.sourceTarget.unspiderfy();
+		});
+
 		for (let marker of markers) {
 			const leafletMarker = new AssetMarker(marker);
 
@@ -91,7 +102,7 @@
 
 <style>
 	:global(.leaflet-marker-icon) {
-		border-radius: 25%;
+		border-radius: 50%;
 	}
 
 	:global(.marker-cluster) {
@@ -99,6 +110,15 @@
 		border-radius: 20px;
 	}
 
+	:global(.asset-marker-icon) {
+		border-radius: 50%;
+		object-fit: cover;
+		border: 1px solid rgb(69, 80, 169);
+		box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
+			rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
+			rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
+	}
+
 	:global(.marker-cluster div) {
 		width: 40px;
 		height: 40px;
@@ -110,7 +130,16 @@
 		font-weight: bold;
 
 		background-color: rgb(236, 237, 246);
+		border: 1px solid rgb(69, 80, 169);
+
 		color: rgb(69, 80, 169);
+		box-shadow: rgba(5, 5, 122, 0.12) 0px 2px 4px 0px, rgba(4, 4, 230, 0.32) 0px 2px 16px 0px;
+	}
+
+	:global(.dark .marker-cluster div) {
+		background-color: #adcbfa;
+		border: 1px solid black;
+		color: black;
 	}
 
 	:global(.marker-cluster span) {