Joururi/leim-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added fly to custom markers

Browse Source
This commit is contained in:
Alexis
2024-01-13 00:38:39 +01:00
parent 1018798762
commit 9123fb2263
4 changed files with 110 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/maps/WorldMap.astro
View File

@@ -182,9 +182,9 @@ for (let i = 0; i < markers.length; i++) {
marker.addTo(layerGroups[m.group]) 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 }) map.flyTo(coords, flyToZoomLevel, { duration: flyToDuration })
setTimeout(() => { setTimeout(() => {
marker.openPopup() marker.openPopup()
@@ -331,9 +331,10 @@ function addCustomMarker(markerTitle) {
className: "fade-in" className: "fade-in"
} }
const customMarkerIcon = L.icon(customMarkerIconOptions) const customMarkerIcon = L.icon(customMarkerIconOptions)
const customMarkerCoords = [lat, lon]
// Sticks the custom marker on the map // 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) { if (markerTitle) {
const popupContent = ` const popupContent = `
@@ -342,11 +343,22 @@ function addCustomMarker(markerTitle) {
customMarker.bindPopup(popupContent, { offset: [5, -5] }).openPopup() 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({ customMarkersList.push({
lat, lat,
lon, lon,
title: markerTitle, title: markerTitle,
icon: customMarkerIconOptions icon: customMarkerIconOptions,
group: "custom"
}) })
saveCustomMarkers() saveCustomMarkers()
@@ -371,7 +383,8 @@ function loadCustomMarkersFromStorage() {
for (let i = 0; i < customMarkersData.length; i++) { for (let i = 0; i < customMarkersData.length; i++) {
const m = customMarkersData[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) { if (m.title) {
const popupContent = ` const popupContent = `
@@ -379,6 +392,16 @@ function loadCustomMarkersFromStorage() {
` `
savedMarker.bindPopup(popupContent, { offset: [5, -5] }) 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() loadCustomMarkersFromStorage()

8
src/components/maps/overlay/MarkerCreator.vue
View File

@@ -110,7 +110,13 @@ onClickOutside(markerMenu, handleClickOutside, { ignore: [markerModal] })
function handleAddCustomMarker() { function handleAddCustomMarker() {
if (!markerTitle.value) return 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) addCustomMarker.value?.dispatchEvent(addCustomMarkerEvent)
hideMenu() hideMenu()

10
src/components/maps/overlay/SearchMarkers.vue
View File

@@ -105,10 +105,12 @@ onUpdated(() => {
markerBtnRefs.forEach((btn) => { markerBtnRefs.forEach((btn) => {
const { toMarker } = (btn as HTMLButtonElement).dataset 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 * It should probably be handled by a store system, but nanostores doesn't mesh well
*/ */
onMounted(() => { onMounted(() => {
customMarkersData.value = useLocalStorage('custom-markers', []).value
document.addEventListener('refresh-custom-markers', () => { document.addEventListener('refresh-custom-markers', () => {
customMarkersData.value = useLocalStorage('custom-markers', []).value customMarkersData.value = useLocalStorage('custom-markers', []).value
}) })

138
src/components/maps/overlay/SearchMarkersTags.vue
View File

@@ -18,79 +18,77 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
<template> <template>
<menu class="tag-list"> <menu class="tag-list">
<TransitionGroup name="tag-menu"> <li>
<li> <button
<button @click="emitCategorySwitch('quests')"
@click="emitCategorySwitch('quests')" class="red"
class="red" :class="{
:class="{ 'active': currentSearchMode === 'quests'
'active': currentSearchMode === 'quests' }"
}" >
> <span class="icon">
<span class="icon"> <i v-if="currentSearchMode === 'quests'" class="ph-bold ph-check"></i>
<i v-if="currentSearchMode === 'quests'" class="ph-bold ph-check"></i> <i v-else class="ph-fill ph-flag-banner"></i>
<i v-else class="ph-fill ph-flag-banner"></i> </span>
</span> <span class="label">
<span class="label"> Quêtes
Quêtes </span>
</span> </button>
</button> </li>
</li>
<li> <li>
<button <button
@click="emitCategorySwitch('capitals')" @click="emitCategorySwitch('capitals')"
class="blue" class="blue"
:class="{ :class="{
'active': currentSearchMode === 'capitals' 'active': currentSearchMode === 'capitals'
}" }"
> >
<span class="icon"> <span class="icon">
<i v-if="currentSearchMode === 'capitals'" class="ph-bold ph-check"></i> <i v-if="currentSearchMode === 'capitals'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-castle-turret"></i> <i v-else class="ph-fill ph-castle-turret"></i>
</span> </span>
<span class="label"> <span class="label">
Capitales Capitales
</span> </span>
</button> </button>
</li> </li>
<li> <li>
<button <button
@click="emitCategorySwitch('landmarks')" @click="emitCategorySwitch('landmarks')"
class="orange" class="orange"
:class="{ :class="{
'active': currentSearchMode === 'landmarks' 'active': currentSearchMode === 'landmarks'
}" }"
> >
<span class="icon"> <span class="icon">
<i v-if="currentSearchMode === 'landmarks'" class="ph-bold ph-check"></i> <i v-if="currentSearchMode === 'landmarks'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-lighthouse"></i> <i v-else class="ph-fill ph-lighthouse"></i>
</span> </span>
<span class="label"> <span class="label">
Points d'intérêt Points d'intérêt
</span> </span>
</button> </button>
</li> </li>
<li v-if="customMarkers.length > 0"> <li>
<button <button
@click="emitCategorySwitch('custom')" @click="emitCategorySwitch('custom')"
class="purple" class="purple"
:class="{ :class="{
'active': currentSearchMode === 'custom' 'active': currentSearchMode === 'custom'
}" }"
> >
<span class="icon"> <span class="icon">
<i v-if="currentSearchMode === 'custom'" class="ph-bold ph-check"></i> <i v-if="currentSearchMode === 'custom'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-user-circle"></i> <i v-else class="ph-fill ph-user-circle"></i>
</span> </span>
<span class="label"> <span class="label">
Personnels Personnels
</span> </span>
</button> </button>
</li> </li>
</TransitionGroup>
</menu> </menu>
</template> </template>