React Cluster Component for Mapbox GL JS
npm install @urbica/react-map-gl-cluster
!npm
!npm
Cluster component for Urbica React Components Library for Mapbox GL JS.
``shell`
npm install mapbox-gl supercluster @urbica/react-map-gl @urbica/react-map-gl-cluster
...or if you are using yarn:
`shell`
yarn add mapbox-gl supercluster @urbica/react-map-gl @urbica/react-map-gl-cluster
`jsx
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 }) => (
{pointCount}
);
mapStyle='mapbox://styles/mapbox/light-v9'
accessToken={MAPBOX_ACCESS_TOKEN}
onViewportChange={viewport => setState({ viewport })}
{...state.viewport}
>
{points.map(point => (
longitude={point.geometry.coordinates[0]}
latitude={point.geometry.coordinates[1]}
>
))}
;
``