CODEWITHSUNDEEP
reactjsleafletleaflet.markerclusterreact-leaflet-v3
Aahana B.
Aahana B.

Reputation: 33

Custom icons for MarkerClusters in React Leaflet

I am trying to implement a custom icon for my markerclusters (instead of the regular circular clusters). I referred to the link and implemented as shown in the code below: https://www.npmjs.com/package/react-leaflet-markercluster

import { divIcon, L, Icon } from "leaflet";

const createClusterCustomIcon = function (cluster) {
    return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: 'marker-cluster-custom',
    iconUrl: "leaflet/group.png",
    iconSize: [25, 25]
    });
}

<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon}>
      ... My code with Markers ...
</MarkerClusterGroup>

But I keep getting:

TypeError: Cannot read properties of undefined (reading 'divIcon')

Is there a way to use custom images as icons to markerclusters? Also, is there a way to change the color of the text used to show the number of markers within a cluster? Any help would be greatly appreciated.

Upvotes: 1

Views: 2536

Answers (1)

Grzegorz T.
Grzegorz T.

Reputation: 4153

Complete example update - working example is on codesanbox

import React from "react";
import { MapContainer, TileLayer, Marker } from "react-leaflet";
import MarkerClusterGroup from "react-leaflet-markercluster";
import L from "leaflet";

import "./styles.css";

export default function App() {
  const createClusterCustomIcon = function (cluster) {
    return L.divIcon({
      html: `<span>${cluster.getChildCount()}</span>`,
      // customMarker is the class name in the styles.css file
      className: "customMarker",
      iconSize: L.point(40, 40, true)
    });
  };

  return (
    <MapContainer
      className="markercluster-map"
      center={[51.0, 19.0]}
      zoom={4}
      maxZoom={18}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />

      <MarkerClusterGroup
        showCoverageOnHover={false}
        iconCreateFunction={createClusterCustomIcon}
      >
        <Marker position={[49.8397, 24.0297]} />
        <Marker position={[52.2297, 21.0122]} />
        <Marker position={[51.5074, -0.0901]} />
      </MarkerClusterGroup>
    </MapContainer>
  );
}

File styles.css
And the most important thing you need to put pin.png in the public folder.

body {
  padding: 0;
  margin: 0;
}

.markercluster-map {
  height: 100vh;
}

.customMarker {
  background-image: url(/pin.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.customMarker span {
  display: block;
  margin-top: 5px;
  margin-left: 13px;
  color: #fff;
}

Upvotes: 3

Related Questions