Added player popup

src/assets/scss/_leaflet.scss

@@ -16,21 +16,20 @@
                     .title {
                         display: block;
                         font-weight: 600;
-                        text-underline-offset: 2px;
-                        text-decoration: underline;
                     }
 
                     strong.title {
                         color: #16a34a;
                     }
 
-                    a.title:hover {
-                        text-decoration: none;
-                        color: #16a34a;
-                    }
-
-                    p {
+                    a.title {
+                        text-underline-offset: 2px;
+                        text-decoration: underline;
 
+                        &:hover {
+                            text-decoration: none;
+                            color: #16a34a;
+                        }
                     }
 
                     > * + * {

src/components/maps/WorldMap.astro

@@ -133,6 +133,14 @@ if ( players ) {
 
     const playerMarker = L.marker(playersPosition, { icon: playerIcon }).addTo(map)
     playerMarker.addTo(layerGroups['players'])
+
+    const popupContent = `
+        <strong class="title">
+            ${players.title}
+        </strong>
+        <p>${players.description}</p>
+    `;
+    playerMarker.bindPopup(popupContent).openPopup();
 }
 
 map.fitBounds(layer.getBounds());

src/components/maps/worldStore.ts

@@ -1,9 +1,9 @@
 import { deepMap, onMount, task } from 'nanostores'
-import type { MapMarker } from '../../types/Leaflet';
+import type { MapMarker, PlayerMarker } from '../../types/Leaflet';
 
 export const $world = deepMap({
     markers: [] as MapMarker[],
-    players: {} as MapMarker,
+    players: {} as PlayerMarker,
 })
 
 // Fetch initial data

src/pages/api/data/players.markers.ts

@@ -6,4 +6,5 @@ export const playerPosition: PlayerMarker = {
         x: 162.05197
     },
     title: "L'Éclipse",
+    description: "Tara Belyus, Vascylly et Adol Sulvan livrent 3 condamnés à Handany."
 }