53 lines
1.3 KiB
Plaintext
53 lines
1.3 KiB
Plaintext
<map-view>
|
|
<div class="map-box">
|
|
<h3>Carte des formations</h3>
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
onMounted() {
|
|
this.map = L.map(this.root.querySelector('#map')).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()
|
|
},
|
|
|
|
onUpdated() {
|
|
this.refreshMarkers()
|
|
},
|
|
|
|
refreshMarkers() {
|
|
if (!this.map || !this.markersLayer) {
|
|
return
|
|
}
|
|
|
|
this.markersLayer.clearLayers()
|
|
|
|
const points = []
|
|
|
|
for (let i = 0; i < this.props.results.length; i++) {
|
|
const f = this.props.results[i]
|
|
|
|
if (f.latitude && f.longitude) {
|
|
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> |