React Leaflet マーカークラスター(react-leaflet-cluster) の使い方

npx create-react-app

npm install leaflet react-leaflet react-leaflet-cluster

src //
  |-- index.js
  |-- index.css
  |-- App.css
  |-- App.js
  `-- conponents //
      `-- markers.js

import {
  MapContainer,
  TileLayer,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./App.css";
import Markers from './components/markers'

const center = [35.3628, 138.7307];

function App() {
  return (
    <MapContainer center={center} zoom={10} zoomControl={false} id="map">
      <TileLayer
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Markers />
    </MapContainer>
  );
}

export default App;

import { Marker } from "react-leaflet";
import L from "leaflet";
import MarkerClusterGroup from "react-leaflet-cluster";

import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

//defaultMarker
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconUrl: icon,
  shadowUrl: iconShadow,
});

function Markers() {
  const center = [35.3628, 138.7307];
  const point1 = [35.274774075037776, 138.6131286621094];
  const point2 = [35.292710387701696, 138.9097595214844];

  const createCustomCluster = (cluster) => {
    var childCount = cluster.getChildCount();

    var size = "marker-";
    if (childCount < 7) {
      size += "small";
    } else if (childCount < 8) {
      size += "medium";
    } else {
      size += "large";
    }

    return L.divIcon({
      html: `<div class="${size} marker-cluster"><span>${childCount}</span></div>`,
    });
  };

  return (
    <MarkerClusterGroup
      chunkedLoading
      iconCreateFunction={createCustomCluster}
      spiderfyOnMaxZoom={true}
    >
      <Marker position={point1} />
      <Marker position={point2} />
      <Marker position={center} />
      <Marker position={center} />
      <Marker position={center} />
      <Marker position={center} />
      <Marker position={center} />
      <Marker position={center} />
    </MarkerClusterGroup>
  );
}
export default Markers;

.marker-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    padding: 10px;
    border-radius: 50%;
}

.marker-small {
    background: skyblue;
}

.marker-medium {
    background: limegreen
}

.marker-large {
    background: lightcoral;
}