https://github.com/urbica/react-map-gl-cluster

Urbica React Cluster Component for Mapbox GL JS
https://github.com/urbica/react-map-gl-cluster

cluster clustering data-visualization map mapbox-gl mapbox-gl-js maps react supercluster webgl

Last synced: 5 months ago
JSON representation

Urbica React Cluster Component for Mapbox GL JS

• Host: GitHub
• URL: https://github.com/urbica/react-map-gl-cluster
• Owner: urbica
• License: mit
• Created: 2019-03-11T14:14:31.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T05:38:53.000Z (almost 3 years ago)
• Last Synced: 2025-08-20T21:22:51.613Z (5 months ago)
• Topics: cluster, clustering, data-visualization, map, mapbox-gl, mapbox-gl-js, maps, react, supercluster, webgl
• Language: JavaScript
• Homepage: https://urbica.github.io/react-map-gl-cluster/
• Size: 3.34 MB
• Stars: 27
• Watchers: 2
• Forks: 10
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# Urbica React Mapbox GL Cluster

[![Build Status](https://img.shields.io/circleci/project/github/urbica/react-map-gl-cluster.svg?style=popout)](https://circleci.com/gh/urbica/react-map-gl-cluster)

![npm](https://img.shields.io/npm/dt/@urbica/react-map-gl-cluster.svg)

![npm](https://img.shields.io/npm/v/@urbica/react-map-gl-cluster.svg)

Cluster component for [Urbica React Components Library for Mapbox GL JS](https://github.com/urbica/react-map-gl).

## Installation

```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

```

## Usage

```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}

  

);


 setState({ viewport })}

  {...state.viewport}

>

  

    {points.map(point => (

      

        


      

    ))}

  

;

```