@deck.gl/react

What is @deck.gl/react?

@deck.gl/react is a library that provides React bindings for deck.gl, a powerful WebGL-powered framework for visual exploratory data analysis of large datasets. It allows you to create highly performant and visually appealing data visualizations in a React application.

What are @deck.gl/react's main functionalities?

Rendering Layers

This code demonstrates how to render a ScatterplotLayer using @deck.gl/react. It sets up a DeckGL component with an initial view state and a ScatterplotLayer that visualizes data points on a map.

import React from 'react';
import DeckGL, { ScatterplotLayer } from '@deck.gl/react';

const data = [
  { position: [-122.45, 37.78], size: 100 },
  { position: [-122.46, 37.79], size: 200 }
];

const App = () => (
  <DeckGL
    initialViewState={{
      longitude: -122.45,
      latitude: 37.78,
      zoom: 12
    }}
    controller={true}
    layers={[
      new ScatterplotLayer({
        id: 'scatterplot-layer',
        data,
        getPosition: d => d.position,
        getRadius: d => d.size,
        getColor: [255, 0, 0]
      })
    ]}
  />
);

export default App;

Interactivity

This code demonstrates how to add interactivity to a ScatterplotLayer using @deck.gl/react. The onClick function is triggered when a data point is clicked, displaying an alert with the position of the clicked point.

import React from 'react';
import DeckGL, { ScatterplotLayer } from '@deck.gl/react';

const data = [
  { position: [-122.45, 37.78], size: 100 },
  { position: [-122.46, 37.79], size: 200 }
];

const App = () => {
  const onClick = info => {
    if (info.object) {
      alert(`Clicked on: ${info.object.position}`);
    }
  };

  return (
    <DeckGL
      initialViewState={{
        longitude: -122.45,
        latitude: 37.78,
        zoom: 12
      }}
      controller={true}
      layers={[
        new ScatterplotLayer({
          id: 'scatterplot-layer',
          data,
          getPosition: d => d.position,
          getRadius: d => d.size,
          getColor: [255, 0, 0],
          pickable: true,
          onClick
        })
      ]}
    />
  );
};

export default App;

Custom Layers

This code demonstrates how to create a custom layer by extending the CompositeLayer class in @deck.gl/react. The CustomLayer class renders a ScatterplotLayer with custom properties.

import React from 'react';
import DeckGL, { CompositeLayer } from '@deck.gl/react';

class CustomLayer extends CompositeLayer {
  renderLayers() {
    return [
      new ScatterplotLayer(this.getSubLayerProps({
        id: 'scatterplot',
        data: this.props.data,
        getPosition: d => d.position,
        getRadius: d => d.size,
        getColor: [0, 0, 255]
      }))
    ];
  }
}

const data = [
  { position: [-122.45, 37.78], size: 100 },
  { position: [-122.46, 37.79], size: 200 }
];

const App = () => (
  <DeckGL
    initialViewState={{
      longitude: -122.45,
      latitude: 37.78,
      zoom: 12
    }}
    controller={true}
    layers={[
      new CustomLayer({
        id: 'custom-layer',
        data
      })
    ]}
  />
);

export default App;

Other packages similar to @deck.gl/react

react-map-gl

react-map-gl is a React wrapper for Mapbox GL JS, providing a set of React components for integrating Mapbox maps into React applications. It offers similar functionalities for rendering and interacting with map layers, but is more focused on Mapbox's ecosystem and less on data visualization compared to @deck.gl/react.

react-leaflet

react-leaflet is a React wrapper for Leaflet, a popular open-source JavaScript library for interactive maps. It provides a set of React components for rendering Leaflet maps and layers. While it offers robust mapping capabilities, it is not as optimized for large-scale data visualization as @deck.gl/react.

README

deck.gl-react

React Components for deck.gl

See deck.gl for documentation.