@deck.gl/mapbox

What is @deck.gl/mapbox?

@deck.gl/mapbox is a package that integrates Deck.gl visualizations with Mapbox GL maps. It allows you to create complex and performant visualizations on top of Mapbox maps, leveraging the power of Deck.gl's GPU-accelerated rendering.

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

Integrate Deck.gl Layers with Mapbox

This feature allows you to add Deck.gl layers to a Mapbox map. The code sample demonstrates how to create a Mapbox map and add a Deck.gl ScatterplotLayer to it.

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-74.5, 40],
  zoom: 9
});

const deckLayer = new deck.MapboxLayer({
  id: 'my-deck-layer',
  type: deck.ScatterplotLayer,
  data: [{position: [-74.5, 40], size: 100}],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getColor: [255, 0, 0]
});

map.on('load', () => {
  map.addLayer(deckLayer);
});

Synchronize Deck.gl Layers with Mapbox Camera

This feature ensures that Deck.gl layers stay in sync with the Mapbox camera. The code sample shows how to update the Deck.gl layer's view state whenever the Mapbox map is moved.

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-74.5, 40],
  zoom: 9
});

const deckLayer = new deck.MapboxLayer({
  id: 'my-deck-layer',
  type: deck.ScatterplotLayer,
  data: [{position: [-74.5, 40], size: 100}],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getColor: [255, 0, 0]
});

map.on('load', () => {
  map.addLayer(deckLayer);
});

map.on('move', () => {
  deckLayer.setProps({
    viewState: {
      longitude: map.getCenter().lng,
      latitude: map.getCenter().lat,
      zoom: map.getZoom(),
      bearing: map.getBearing(),
      pitch: map.getPitch()
    }
  });
});

Other packages similar to @deck.gl/mapbox

mapbox-gl

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps. While it does not provide the same level of GPU-accelerated data visualization as Deck.gl, it is highly customizable and can be extended with various plugins.

leaflet

Leaflet is a popular open-source JavaScript library for mobile-friendly interactive maps. It is lightweight and easy to use but does not offer the same GPU-accelerated rendering capabilities as Deck.gl.

three

Three.js is a JavaScript library that makes WebGL easier to use. It is not specifically designed for maps but can be used to create 3D visualizations, including maps, with high performance. It requires more manual setup compared to Deck.gl.

README

@deck.gl/mapbox

Use deck.gl layers as custom mapbox layers, enabling seamless interleaving of mapbox and deck.gl layers.

See deck.gl for documentation.