VueJS Leaflet 'moveend' fires multiple times

Viewed 20

Ask for help from the community. For two weeks I can not overcome the problem with repeated firing of 'mooveend' in the project. I have tried all the advice given here. Here's what I've read and researched already, but it didn't work for me. This is one of the tips: moveend event fired many times when page is load with Leaflet

<template>
  <div id="map"></div>
</template>

<script>
export default {
  name: "ObjectMapView",
  props: ['coordinate'],

  data: function () {
    return {
      map: null,
      addressPoints: null,
      markers: null,
    }
  },

  mounted: function() {
    this.initializedMap();
  },

  watch: {
    coordinate: function (val) {
      this.run();
    }
  },

  methods: {

    initializedMap: function () {
      this.map = L.map('map').setView([52.5073390000,5.4742833000], 13);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(this.map);

      this.markers = L.markerClusterGroup();
    },

    run: function () {
      var map = this.map;
      var markers = this.markers;
      var getAllObjects = this.coordinate;
      var getBoundsMarkers;

      //Clearing Layers When Switching a Filter
      markers.clearLayers();

      this.addressPoints = getAllObjects.map(function (latlng){
          return [latlng.latitude, latlng.longitude, latlng.zip, latlng.object_id, latlng.archived];
      });
      map.addLayer(markers);

      //We give to the map only those coordinates that are in the zone of visibility of the map during the first

       getBoundsMarkers =  getAllObjects.filter((coord) => {
        if(!coord.latitude && !coord.longitude){
          return false;
        }
        return map.getBounds().contains(L.latLng(coord.latitude, coord.longitude));
      });

      /*
        Responds to changing the boundaries of the map visibility zone and
        transmits a list of coordinates that are in the visibility zone
       */
console.log('getAllObjects_1', getAllObjects);
      map.on('moveend', function() {
console.log('moveend');
console.log('getAllObjects_2', getAllObjects);
        getBoundsMarkers =  getAllObjects.filter((coord) => {
          if(!coord.latitude && !coord.longitude){
            return false;
          }
          return map.getBounds().contains(L.latLng(coord.latitude, coord.longitude));

        });
        eventHub.$emit('sendMarkers', getBoundsMarkers);
      });

      // In the loop, we iterate over the coordinates and give them to the map

      for (var i = 0; i < this.addressPoints.length; i++) {
        var a = this.addressPoints[i];
        var title = '<a href="/objects/' + a[3] + '" target="_blank">' + a[2] + '</a>'; //bubble
        var marker = L.marker(new L.LatLng(a[0], a[1]), {
          title: title
        });
        marker.bindPopup(title);
        markers.addLayer(marker);
      }

      eventHub.$emit('sendMarkers', getBoundsMarkers);
    }

  }
}
</script>

<style scoped>
  #map {
    width: 97%;
    height: 100%;
  }
</style>
1 Answers

I figured it out myself. The 'zoomend' and 'dragend' option didn't work for me. I searched a lot for a suitable option and realized that the "moveend" event fires several times because this event is created every time you move the map. Therefore it is necessary to stop this event. I got out of the situation in this way. Immediately after the map was initialized, I wrote:

map.off('moveend');

and for me it worked. Now it works fine. I will be very happy if this is useful to someone.

Related