74 lines
1.8 KiB
Plaintext
74 lines
1.8 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.refreshMarkers()
|
|
|
|
// important : Leaflet calcule parfois mal la taille au montage
|
|
setTimeout(() => {
|
|
this.map.invalidateSize()
|
|
}, 100)
|
|
},
|
|
|
|
onUpdated() {
|
|
this.refreshMarkers()
|
|
|
|
if (this.map) {
|
|
setTimeout(() => {
|
|
this.map.invalidateSize()
|
|
}, 50)
|
|
}
|
|
},
|
|
|
|
onBeforeUnmount() {
|
|
if (this.map) {
|
|
this.map.remove()
|
|
this.map = null
|
|
}
|
|
},
|
|
|
|
refreshMarkers() {
|
|
if (!this.map || !this.markersLayer) {
|
|
return
|
|
}
|
|
|
|
this.markersLayer.clearLayers()
|
|
|
|
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)
|
|
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</map-view> |