D
D
danilr2019-04-10 08:23:53
Vue.js
danilr, 2019-04-10 08:23:53

How to update markers and popups on a 2GIS map?

There is an array of data that I receive and immediately in mounted() I display markers and popups on this array. If this array changes (I filter), then how to re-initialize these markers and popups (well, or weed out unnecessary ones)?

mounted() {
    this.markers = DG.featureGroup();
    this.popups = DG.featureGroup();

    this.map = DG.map("map", {
      center: [54.98, 82.89],
      zoom: 13,
      minZoom: 7,
      zoomControl: false,
      fullscreenControl: false
    });
      this.dataRequest.then(response => {
        this.getFilterRooms.forEach(residential => {
          let myDivIcon = DG.divIcon({
            iconSize: [30, 30],
            className: "marker-custom",
            html: this.setMiniMarker(residential)
          });

          this.popupMap = DG.popup({
            className: "test-name",
            closeButton: false,
            offset: DG.point(0, 1),
            setZoomMarker: false
          }).setContent(this.setPopupMarker(residential));

          this.coordinates = [residential.latitude, residential.longitude];
          DG.marker(this.coordinates, { icon: myDivIcon })
            .addTo(this.markers)
            .bindPopup(this.popupMap);
        });
        this.markers.addTo(this.map);
        this.map.fitBounds(this.markers.getBounds());
        this.markers.on("click", event => {
          //при наведении.mouseover, click на маркер
          if (event.originalEvent.target.closest("[data-id]")) {
            let residentialId = Number(
              event.originalEvent.target.closest("[data-id]").dataset.id
            );
            this.setResidentialId(residentialId);

          }
        });

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2019-04-10
@danilr

You make a method for adding markers that will remove existing markers before adding them. And you also do a watch on the array of filtered data, on the basis of which the markers are created - you call this method there. For example .
Or you can create all the markers at once, in the watcher bypass the original data array, and put the marker on / remove the marker from the map depending on whether the current value is present in the filtered array - also an option .

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question