Narcissistic Piano Mover

    @urbica/react-map-gl-cluster

    0.2.0 • Public • Published

    Urbica React Mapbox GL Cluster

    Build Status npm npm

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

    Keywords

    none

    Install

    npm i @urbica/react-map-gl-cluster

    DownloadsWeekly Downloads

    814

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    32.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • boyur
    • device25
    • karmatsky
    • stepankuzmin