parcoursup/parcoursup-app/src/components/carte-formations.riot

<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>