S4WEB/riot/maMap.riot

<maMap>
  <script>
    export default function maMap() {
      let markers = [];
      let map;

      return {
        onBeforeMount(props, state) {
          // création de la carte Leaflet
          map = L.map("map");

          map.fitWorld();

          // ajout d'un calque de tuiles OpenStreetMap
          L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "© OpenStreetMap contributors",
          }).addTo(map);

          // écouteur pour l'événement "moveend"
          map.on("moveend", this.onMoveEnd);
        },

        onUpdated() {
          if (this.props.records) {
            this.removeMarks();
            this.afficheMarks(this.props.records);
            this.onMoveEnd();
          }
        },

        removeMarks() {
          markers.forEach((marker) => {
            marker.remove();
          });
        },

        afficheMarks(records) {
          records.forEach((item) => {
            var marker = L.marker([item.fields.g_olocalisation_des_formations[0], item.fields.g_olocalisation_des_formations[1]]).addTo(map);
            marker.on('click', () => {
              this.props.afficherModal(item)
          });
            markers.push(marker);
          });
        },

        getVisibleMarkers() {
          let visibleMarkers = [];

          map.eachLayer((layer) => {
            if (layer instanceof L.Marker && map.getBounds().contains(layer.getLatLng())) {
              visibleMarkers.push(layer);
            }
          });

          return visibleMarkers;

        },

        // méthode pour gérer l'événement "moveend"
        onMoveEnd() {
          let visibleMarkers = this.getVisibleMarkers();

            // filtrer les éléments du tableau records qui ont une localisation correspondant à un marker visible
            let recordsWithLoc = this.props.records.filter((record) => {
                let loc = record.fields.g_olocalisation_des_formations;
                for (let marker of visibleMarkers) {
                if (marker.getLatLng().equals(L.latLng(loc[0], loc[1]))) {
                    return true;
                }
                }
                return false;
            });

            let fin=[];

            recordsWithLoc.forEach((forma) => {
                fin.push(forma.recordid)
            })

            this.props.modifyByLoc(fin);
        },
      };
    }
  </script>
</maMap>