0

I need to open all the markers that are visible on the map at Zoom, 10. I also use leaflet.markercluster.

Init map:

initMap() {
  this.map = L.map('map', {
    center: [55.55, 37.61],
    zoom: 9,
    layers: this.layer
  })
  this.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution:
      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;'
  })
  this.tileLayer.addTo(this.map)

this.map.on('zoom', function(ev) {
    ???
  })

Add marker layer:

this.markerLayer = new L.LayerGroup()   // layer contain searched elements
  // this.map.addLayer(this.markerLayer)

  for (const i in data) {
...
    const marker = new L.Marker(new L.latLng(loc), { title: title, icon: icon })// se property searched
    marker.bindPopup(title)
    this.markerLayer.addLayer(marker)
  }

Use leaflet marker cluster:

this.markersLayer = L.markerClusterGroup({
    iconCreateFunction: function(cluster) { ... },
    singleMarkerMode: false
  })
  this.markersLayer.addLayer(this.markerLayer)
  this.map.addLayer(this.markersLayer)
ncux199rus
  • 105
  • 2
  • 9

1 Answers1

1

You should add your markers to an array before / after adding them to the map to access them easily.

var markers = [];

for (const i in data) {
    const marker = new L.Marker(new L.latLng(loc), { title: title, icon: icon })
    marker.bindPopup(title)
    this.markerLayer.addLayer(marker)
    markers.push(marker);
}

after that you can just loop through your markers array and use openPopUp function of marker to open popups of your markers programmatically.

for(i = 0; i< markers.length;i++){
    markers[i].openPopup();
}
NTP
  • 4,338
  • 3
  • 16
  • 24
  • @ncux199rus check the following answer for visibility https://stackoverflow.com/questions/22081680/get-a-list-of-markers-layers-within-current-map-bounds-in-leaflet – NTP Apr 18 '19 at 18:39
  • you will have to loop through all visible markers and use openPopUP function – NTP Apr 18 '19 at 19:33