101 lines
2.5 KiB
Plaintext
101 lines
2.5 KiB
Plaintext
<map-view>
|
|
<div class="map-box">
|
|
<h3>Carte des formations</h3>
|
|
<div class="map" ref="map"></div>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
onMounted() {
|
|
const mapElement = this.$('div[ref="map"]')
|
|
|
|
this.map = L.map(mapElement).setView([46.8, 2.5], 6)
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(this.map)
|
|
|
|
this.markersLayer = L.layerGroup().addTo(this.map)
|
|
this.markersById = {}
|
|
this.refreshMarkers()
|
|
|
|
setTimeout(() => {
|
|
this.map.invalidateSize()
|
|
}, 100)
|
|
|
|
// Exposer globalement pour que result-list puisse appeler
|
|
window.mapFocus = (id) => {
|
|
this.focusFormation(id)
|
|
}
|
|
},
|
|
|
|
onUpdated() {
|
|
this.refreshMarkers()
|
|
|
|
if (this.map) {
|
|
setTimeout(() => {
|
|
this.map.invalidateSize()
|
|
}, 50)
|
|
}
|
|
},
|
|
|
|
onBeforeUnmount() {
|
|
if (this.map) {
|
|
this.map.remove()
|
|
this.map = null
|
|
}
|
|
window.mapFocus = null
|
|
},
|
|
|
|
refreshMarkers() {
|
|
if (!this.map || !this.markersLayer) {
|
|
return
|
|
}
|
|
|
|
this.markersLayer.clearLayers()
|
|
this.markersById = {}
|
|
|
|
const points = []
|
|
const results = this.props.results || []
|
|
|
|
for (let i = 0; i < results.length; i++) {
|
|
const f = results[i]
|
|
|
|
if (f.latitude != null && f.longitude != null) {
|
|
const marker = L.marker([f.latitude, f.longitude])
|
|
marker.bindPopup('<b>' + f.nom + '</b><br>' + f.ville)
|
|
marker.addTo(this.markersLayer)
|
|
|
|
this.markersById[f.id] = marker
|
|
points.push([f.latitude, f.longitude])
|
|
}
|
|
}
|
|
|
|
if (points.length > 0) {
|
|
this.map.fitBounds(points, { padding: [20, 20] })
|
|
} else {
|
|
this.map.setView([46.8, 2.5], 6)
|
|
}
|
|
},
|
|
|
|
focusFormation(id) {
|
|
var marker = this.markersById[id]
|
|
|
|
if (marker && this.map) {
|
|
// Scroll vers la carte
|
|
var mapEl = this.$('div[ref="map"]')
|
|
if (mapEl) {
|
|
mapEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
}
|
|
|
|
// Zoom sur le marqueur et ouvrir le popup
|
|
setTimeout(() => {
|
|
this.map.setView(marker.getLatLng(), 13, { animate: true })
|
|
marker.openPopup()
|
|
}, 400)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</map-view>
|