CODEWITHSUNDEEP
reactjsleafletreact-leafletleaflet.markercluster
MaaGik
MaaGik

Reputation: 13

How pass props to React Leaflet.markercluster options since v2.0.0?

I tried to pass property with <MarkerClusterGroup {...markerclusterOptions}>

by let markerclusterOptions but i think it is not a good way, because it does not work!

in documentation (# React leaflet markercluster v2.0.0): Since now you don't need to use options prop to pass Leaflet.markercluster option into <MarkerClusterGroup />.

I do not understand how do to that.

import React from 'react';
import MarkerClusterGroup from 'react-leaflet-markercluster';

let markerclusterOptions: {
  maxClusterRadius: 10;
  spiderfyDistanceMultiplier: 2;
  spiderfyOnMaxZoom: true;
  showCoverageOnHover: false;
  zoomToBoundsOnClick: true;
};
// == Composant
const Map: React.FC<Props> = ({ lights }) => (
  <div className="map">
    <MapContainer
      center={[46.362205, 1.523151]}
      zoom={5}
      minZoom={2}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=******"
      />
      <SetViewOnClick />

      <MarkerClusterGroup {...markerclusterOptions}>{
        
        lights.map((light) => (
          <Marker
            key={light.id}
            position={[light.latitude, light.longitude]}
            icon={iconPerson}
            
          >
            <Tooltip>
              Name: {light.user_description} (I{light.index}.G{light.group})
              <br />
              Power: {light.power_level} %
              <br />
              Rf Quality: {light.rfquality}/5
            </Tooltip>
          </Marker>
        ))       
      }
      </MarkerClusterGroup>

    </MapContainer>

  </div>
);

export default Map;

Upvotes: 1

Views: 773

Answers (1)

ghybs
ghybs

Reputation: 53300

Most probably a typo:

let markerclusterOptions: { // with colon ":" you declare a type
  maxClusterRadius: 10;
  spiderfyDistanceMultiplier: 2;
  spiderfyOnMaxZoom: true;
  showCoverageOnHover: false;
  zoomToBoundsOnClick: true;
}; // no assignment, value is undefined

Should have been:

let markerclusterOptions = { // with equal you assign a value
  maxClusterRadius: 10,
  spiderfyDistanceMultiplier: 2,
  spiderfyOnMaxZoom: true,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: true,
};

Upvotes: 1

Related Questions