Improvement to popup and zoom behavior

This commit is contained in:
Atharva Sawant
2024-12-13 15:27:31 +05:30
parent 40866642c3
commit 29452c5415

View File

@@ -21,6 +21,7 @@ export default {
setup(props) { setup(props) {
const map = ref(null) const map = ref(null)
const trackLayers = ref([]) const trackLayers = ref([])
const hasAutoFitted = ref(false)
const getLocationFromIP = async () => { const getLocationFromIP = async () => {
try { try {
@@ -43,12 +44,15 @@ export default {
} }
const renderTracks = () => { const renderTracks = () => {
// Clear existing track layers // Clear existing track layers and popups
trackLayers.value.forEach(layer => { trackLayers.value.forEach(layer => {
map.value.removeLayer(layer) map.value.removeLayer(layer)
}) })
trackLayers.value = [] trackLayers.value = []
// Close any existing popups
map.value.closePopup()
if (!props.tracks || props.tracks.length === 0) return if (!props.tracks || props.tracks.length === 0) return
const allBounds = [] const allBounds = []
@@ -114,7 +118,7 @@ export default {
}) })
}) })
// Focus on selected track if one is selected, otherwise show all tracks // Focus on selected track if one is selected
if (selectedTrackBounds.length > 0) { if (selectedTrackBounds.length > 0) {
const selectedGroup = L.latLngBounds(selectedTrackBounds) const selectedGroup = L.latLngBounds(selectedTrackBounds)
@@ -124,9 +128,11 @@ export default {
paddingTopLeft: [50, 120], // Extra top padding for popup paddingTopLeft: [50, 120], // Extra top padding for popup
paddingBottomRight: [50, 50] paddingBottomRight: [50, 50]
}) })
} else if (allBounds.length > 0) { } else if (allBounds.length > 0 && !hasAutoFitted.value) {
// Only auto-fit to all tracks on initial load, not when deselecting
const group = new L.featureGroup(trackLayers.value.map(item => item.polyline)) const group = new L.featureGroup(trackLayers.value.map(item => item.polyline))
map.value.fitBounds(group.getBounds(), { padding: [20, 20] }) map.value.fitBounds(group.getBounds(), { padding: [20, 20] })
hasAutoFitted.value = true
} }
} }