Added marker display when flown to marker

And also refactored some event listeners

src/components/maps/WorldMap.astro

@@ -42,6 +42,8 @@ const layerGroups = {
     landmarks: L.layerGroup(),
 };
 
+const flyToDuration = 1.2; // In seconds
+
 /**
  * Build all markers and their related info
  */
@@ -114,6 +116,16 @@ for (let i = 0; i < markers.length; i++) {
     }
 
     marker.addTo(layerGroups[m.group])
+
+    /**
+     * Display popup of marker
+     */
+    document.addEventListener(`fly-to-${m.title}`, () => {
+        map.flyTo(coords, 5, { duration: flyToDuration })
+        setTimeout(() => {
+            marker.openPopup()
+        }, flyToDuration * 1000)
+    })
 }
 
 /**
@@ -141,6 +153,16 @@ if ( players ) {
         <p>${players.description}</p>
     `;
     playerMarker.bindPopup(popupContent).openPopup();
+
+    /**
+     * Flying to players
+     */
+    document.addEventListener('fly-to-players', () => {
+        map.flyTo(playersPosition, 5, { duration: flyToDuration })
+        setTimeout(() => {
+            playerMarker.openPopup()
+        }, flyToDuration * 1000)
+    })
 }
 
 map.fitBounds(layer.getBounds());
@@ -190,14 +212,6 @@ const rulerOptions = {
 const measureControl = L.control.measure(rulerOptions);
 measureControl.addTo(map);
 
-/**
- * Flying to points of interests
- */
- document.addEventListener('fly-to', (e) => {
-    const targetCoords = e.detail
-    map.flyTo([targetCoords.y, targetCoords.x], 5)
-})
-
 /**
  * DEBUGS
  */