Integrating Mapbox's Supercluster with react-map-gl

[winston-bosan]

Hello! As my title suggests, since mapbox-gl already supports supercluster internally with newly updated spiderfying and other cool jazz, I am wondering if there is a best practice or if anyone has had the experience implementing a clustering layer within react-map-gl wrapper. Or something similar to this?

[jamalx31]

@winston-bosan if still relevant I manage to do it. Maybe will send a PR here

[mlg87]

@jamalx31 how did you go about implementing it?

[tstirrat15]

@jamalx31 I'd also be curious. This seems like it would be something nice to have in this library. If you're not keen on PRing, can you at least share the implementation so that someone else could go about PRing it?

[jamalx31]

@mlg87 @tstirrat15 I will try to raise a PR this week if not I will share a code snippet maybe one of you could

[jamalx31]

Sorry a bit busy and will take me longer but her is the code for the Cluster component and how to use it:

import supercluster from 'supercluster';
import { point } from '@turf/helpers';
import { Children, PureComponent, createElement } from 'react';
import PropTypes from 'prop-types';
// import type { Node, Component } from 'react';

import { Marker } from 'react-map-gl';

const childrenKeys = children =>
  Children.toArray(children).map(child => child.key);

const shallowCompareChildren = (prevChildren, newChildren) => {
  if (Children.count(prevChildren) !== Children.count(newChildren)) {
    return false;
  }

  const prevKeys = childrenKeys(prevChildren);
  const newKeys = new Set(childrenKeys(newChildren));
  // console.log(prevKeys.length === newKeys.size && prevKeys.every(key => newKeys.has(key)), {prevChildren, newChildren})
  return (
    prevKeys.length === newKeys.size && prevKeys.every(key => newKeys.has(key))
  );
};

class Cluster extends PureComponent {
  static displayName = 'Cluster';

  static defaultProps = {
    minZoom: 0,
    maxZoom: 16,
    radius: 40,
    extent: 512,
    nodeSize: 64,
  };

  constructor(props) {
    super(props);

    this.state = {
      clusters: [],
    };
  }

  componentDidMount() {
    this.createCluster(this.props);
    this.recalculate();

    this.props.map.on('moveend', this.recalculate);
  }

  componentWillReceiveProps(newProps) {
    const shouldUpdate =
      newProps.minZoom !== this.props.minZoom ||
      newProps.maxZoom !== this.props.maxZoom ||
      newProps.radius !== this.props.radius ||
      newProps.extent !== this.props.extent ||
      newProps.nodeSize !== this.props.nodeSize ||
      !shallowCompareChildren(this.props.children, newProps.children);

    if (shouldUpdate) {
      this.createCluster(newProps);
      this.recalculate();
    }
  }

  createCluster = props => {
    const {
      minZoom,
      maxZoom,
      radius,
      extent,
      nodeSize,
      children,
      innerRef,
    } = props;

    const cluster = supercluster({
      minZoom,
      maxZoom,
      radius,
      extent,
      nodeSize,
    });

    const points = Children.map(children, child => {
      if (child)
        return point([child.props.longitude, child.props.latitude], child);
      return null;
    });

    cluster.load(points);
    this.cluster = cluster;
    if (innerRef) innerRef(this.cluster);
  };

  recalculate = () => {
    const zoom = this.props.map.getZoom();
    const bounds = this.props.map.getBounds().toArray();
    const bbox = bounds[0].concat(bounds[1]);

    const clusters = this.cluster.getClusters(bbox, Math.floor(zoom));
    this.setState(() => ({ clusters }));
  };

  render() {
    const clusters = this.state.clusters.map(cluster => {
      if (cluster.properties.cluster) {
        const [longitude, latitude] = cluster.geometry.coordinates;
        return createElement(Marker, {
          longitude,
          latitude,
          // TODO size
          offsetLeft: -28 / 2,
          offsetTop: -28,
          children: createElement(this.props.element, {
            cluster,
            superCluster: this.cluster,
          }),
          key: `cluster-${cluster.properties.cluster_id}`,
        });
      }
      const { type, key, props } = cluster.properties;
      return createElement(type, { key, ...props });
    });
    return clusters;
  }
}

Cluster.propTypes = {
  /** Mapbox map object */
  map: PropTypes.object,

  /** Minimum zoom level at which clusters are generated */
  minZoom: PropTypes.number,

  /** Maximum zoom level at which clusters are generated */
  maxZoom: PropTypes.number,

  /** Cluster radius, in pixels */
  radius: PropTypes.number,

  /** (Tiles) Tile extent. Radius is calculated relative to this value */
  extent: PropTypes.number,

  /** Size of the KD-tree leaf node. Affects performance */
  nodeSize: PropTypes.number,

  /** ReactDOM element to use as a marker */
  element: PropTypes.func,

  /**
   * Callback that is called with the supercluster instance as an argument
   * after componentDidMount
   */
  /* eslint-disable react/no-unused-prop-types */
  innerRef: PropTypes.func,
  /* eslint-enable react/no-unused-prop-types */

  /** Markers as children */
  children: PropTypes.node,
};

export default Cluster;

and use it like this:

      <ReactMapGL
        {...viewport}
        // eslint-disable-next-line no-return-assign
        ref={ref => (this.mapRef = ref)}
        onLoad={() => this.setState({ map: this.mapRef.getMap() })}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxApiAccessToken={TOKEN}
        onViewportChange={onViewportChange}
      >
        {map && (
          <Cluster
            map={map}
            radius={20}
            extent={512}
            nodeSize={40}
            element={clusterProps => (
              <PinGroup onViewportChange={onViewportChange} {...clusterProps} />
            )}
          >
            {/* every item should has a 
            uniqe key other wise cluster will not rerender on change */}
            {/* points.map((point, i) => (
              <Marker
                key={i}
                longitude={point.longitude}
                latitude={point.latitude}
              >
                <div style={MarkerStyle} />
              </Marker>
            )) */}
          </Cluster>
        )}

        <MapPopup />
   </ReactMapGL>

[tstirrat15]

@jamalx31 this is awesome. Thank you!

[tstirrat15]

Hmm... It's interesting to me that this doesn't use the underlying cluster functionality exposed by mapbox-gl-js. This is putting clusters on top of markers, more or less, where it seems like the more direct way to go would be to add layers via the mapStyle attribute, a la this example, though using something more like the cluster example on the mapbox docs.

[JasonLunsford]

Has this feature, as described by @tstirrat15 , made it into react-map-gl?

[BenBach]

@JasonLunsford Did you find a solution for this? Would appreciate any help

[tomcolaa]

For everybody getting errors -> supercluster was updated you now have to call new Supercluster instead of supercluster.

import Supercluster from 'supercluster';

const cluster = new Supercluster({
      minZoom,
      maxZoom,
      radius,
      extent,
      nodeSize,
    });

Also, it might be good for some people to know that PinGroup is a component you have to build and that it will be the replacement for the other pins when the clustering is happening. Just to make this clear as it wasn't clear to me from the beginning.

[Snorlite]

For everybody getting errors -> supercluster was updated you now have to call new Supercluster instead of supercluster.

import Supercluster from 'supercluster';

const cluster = new Supercluster({
      minZoom,
      maxZoom,
      radius,
      extent,
      nodeSize,
    });

Also, it might be good for some people to know that PinGroup is a component you have to build and that it will be the replacement for the other pins when the clustering is happening. Just to make this clear as it wasn't clear to me from the beginning.

Hi, thank you: could you please give me an example of a PinGroup component?

[Snorlite]

Using @jamalx31 's code as reference:

  componentDidMount() {
    this.createCluster(this.props);
    this.recalculate();

    this.props.map.on('moveend', this.recalculate);
  }

The this.props.map.on('moveend', this.recalculate); gives me a warning:
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

What should I change to fix it but having the same result?

[Girgetto]

For everybody getting errors -> supercluster was updated you now have to call new Supercluster instead of supercluster.

import Supercluster from 'supercluster';

const cluster = new Supercluster({
      minZoom,
      maxZoom,
      radius,
      extent,
      nodeSize,
    });

Also, it might be good for some people to know that PinGroup is a component you have to build and that it will be the replacement for the other pins when the clustering is happening. Just to make this clear as it wasn't clear to me from the beginning.

Hi, thank you: could you please give me an example of a PinGroup component?

import React, { Component } from 'react'

class PinGroups extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        const { cluster } = this.props;
        return(
                <div>
                    {cluster.properties.point_count}
                </div>
        )
    }
}

export default PinGroups;

Super basic PinGroup component with the number of markers in the cluster

[derwaldgeist]

Is there an official support for clusters now? This is a must-have feature for any map library IMHO.

[reinvanimschoot]

Any update on this? I was kind of surprised that this isn't officially supported yet...

[jamalx31]

@NickCarducci I'm not sure I understand your question. can you explain a bit more what you need to do and what is the issue

[NickCarducci]

@jamalx31 the image/pin should show when there is only one image/pin. this is caused by either one of two problems: (1) , as you see on the bottom right the lone event still has the Group/Cluster Component instead of the image.. I will look into these supercluster settings for my first time too, at first glance it looks like the following in Cluster.js is how to change sensitivity to rendering a Group/Cluster instead of an image/pin.

  static defaultProps = {
    minZoom: 0,
    maxZoom: 16,
    radius: 70,
    extent: 512,
    nodeSize: 64
  };

(2) point_count_abbreviated when counting correctly (I am sure in my data only one event is at that location at the bottom-right) and I dont have to point_count_abbreviated - 1 makes (1) a non-issue

[jamalx31]

@NickCarducci the supercluster uses those values to decide when to merge leaves into a group (numbers in your case) and when to show individual leaves (photo in your case). but it should never create a group of one individual leave. I think the issue is in the 2nd point you mentioned. Im still not sure why you do point_count_abbreviated - 1? did you see the the Group component in my example here

[NickCarducci]

@jamalx31 I have two datasets inside Group, data1.map=>x.React.BaseControl data2.map=>x.React.BaseControl

React sometimes renders multiple times onMount (though each item has their own key >:/). Maybe reactMapGL catches it (more than once). I don't think I'll have my solution soon, but my users can get by with a nice onClick on the marker to zoom into the maximum to-cluster that is allowed by aforementioned "those values". I'll reply or edit this comment with anything conclusive but as of now consider this solved in my book... thank you gj

[gajus]

What is the difference between supercluster and https://uber.github.io/react-map-gl/examples/clusters ?

[jamalx31]

@gajus depends on your use case. The Cluster API seems to be so limited, e.g you can't build your custom markers. With supercluster you have more flexibility

[derwaldgeist]

I have switched to https://github.com/urbica/react-map-gl now because of this limitation. The Urbica variant has a very similar API, provides a cluster integration that works nicely and thus allowed me to boost the performance of my map drastically. Eventually, I will need server-side clustering, too, but for now it serves my purpose.

[gajus]

I have switched to https://github.com/urbica/react-map-gl now because of this limitation. The Urbica variant has a very similar API, provides a cluster integration that works nicely and thus allowed me to boost the performance of my map drastically. Eventually, I will need server-side clustering, too, but for now it serves my purpose.

I have done the same.

[NickCarducci]

After some more time with react, today I was able to get same functionality as @jamalx31 using his class but with static getDerivedStateFromProps, componentDidUpdate instead of UNSAFE_componentWillReceiveProps and createCluster and recalculate inside render and no state change in render warnings

import Supercluster from "supercluster";
import { point } from "@turf/helpers";
import { Children, PureComponent, createElement } from "react";
import PropTypes from "prop-types";
// import type { Node, Component } from 'react';

import { Marker } from "react-map-gl";

class MappCluster extends PureComponent {
  static displayName = "MappCluster";

  constructor(props) {
    super(props);

    this.state = {
      minZoom: 0,
      maxZoom: 20,
      radius: 20,
      extent: 512,
      nodeSize: 10,
      clusters: [],
      children: props.children
    };
  }
  componentDidUpdate = (prevProps) => {
    if (prevProps.children !== this.props.children) {
      this.setState({
        children: this.props.children
      });
    }
  };
  static getDerivedStateFromProps(nextProps, prevState) {
    const childrenKeys = (children) =>
      Children.toArray(children).map((child) => child.key);
    const prevKeys = childrenKeys(prevState.children);
    const newKeys = new Set(childrenKeys(nextProps.children));
    if (
      Children.count(nextProps.children) !==
        Children.count(prevState.children) ||
      prevKeys.length !== newKeys.size ||
      !prevKeys.every((key) => newKeys.has(key))
    ) {
      return { children: nextProps.children };
    } else return null;
  }
  render() {
    const { children } = this.state;
    const points = Children.map(
      children,
      (child) =>
        child && point([child.props.longitude, child.props.latitude], child)
    );
    const { minZoom, maxZoom, radius, extent, nodeSize } = this.state;
    this._cluster = new Supercluster({
      minZoom,
      maxZoom,
      radius,
      extent,
      nodeSize
    }).load(points);
    if (this.props.innerRef) {
      this.props.innerRef(this._cluster);
    }
    const zoom = this.props.map.getZoom();
    const bounds = this.props.map.getBounds().toArray();
    const bbox = bounds[0].concat(bounds[1]);
    return this._cluster.getClusters(bbox, Math.floor(zoom)).map((cluster) => {
      const [longitude, latitude] = cluster.geometry.coordinates;
      if (cluster.properties.cluster) {
        return createElement(Marker, {
          longitude,
          latitude,
          // TODO size
          offsetLeft: -28 / 2,
          offsetTop: -28,
          children: createElement(this.props.element, {
            cluster,
            superCluster: this._cluster
          }),
          key: `cluster-${cluster.properties.cluster_id}`
        });
      }
      const { type, key, props } = cluster.properties;
      return createElement(type, { key, ...props });
    });
  }
}

MappCluster.propTypes = {
  /** Mapbox map object */
  map: PropTypes.object,

  /** Minimum zoom level at which clusters are generated */
  minZoom: PropTypes.number,

  /** Maximum zoom level at which clusters are generated */
  maxZoom: PropTypes.number,

  /** MappCluster radius, in pixels */
  radius: PropTypes.number,

  /** (Tiles) Tile extent. Radius is calculated relative to this value */
  extent: PropTypes.number,

  /** Size of the KD-tree leaf node. Affects performance */
  nodeSize: PropTypes.number,

  /** ReactDOM element to use as a marker */
  element: PropTypes.func,

  /**
   * Callback that is called with the supercluster instance as an argument
   * after componentDidMount
   */
  /* eslint-disable react/no-unused-prop-types */
  innerRef: PropTypes.func,
  /* eslint-enable react/no-unused-prop-types */

  /** Markers as children */
  children: PropTypes.node
};

export default MappCluster;

Thanks so much! p.s. I have it working without the urbica package, also please notice the only props triggering a change for this component was children; their keys, element and innerRef named ref from popper.js are still passed as props. So I put minZoom, maxZoom, radius, extent, nodeSize in state of this child

[MarkLyck]

I tried the above solution(s), and while it "works" and renders everything correctly. It is incredibly slow and sluggish when you move the map with 3,500 points rendered as just 6 clusters.

The urbica version somehow manages to do this with great performance. I think because it uses the map events directly rather than a react life-cycle to trigger viewport updates.

The react-mapbox-gl library also manages to do this with good performance...

I'm trying to migrate from react-mapbox-gl to react-map-gl. But this is the one problem I haven't found a solution to yet.

has anyone figured out a way to implement this with custom clusters and keep a reasonable performance? in this version of react-map-gl?

[NickCarducci]

I was just updating to the newest react functions for the thread. This is visgl version still.

[MarkLyck]

Did you manage to find a way to improve the performance 🤞 😄 ?

[NickCarducci]

Any changes I might come back here to post.. here is it implemented but it is @jamalx31 version with more code around it (moved functions into render and componentDidUpdate). Maybe he can figure out the parallel universe in time. I haven't tested with more than 20 clusters, so i haven't the need. I'm sure it can be done! Know when to move along your product map instead.. Thank YOU

[louislefebvre]

I have also tried https://github.com/urbica/react-map-gl, but the fact that it is typeless for typescript and that it doesn't render clusters on moving the map doesn't make me wants to stick with it.
Although I have noticed a performance improvement and my lighthouse score also increased from 66 to 73 with the same geojson dataset.

I will stick to react-map-gl because I have the feeling that it is currently the best maintained mapbox dependency for react; although I think having supercluster integrated would be a super thing and improve performances :)

At first I tried to display symbols through the Layer component with clusters flag enabled, it is a nice thing, but the customisation for symbol is super limited. Thus I found out that I had to use Marker to display custom images on my map. And without knowing that a supercluster dependency exist to create clusters from a set of points and bounds, I would basically have crashed my project because displaying 1000 markers make the map unusable.

[NickCarducci]

A performance enhancement by removing a feature is expected. Maybe there is a function we can write in the supercluster file to cluster clusters as if they were markers.

[emekaokoli]

Please any update on this yet?

[marisancans]

So 5 years and this is unfinised? Just when I had ported my codebase to use this repo and realize it doesnt have clusters :(

[MichalBunkowski]

It does have clusters, but I wasn't able to figure out display spider when markers are overlapping each other :/ Is there a way to do this?