Urbica React Mapbox GL Cluster

Cluster component for Urbica React Components Library for Mapbox GL JS.

Installation

npm install mapbox-gl supercluster @urbica/react-map-gl @urbica/react-map-gl-cluster

...or if you are using yarn:

yarn add mapbox-gl supercluster @urbica/react-map-gl @urbica/react-map-gl-cluster

Usage

import { randomPoint } from '@turf/random';
import MapGL, { Marker } from '@urbica/react-map-gl';
import Cluster from '@urbica/react-map-gl-cluster';
import 'mapbox-gl/dist/mapbox-gl.css';

const bbox = [-160, -70, 160, 70];
const points = randomPoint(50, { bbox }).features;
points.forEach((point, index) => (point.id = index));

initialState = {
  viewport: {
    latitude: 0,
    longitude: 0,
    zoom: 0
  }
};

const style = {
  width: '20px',
  height: '20px',
  color: '#fff',
  background: '#1978c8',
  borderRadius: '20px',
  textAlign: 'center'
};

const ClusterMarker = ({ longitude, latitude, pointCount }) => (
  <Marker longitude={longitude} latitude={latitude}>
    <div style={{ ...style, background: '#f28a25' }}>{pointCount}</div>
  </Marker>
);

<MapGL
  style={{ width: '100%', height: '400px' }}
  mapStyle='mapbox://styles/mapbox/light-v9'
  accessToken={MAPBOX_ACCESS_TOKEN}
  onViewportChange={viewport => setState({ viewport })}
  {...state.viewport}
>
  <Cluster radius={40} extent={512} nodeSize={64} component={ClusterMarker}>
    {points.map(point => (
      <Marker
        key={point.id}
        longitude={point.geometry.coordinates[0]}
        latitude={point.geometry.coordinates[1]}
      >
        <div style={style} />
      </Marker>
    ))}
  </Cluster>
</MapGL>;