camille
86 lines
1.8 KiB
Plaintext
86 lines
1.8 KiB
Plaintext
<carte-formations>
|
|
|
|
<div id="carte" style="height: 500px; width: 600px;"></div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import L from 'leaflet'
|
|
import 'leaflet/dist/leaflet.css'
|
|
import markerIcon from 'leaflet/dist/images/marker-icon.png'
|
|
import markerShadow from 'leaflet/dist/images/marker-shadow.png'
|
|
|
|
|
|
|
|
export default
|
|
{
|
|
|
|
onMounted()
|
|
{
|
|
|
|
this.carte = L.map('carte').setView([46.603354, 1.888334], 6)
|
|
|
|
L.tileLayer
|
|
(
|
|
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
{
|
|
attribution: '© OpenStreetMap'
|
|
}
|
|
).addTo(this.carte)
|
|
|
|
|
|
delete L.Icon.Default.prototype._getIconUrl
|
|
|
|
L.Icon.Default.mergeOptions
|
|
(
|
|
{
|
|
iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
|
|
}
|
|
)
|
|
|
|
|
|
|
|
},
|
|
|
|
onUpdated()
|
|
{
|
|
|
|
|
|
this.carte.eachLayer
|
|
(
|
|
layer =>
|
|
{
|
|
if (layer instanceof L.Marker)
|
|
{
|
|
this.carte.removeLayer(layer)
|
|
}
|
|
}
|
|
)
|
|
|
|
this.props.formations?.forEach
|
|
(
|
|
f =>
|
|
{
|
|
const lat = f.g_olocalisation_des_formations?.lat
|
|
const lon = f.g_olocalisation_des_formations?.lon
|
|
|
|
if (lat && lon)
|
|
{
|
|
L.marker([lat, lon]).addTo(this.carte).bindPopup
|
|
(
|
|
`
|
|
<b>${f.fil_lib_voe_acc}</b><br>
|
|
${f.g_ea_lib_vx}<br>
|
|
${f.ville_etab}
|
|
`
|
|
)
|
|
}
|
|
}
|
|
)
|
|
}
|
|
}
|
|
</script>
|
|
</carte-formations> |