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
  */

src/components/maps/overlay/SearchMarkers.vue

@@ -9,7 +9,7 @@ import { computed, onMounted, ref, onUpdated } from 'vue';
 $world.listen(() => {})
 await allTasks()
 
-const { markers, players } = useStore($world).value
+const { markers } = useStore($world).value
 
 // Search functions
 const qInput = ref()
@@ -23,10 +23,10 @@ const shouldBeActive = computed(() => q.value.length > 0)
 
 const q = ref<string>("")
 
-const filteredMarkers = computed(() => {
-    return markers?.filter(m => {
 const unifier = new RegExp(/[^a-zA-Z0-9\-\'']/g)
 
+const filteredMarkers = computed(() => {
+    return markers?.filter(m => {
         const queryString = new String(q.value).replace(unifier, "").toLocaleLowerCase()
         const hitTitle = m.title.replace(unifier, "").toLocaleLowerCase().includes(queryString)
         const hitDesc = m.description?.replace(unifier, "").toLocaleLowerCase().includes(queryString)
@@ -54,7 +54,7 @@ whenever(eraseKeyCombo, () => {
  */
 onMounted(() => {
     const playerBtnRef = document.querySelector('[data-to-players]')
-    const flyToPlayers = new CustomEvent('fly-to', { bubbles: true, detail: players.markerCoords })
+    const flyToPlayers = new CustomEvent(`fly-to-players`, { bubbles: true })
 
     playerBtnRef?.addEventListener('click', () => {
         playerBtnRef.dispatchEvent(flyToPlayers)
@@ -71,12 +71,9 @@ onUpdated(() => {
     markerBtnRefs.forEach((btn) => {
         const { toMarker } = (btn as HTMLButtonElement).dataset
         if (!toMarker) return
-        const rawCoords = toMarker?.split(',')
-        const detail = {
-            x: rawCoords[0],
-            y: rawCoords[1]
-        }
-        const flyToMarker = new CustomEvent('fly-to', { bubbles: true, detail })
+        const flyToMarker = new CustomEvent(`fly-to-${toMarker}`, { bubbles: true })
+
+        console.log(flyToMarker)
 
         btn.addEventListener('click', () => btn.dispatchEvent(flyToMarker))
     })
@@ -96,7 +93,7 @@ onUpdated(() => {
 
         <ul class="search-results" v-if="shouldBeActive">
             <li v-for="m in filteredMarkers?.slice(0, 10)" :key="m.title">
-                <button class="search-item" :data-to-marker="`${m.markerCoords.x},${m.markerCoords.y}`" tabindex="0" :title="`Aller à ${m.title}`">
+                <button class="search-item" :data-to-marker="m.title" tabindex="0" :title="`Aller à ${m.title}`">
                     <span class="title">{{ m.title }}</span>
                     <span class="desc">{{ m.description }}</span>
                 </button>