2

I am using leafletjs and leafletjs market clustering.

I have a list of friends and I want to display them all on a map. The problem is that some of them life in a same house, so the co-ordinate for multiple markers would be the same. Issue occurs when there is more than 50 friends living in the same place.

Is there any way, that the markers could be hidden and when a cluster is clicked it instead would display a table containing all of the marker names?

My code that is adding markers:

export function markersFromData(map, markers) {
  return (data) => {
    const markerList = [];
    data.map((v) => {
      const title = v.name;
      const marker = L.marker(new L.LatLng(v.latitude, v.longitude), {
        opacity: 0,
      });
      marker.bindPopup(title);
      markerList.push(marker);
      return markers.addLayer(marker);
    });
    map.addLayer(markers);
    // eslint-disable-next-line
    const group = new L.featureGroup(markerList);
    map.fitBounds(group.getBounds());
  };
}

Map example

enter image description here

3
  • 2
    Have a look at this answer which describes how to replace the spider effect with a custom popup: gis.stackexchange.com/questions/152102/…
    – toms
    Jul 24 '17 at 19:50
  • That worked @toms, do you want to post it as an answer so I can accept it ?
    – August
    Jul 24 '17 at 20:59
  • I am interested in the spider-like effect, as you achieved. Could you send me a sample of the code, that you used? Thanks
    – MKR
    Nov 7 '19 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.