react-mapbox-gl-cluster


The React component for the cluster layer in the mapbox-gl.

The cluster layer has some build-in actions:

1. Zoom in when clicking on a cluster.
2. Show the spiderifiers when clicking on a cluster which contains the points at same location.

This layer must be rendered inside react-mapbox-gl component.

Examples:

- https://github.com/thuanmb/react-mapbox-gl-cluster/blob/master/src/App.js

!Demo Cluster.

Please note that the ReactMapboxGlCluster should be used together with the React wrapper of mapbox-gl e.g. react-mapbox-gl.
https://github.com/alex3165/react-mapbox-gl

``js
import React, {Component} from 'react';
import ReactMapboxGl from 'react-mapbox-gl';
import {ReactMapboxGlCluster} from 'react-mapbox-gl-cluster';
import {data} from './data';

const Map = ReactMapboxGl({
accessToken: process.env.MAPBOX_GL_TOKEN,
});

const mapProps = {
center: [-95.7129, 37.0902],
zoom: [3],
style: 'mapbox://styles/mapbox/streets-v8',
};

class App extends Component {
getEventHandlers() {
return {
onClick: (properties, coords, offset) =>
console.log(Receive event onClick at properties: ${properties}, coords: ${coords}, offset: ${offset}),
onMouseEnter: (properties, coords, offset) =>
console.log(Receive event onMouseEnter at properties: ${properties}, coords: ${coords}, offset: ${offset}),
onMouseLeave: (properties, coords, offset) =>
console.log(Receive event onMouseLeave at properties: ${properties}, coords: ${coords}, offset: ${offset}),
onClusterClick: (properties, coords, offset) =>
console.log(Receive event onClusterClick at properties: ${properties}, coords: ${coords}, offset: ${offset}),
};
}

render() {
return (


- data (object)
Data source for layer. It must to follow FeatureCollection geojson format

- radius (number)
[Optional] Cluster radius, in pixels.

- minZoom (number)
[Optional] Minimum zoom level at which clusters are generated.

- maxZoom (number)
[Optional] Maximum zoom level at which clusters are generated.

- extent (number)
Optional Tile extent. Radius is calculated relative to this value.

- nodeSize (number)
[Optional] Size of the KD-tree leaf node. Affects performance.

- pointClassName (string)
[Optional] The class name of each point.

- pointStyles (object)
[Optional] The class name of each cluster.

- clusterClassName (string)
[Optional] The class name of each cluster.

- spiralComponent (element)
[Optional] The custom component for the spiral. Example usage:
`
const CustomSpiralComponent = ({properties, ...restProps}) => {
const onClick = e => {
console.log(Receive event onClick in spiral at properties: ${JSON.stringify(properties)});
};
return

...

`

- markerComponent (element)
[Optional] The custom component for marker. Example usage:
`
const CustomeMarkerComponent = ({properties, className, cssObject}) => {
const onClick = e => {
console.log(Receive event onClick in marker at properties: ${JSON.stringify(properties)});
};
return