Added fly to custom markers

src/components/maps/WorldMap.astro

@@ -182,9 +182,9 @@ for (let i = 0; i < markers.length; i++) {
     marker.addTo(layerGroups[m.group])
 
     /**
-     * Display popup of marker
+     * Fly to specific marker
      */
-    document.addEventListener(`fly-to-${m.title}`, () => {
+    document.addEventListener(`fly-to-${m.title}`, (e) => {
         map.flyTo(coords, flyToZoomLevel, { duration: flyToDuration })
         setTimeout(() => {
             marker.openPopup()
@@ -331,9 +331,10 @@ function addCustomMarker(markerTitle) {
         className: "fade-in"
     }
     const customMarkerIcon = L.icon(customMarkerIconOptions)
+    const customMarkerCoords = [lat, lon]
 
     // Sticks the custom marker on the map
-    const customMarker = L.marker([lat, lon], { icon: customMarkerIcon }).addTo(map)
+    const customMarker = L.marker(customMarkerCoords, { icon: customMarkerIcon }).addTo(map)
 
     if (markerTitle) {
         const popupContent = `
@@ -342,11 +343,22 @@ function addCustomMarker(markerTitle) {
         customMarker.bindPopup(popupContent, { offset: [5, -5] }).openPopup()
     }
 
+    /**
+     * Register event listener to fly to this custom marker
+     */
+    document.addEventListener(`fly-to-${markerTitle}`, (e) => {
+        map.flyTo(customMarkerCoords, flyToZoomLevel, { duration: flyToDuration })
+        setTimeout(() => {
+            marker.openPopup()
+        }, flyToDuration * 1000)
+    })
+
     customMarkersList.push({
         lat,
         lon,
         title: markerTitle,
-        icon: customMarkerIconOptions
+        icon: customMarkerIconOptions,
+        group: "custom"
     })
 
     saveCustomMarkers()
@@ -371,7 +383,8 @@ function loadCustomMarkersFromStorage() {
     for (let i = 0; i < customMarkersData.length; i++) {
         const m = customMarkersData[i];
 
-        const savedMarker = L.marker([m.lat, m.lon], { icon: L.icon(m.icon) }).addTo(map)
+        const savedMarkerCoords = [m.lat, m.lon]
+        const savedMarker = L.marker(savedMarkerCoords, { icon: L.icon(m.icon) }).addTo(map)
 
         if (m.title) {
             const popupContent = `
@@ -379,6 +392,16 @@ function loadCustomMarkersFromStorage() {
             `
             savedMarker.bindPopup(popupContent, { offset: [5, -5] })
         }
+
+        /**
+         * Register event listener to fly to this custom marker
+         */
+        document.addEventListener(`fly-to-${m.title}`, (e) => {
+            map.flyTo(savedMarkerCoords, flyToZoomLevel, { duration: flyToDuration })
+            setTimeout(() => {
+                savedMarker.openPopup()
+            }, flyToDuration * 1000)
+        })
     }
 }
 loadCustomMarkersFromStorage()

src/components/maps/overlay/MarkerCreator.vue

@@ -110,7 +110,13 @@ onClickOutside(markerMenu, handleClickOutside, { ignore: [markerModal] })
 function handleAddCustomMarker() {
     if (!markerTitle.value) return
 
-    const addCustomMarkerEvent = new CustomEvent(`add-custom-marker`, { bubbles: true, detail: { title: markerTitle.value }})
+    const addCustomMarkerEvent = new CustomEvent(
+        `add-custom-marker`,
+        {
+            bubbles: true,
+            detail: { title: markerTitle.value }
+        }
+    )
 
     addCustomMarker.value?.dispatchEvent(addCustomMarkerEvent)
     hideMenu()

src/components/maps/overlay/SearchMarkers.vue

@@ -105,10 +105,12 @@ onUpdated(() => {
 
     markerBtnRefs.forEach((btn) => {
         const { toMarker } = (btn as HTMLButtonElement).dataset
-        if (!toMarker) return
-        const flyToMarker = new CustomEvent(`fly-to-${toMarker}`, { bubbles: true })
 
-        btn.addEventListener('click', () => btn.dispatchEvent(flyToMarker))
+        if (!toMarker) return
+
+        const flyToEvent = new CustomEvent(`fly-to-${toMarker}`, { bubbles: true })
+
+        btn.addEventListener('click', () => btn.dispatchEvent(flyToEvent))
     })
 })
 
@@ -171,6 +173,8 @@ function resetAllFields(actionAfter?: "focusAfter") {
  * It should probably be handled by a store system, but nanostores doesn't mesh well 
  */
 onMounted(() => {
+    customMarkersData.value = useLocalStorage('custom-markers', []).value
+
     document.addEventListener('refresh-custom-markers', () => {
         customMarkersData.value = useLocalStorage('custom-markers', []).value
     })

src/components/maps/overlay/SearchMarkersTags.vue

@@ -18,7 +18,6 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
 
 <template>
     <menu class="tag-list">
-        <TransitionGroup name="tag-menu">
         <li>
             <button
                 @click="emitCategorySwitch('quests')"
@@ -73,7 +72,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
             </button>
         </li>
 
-            <li v-if="customMarkers.length > 0">
+        <li>
             <button
                 @click="emitCategorySwitch('custom')"
                 class="purple"
@@ -90,7 +89,6 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
                 </span>
             </button>
         </li>
-        </TransitionGroup>
     </menu>
 </template>