Custom icons for MarkerClusters in React Leaflet

Question

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.

Grzegorz T. · Accepted Answer · 2021-12-17T13:07:57.743

2

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;
}

edited Dec 17 '21 at 13:07

answered Dec 16 '21 at 18:18

Grzegorz T.

3,903
2
11
24

Thank you for attempting to solve my problem. But I am trying to add an image (group.png) as the markercluster icon (just like we can add an image as the marker icon). Doing what you suggested is still giving me the same error: TypeError: Cannot read properties of undefined (reading 'divIcon') @Grzegorz T. – Aahana B. Dec 16 '21 at 18:59
You have a code error. `import L from 'leaflet';` not `import {divIcon, L, Icon} from "leaflet";` – Grzegorz T. Dec 16 '21 at 19:24
That solved my error. Thanks! I still want to be able to add a custom image (group.png) as the MarkerCluster icon. Right now, I have `iconUrl: "leaflet/group.png"` inside the function, but the image is not showing up as the MarkerCluster icon. How would I do that? – Aahana B. Dec 16 '21 at 19:39
You have to import this graphic first: `import customMarker from './your/path/to/icon/leaflet/group.png;` then add to L.divIcon as normal `iconUrl: customMarker` - [adding-images-fonts-and-files](https://create-react-app.dev/docs/adding-images-fonts-and-files/) – Grzegorz T. Dec 16 '21 at 19:49
I tried this. I still wasn't able to get the image as the icon for the MarkerCluster. It only shows the number of markers within the cluster. No custom graphic. – Aahana B. Dec 17 '21 at 01:38
I did an update and changed the concept, added styles instead of iconUrl. – Grzegorz T. Dec 17 '21 at 13:16
This works great, thank you! I haven't seen any solution online to change the icon for MarkerCluster and this solution solves the problem. I wish I could upvote it 10 times, but I don't have enough reputation since I'm new to Stack Overflow. But thank you. – Aahana B. Dec 20 '21 at 17:42
All you need to do is to accept the solution with the code, just click the arrow up ;) Here you have some examples of how to use the [leaflet-examples](https://github.com/tomik23/leaflet-examples) – Grzegorz T. Dec 20 '21 at 17:59

Custom icons for MarkerClusters in React Leaflet

1 Answers1