Fixed custom markers appearing on other maps

src/components/maps/AldysMap.astro

@@ -12,7 +12,7 @@ const players = playersData as PlayerMarker
 <div class="world-wrapper">
     <div id="world"></div>
 
-    <MarkerCreator client:load />
+    <MarkerCreator client:load mapKey="aldys" />
 </div>
 
 <script lang="ts" define:vars={{ markers, players }} defer>
@@ -335,7 +335,7 @@ let customMarkersList = []
  * It also sends an event to refresh data on other components that use localStorage
  */
 function saveCustomMarkers() {
-    localStorage.setItem('custom-markers', JSON.stringify(customMarkersList))
+    localStorage.setItem('custom-markers-aldys', JSON.stringify(customMarkersList))
 
     const refreshCustomMarkersEvent = new CustomEvent('refresh-custom-markers', { bubbles: true })
 
@@ -421,7 +421,7 @@ document.addEventListener('add-custom-marker', (e) => {
  * Load all custom markers onto the map
  */
 function loadCustomMarkersFromStorage() {
-    const customMarkersData = JSON.parse(localStorage.getItem('custom-markers'))
+    const customMarkersData = JSON.parse(localStorage.getItem('custom-markers-aldys'))
 
     if (!customMarkersData) return
 

src/components/maps/AldysMapOverlay.astro

@@ -11,7 +11,7 @@ const players = playersData as PlayerMarker
 ---
 
 <div class="world-overlay">
-    <SearchMarkers client:load markers={markers} players={players} />
+    <SearchMarkers client:load markers={markers} players={players} mapKey="aldys" />
 </div>
 
 <style lang="scss">

src/components/maps/BamastMap.astro

@@ -12,7 +12,7 @@ const players = playersData as PlayerMarker
 <div class="world-wrapper">
     <div id="world"></div>
 
-    <MarkerCreator client:load />
+    <MarkerCreator client:load mapKey="bamast" />
 </div>
 
 <script lang="ts" define:vars={{ markers, players }} defer>
@@ -335,7 +335,7 @@ let customMarkersList = []
  * It also sends an event to refresh data on other components that use localStorage
  */
 function saveCustomMarkers() {
-    localStorage.setItem('custom-markers', JSON.stringify(customMarkersList))
+    localStorage.setItem('custom-markers-bamast', JSON.stringify(customMarkersList))
 
     const refreshCustomMarkersEvent = new CustomEvent('refresh-custom-markers', { bubbles: true })
 
@@ -421,7 +421,7 @@ document.addEventListener('add-custom-marker', (e) => {
  * Load all custom markers onto the map
  */
 function loadCustomMarkersFromStorage() {
-    const customMarkersData = JSON.parse(localStorage.getItem('custom-markers'))
+    const customMarkersData = JSON.parse(localStorage.getItem('custom-markers-bamast'))
 
     if (!customMarkersData) return
 

src/components/maps/BamastMapOverlay.astro

@@ -11,7 +11,7 @@ const players = playersData as PlayerMarker
 ---
 
 <div class="world-overlay">
-    <SearchMarkers client:load markers={markers} players={players} />
+    <SearchMarkers client:load markers={markers} players={players} mapKey="bamast" />
 </div>
 
 <style lang="scss">

src/components/maps/overlay/MarkerCreator.vue

@@ -1,12 +1,18 @@
 <script lang="ts" setup>
 import type { MapMarker } from '@/types/Leaflet';
 import { onClickOutside, useCssVar, useLocalStorage, useMouse } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch, defineProps } from 'vue'
 
 const markerMenu = ref<HTMLMenuElement>()
 
 type MenuMode = "editing-marker" | "default"
 
+const props = defineProps<{
+    mapKey?: string
+}>()
+
+const customMarkersKey = props.mapKey ? `custom-markers-${props.mapKey}` : 'custom-markers'
+
 /**
  * Appearing behaviour
  */
@@ -91,14 +97,14 @@ const markerTitleInput = ref<HTMLInputElement>()
 const markerTitleInputError = ref<Error | null>()
 
 // Data from localStorage
-const customMarkersData = useLocalStorage('custom-markers', [])
+const customMarkersData = useLocalStorage(customMarkersKey, [])
 
 // Refresh from localStorage
 onMounted(() => {
-    customMarkersData.value = useLocalStorage('custom-markers', []).value
+    customMarkersData.value = useLocalStorage(customMarkersKey, []).value
 
     document.addEventListener('refresh-custom-markers', () => {
-        customMarkersData.value = useLocalStorage('custom-markers', []).value
+        customMarkersData.value = useLocalStorage(customMarkersKey, []).value
     })
 })
 

src/components/maps/overlay/SearchMarkers.vue

@@ -9,10 +9,13 @@ import SearchMapSwitch from './SearchMapSwitch.vue';
 const props = defineProps<{
     markers: MapMarker[],
     players: PlayerMarker,
+    mapKey?: string
 }>()
 
+const customMarkersKey = props.mapKey ? `custom-markers-${props.mapKey}` : 'custom-markers'
+
 const fixedMarkers = props.markers
-const customMarkersData = useLocalStorage('custom-markers', [])
+const customMarkersData = useLocalStorage(customMarkersKey, [])
 
 const allMarkers = computed(() => {
     return [...fixedMarkers, ...customMarkersData.value]
@@ -142,10 +145,10 @@ function handleCategorySwitch(g: MapMarkerGroup) {
  * Custom Markers handling
  */
  onMounted(() => {
-    customMarkersData.value = useLocalStorage('custom-markers', []).value
+    customMarkersData.value = useLocalStorage(customMarkersKey, []).value
 
     document.addEventListener('refresh-custom-markers', () => {
-        customMarkersData.value = useLocalStorage('custom-markers', []).value
+        customMarkersData.value = useLocalStorage(customMarkersKey, []).value
     })
 })