I want to display all the information concerning these markers that are present at the same place

amine 0
Viewed 19

I need to display multiple names inside marker -> Popup with the doctor's name and its own url. But now, if the address is the same in the map, only one marker comes although several doctors can be in the same place. So I want to know how many times the address is called and I want to display all the information concerning these markers that are present at the same place.

function DoctorsMap({ doctors_list, alternative_list, center, i18n }) {
  console.log(alternative_list)
  const iconMarkup = renderToStaticMarkup(
    <img src={config.domainUrl + "/src/client/assets/images/marker-icon.png"} />
  );
  const customMarkerIcon = divIcon({
    html: iconMarkup,
    iconSize: [25, 41],
    iconAnchor: [12, 41],
  });
  return (
    <MapContainer
      id={"map"}
      center={center}
      zoom={8}
      style={{
        marginBottom: "20px",
        width: "100%",
        height: "100vh",
        zIndex: 0,
      }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <UpdateMapCentre mapCentre={center} />
      {doctors_list &&
        doctors_list.length > 0 &&
        doctors_list.map((item, index) => {
          return (
            item.office_address.length > 0 &&
            item.office_address.map((el, i) => {
              return (
                el.latitude &&
                el.longitude && (
                  <Marker
                    key={index + i}
                    // icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})}
                    icon={customMarkerIcon}
                    position={[el.latitude, el.longitude]}
                  >
                    <Popup>
                      <Link to={"/profile/" + (i18n.language == 'FR' ? item.url : item['url_'+i18n.language.toLowerCase()])}>{item.name}</Link>

                     //for example I want several links here


                    </Popup>
                  </Marker>
                )
              );
            })
          );
        })}
      
    </MapContainer>
ecmascript-6 react-leaflet reactjs javascript
1 Answers

Complete example update - working example is on https://codesandbox.io/s/markercluster-react-custom-icon-forked-x1hglq?file=/src/styles.css:95-128

function UpdateMapCentre(props) {
  const map = useMap();
  map.panTo(props.mapCentre);
  return null;
}

const createClusterCustomIcon = function (cluster) {
  return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: "customMarker",
    iconSize: L.point(40, 40, true)
  });
};

function DoctorsMap({ doctors_list, alternative_list, center, i18n, zoom }) {

  const iconMarkup = renderToStaticMarkup(
    <img src={config.domainUrl + "/src/client/assets/images/marker-icon.png"} />
  );
  const customMarkerIcon = divIcon({
    html: iconMarkup,
    iconSize: [25, 41],
    iconAnchor: [12, 41],
  });



   
  return (
    <MapContainer
      id={"map"}
      className="markercluster-map"
      center={center}
      zoom={zoom}
      style={{
        marginBottom: "20px",
        width: "100%",
        height: "100vh",
        zIndex: 0,
      }}
    >
     
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />

      <UpdateMapCentre mapCentre={center} />  
      <MarkerClusterGroup
        showCoverageOnHover={true}
        icon={customMarkerIcon}
         iconCreateFunction={createClusterCustomIcon}
      >
      {doctors_list &&
        doctors_list.length > 0 &&
        doctors_list.map((item, index) => {
         
          return (
            item.office_address.length > 0 &&
            item.office_address.map((el, i) => {
            
              return (
                el.latitude &&
                el.longitude && (

                
                  <Marker
                    key={index + i}
                    // icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})}
                    icon={customMarkerIcon}
                    position={[el.latitude, el.longitude]}
                    draggable={true}
                    animate={true}
                  >
                   
                    <Popup>
                       {console.log("marker",item.name)}
                      <Link to={"/profile/" + (i18n.language == 'FR' ? item.url : item['url_'+i18n.language.toLowerCase()])}>{item.name}</Link>
                       
                       
                    </Popup>
                  </Marker>
                
                )
                
              );
            })
          );
        })}
        </MarkerClusterGroup>  
        <MarkerClusterGroup
        showCoverageOnHover={true}
        icon={customMarkerIcon}
         iconCreateFunction={createClusterCustomIcon}
      >
      {alternative_list &&
        alternative_list.length > 0 &&
        alternative_list.map((item, index) => {
          return (
            item.office_address.length > 0 &&
            item.office_address.map((el, i) => {
              return (
                el.latitude &&
                el.longitude && (
              
                  <Marker
                   id="maker"
                    key={index + i}
                    // icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})}
                    icon={customMarkerIcon}
                    // eventHandlers={{
                    //   click: (e) => this.clickMarker(e),
                    // }}
                    position={[el.latitude, el.longitude]}
                    draggable={true}
                    animate={true}
                  >
                    
                    <Popup>
                     {/* { console.log("item.url ",item.url )} */}
                      <Link id="linkss" to={"/profile/" + (i18n.language == 'FR' ? item.url : item['url_'+i18n.language.toLowerCase()])}>{item.name}</Link>
                    </Popup>
                  </Marker>
                  
                )
              );
            })
          );
        })}
        </MarkerClusterGroup>
    </MapContainer>
amine0
Related