#28·mapcn

[Feature] Custom Point Rendering In Clusters

Author: at421Created Jan 5, 2026Updated Jun 8, 2026

Custom Point Rendering In Clusters

Overview

Allowing a custom react component to be rendered in place of the default point for clusters.

Happy to put in a PR if this a feature people would want.

UI Example

Code Example

typescript

<MapClusterLayer
    data={featureCollection}
    clusterMaxZoom={5}
    clusterRadius={15}
    clusterColors={["#51bbd6", "#f1f075", "#f28cb1"]}
    clusterThresholds={[100, 750]}
    pointColor="#3b82f6"
    onPointClick={(feature, coordinates) => {
      setSelectedPoint({
        id: feature.properties?.id,
        name: feature.properties?.name,
        coordinates: coordinates,
      });
    }}
    renderPoint={(props) => {
      return (
        <>
          <IconCrane className="size-4"/>
        </>
      );
    }}
  />

Source: AnmolSaini16/mapcn

View original on GitHub View discussion on GitHub