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
    Commented Jul 24, 2017 at 19:50
  • That worked @toms, do you want to post it as an answer so I can accept it ?
    – August
    Commented Jul 24, 2017 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
    – Geographos
    Commented Nov 7, 2019 at 9:20

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.