Added custom marker saving

src/components/maps/WorldMap.astro

@@ -193,7 +193,6 @@ for (let i = 0; i < markers.length; i++) {
  * Add player's position marker
  */
 if ( players && Object.keys(players).length > 0 ) {
-    console.log(players)
     const playersPosition =[
         convertYToScale(players.markerCoords.y),
         convertXToScale(players.markerCoords.x)
@@ -288,16 +287,76 @@ map.setMaxBounds(
 )
 
 /**
- * SVG LAYERS
+ * CUSTOM MARKERS
  */
-// const svgElement = document.getElementById('svg-overlay')
-// const latLngBounds = L.latLngBounds([baseTileLayer.getBounds().getSouth() + 0.9875, baseTileLayer.getBounds().getWest()], [baseTileLayer.getBounds().getNorth(), baseTileLayer.getBounds().getEast() - 1.675]);
 
-// const svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
-//     opacity: 0.25,
-//     interactive: true,
-//     zIndex: 10,
-// }).addTo(map);
+// List to be persisted in localStorage
+let customMarkersList = []
+
+function saveCustomMarkers() {
+    localStorage.setItem('custom-markers', JSON.stringify(customMarkersList))
+}
+
+// Stores last map coords on context
+map.addEventListener('contextmenu', storeLastHeldPositions)
+map.addEventListener('click', storeLastHeldPositions)
+
+function storeLastHeldPositions(e) {
+    localStorage.setItem('lastHeldXPosition', e.latlng.lng)
+    localStorage.setItem('lastHeldYPosition', e.latlng.lat)
+}
+
+/**
+ * Function that creates custom markers and places them on the map
+ */
+function addCustomMarker() {
+    const lon = Number(localStorage.getItem('lastHeldXPosition'))
+    const lat = Number(localStorage.getItem('lastHeldYPosition'))
+
+    const customMarkerIconOptions = {
+        iconUrl: `icon/push-pin.png`,
+        shadowUrl: `icon/push-pin-shadow.png`,
+        iconSize: [20, 20],
+        shadowSize: [30, 25],
+        iconAnchor: [0, 13],
+        shadowAnchor: [0, 15],
+        className: "fade-in"
+    }
+    const customMarkerIcon = L.icon(customMarkerIconOptions)
+
+    // Sticks the custom marker on the map
+    const customMarker = L.marker([lat, lon], { icon: customMarkerIcon }).addTo(map)
+    customMarkersList.push({
+        lat,
+        lon,
+        icon: customMarkerIconOptions
+    })
+
+    saveCustomMarkers()
+}
+
+// Listeners for the custom add marker event
+// See MarkerCreator.vue component for more details
+document.addEventListener('add-custom-marker', addCustomMarker)
+
+/**
+ * Load all custom markers onto the map
+ */
+function loadCustomMarkersFromStorage() {
+    const customMarkersData = JSON.parse(localStorage.getItem('custom-markers'))
+
+    if (!customMarkersData) return
+
+    customMarkersList = customMarkersData
+
+    for (let i = 0; i < customMarkersData.length; i++) {
+        const m = customMarkersData[i];
+        console.log(m)
+
+        L.marker([m.lat, m.lon], { icon: L.icon(m.icon) }).addTo(map)
+    }
+}
+loadCustomMarkersFromStorage()
 
 /**
  * UTILITIES

src/components/maps/overlay/MarkerCreator.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onClickOutside, onLongPress, useCssVar, useMouse, useTimeout, useTimeoutFn } from '@vueuse/core';
+import { onClickOutside, onLongPress, useCssVar, useLocalStorage, useMouse, useTimeout, useTimeoutFn } from '@vueuse/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 const markerMenu = ref<HTMLMenuElement>();
@@ -9,39 +9,34 @@ const markerMenu = ref<HTMLMenuElement>();
  */
 const isActive = ref<Boolean>(false)
 
-const hasBeenLongPressed = ref<Boolean>(false)
-const longPressDelay = 500
-const longPressOver = 1100
+// const hasBeenLongPressed = ref<Boolean>(false)
+// const longPressDelay = 500
+// const longPressOver = 1000
 
-const longPressTimer = useTimeoutFn(() => {
-    hasBeenLongPressed.value = false
-}, longPressOver)
+// const longPressTimer = useTimeoutFn(() => {
+//     hasBeenLongPressed.value = false
+// }, longPressOver)
 
 onMounted(() => {
     window.addEventListener('contextmenu', handleContextMenu)
-    onLongPress(document.documentElement, handleLongPress, { delay: longPressDelay })
+    // onLongPress(document.documentElement, handleLongPress, { delay: longPressDelay })
     onClickOutside(markerMenu, handleClickOutside)
 })
 
-function handleLongPress(e: Event) {
-    console.log(e)
+// function handleLongPress(e: Event) {
+//     hasBeenLongPressed.value = true
+//     longPressTimer.start()
 
-    hasBeenLongPressed.value = true
-    longPressTimer.start()
-
-    showMenu()
-}
+//     showMenu()
+// }
 
 function handleClickOutside(e: Event) {
-    console.log(e)
-
-    if (!hasBeenLongPressed.value) {
+    // if (!hasBeenLongPressed.value) {
         hideMenu()
-    }
+    // }
 }
 
 function handleContextMenu(e: Event) {
-    console.log(e)
     e.preventDefault()
 
     showMenu()
@@ -71,7 +66,6 @@ watch( isActive, (o, n) => {
 })
 
 function updateMenuPosition() {
-    storeMousePosition()
     updateCSSVars()
 }
 
@@ -81,23 +75,28 @@ function updateCSSVars() {
 }
 
 /**
- * Storing data and logic
+ * Adding custom marker
  */
-const lastHeldXPosition = ref<number>(0)
-const lastHeldYPosition = ref<number>(0)
+const lastHeldXPosition = useLocalStorage('lastHeldXPosition', 0);
+const lastHeldYPosition = useLocalStorage('lastHeldYPosition', 0);
 
-function storeMousePosition() {
-    lastHeldXPosition.value = mouse.x.value
-    lastHeldYPosition.value = mouse.y.value
-}
+const addCustomMarker = ref<HTMLButtonElement>();
+
+onMounted(() => {
+    const addCustomMarkerEvent = new CustomEvent(`add-custom-marker`, { bubbles: true })
+
+    addCustomMarker.value?.addEventListener('click', () => {
+        addCustomMarker.value?.dispatchEvent(addCustomMarkerEvent)
+    })
+})
 </script>
 
 <template>
     <Transition>
         <menu v-show="isActive" ref="markerMenu">
             <li>
-                <button>
-                    Add a marker {{ lastHeldXPosition }} {{ lastHeldYPosition }}
+                <button ref="addCustomMarker">
+                    Ajouter un marqueur personnel
                 </button>
             </li>
         </menu>