@deck.gl/layers

What is @deck.gl/layers?

@deck.gl/layers is a versatile library for creating and rendering complex visualizations on top of maps using WebGL. It provides a variety of pre-built layers for different types of data visualization, including scatter plots, heatmaps, and 3D extrusions.

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

ScatterplotLayer

The ScatterplotLayer is used to render a collection of points, each with a specified position, size, and color. This is useful for visualizing data points on a map.

const scatterplotLayer = new ScatterplotLayer({
  id: 'scatterplot-layer',
  data: [
    {position: [-122.45, 37.78], size: 100},
    {position: [-122.46, 37.79], size: 200}
  ],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getColor: [255, 0, 0]
});

HeatmapLayer

The HeatmapLayer is used to create a heatmap visualization, where the intensity of the heatmap is determined by the weight of each data point. This is useful for visualizing density or intensity of data points.

const heatmapLayer = new HeatmapLayer({
  id: 'heatmap-layer',
  data: [
    {position: [-122.45, 37.78], weight: 1},
    {position: [-122.46, 37.79], weight: 0.5}
  ],
  getPosition: d => d.position,
  getWeight: d => d.weight
});

GeoJsonLayer

The GeoJsonLayer is used to render GeoJSON data, which can include points, lines, and polygons. This is useful for visualizing geographic features and boundaries.

const geoJsonLayer = new GeoJsonLayer({
  id: 'geojson-layer',
  data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json',
  pickable: true,
  stroked: false,
  filled: true,
  extruded: true,
  getFillColor: [160, 160, 180, 200],
  getLineColor: [255, 255, 255],
  getRadius: 100,
  getLineWidth: 1,
  getElevation: 30
});

Other packages similar to @deck.gl/layers

leaflet

Leaflet is a popular open-source JavaScript library for interactive maps. It is lightweight and easy to use, but it does not offer the same level of WebGL-based performance and 3D visualization capabilities as @deck.gl/layers.

mapbox-gl

Mapbox GL JS is a powerful library for interactive, customizable vector maps rendered with WebGL. It offers high performance and a wide range of features, but it is more focused on map rendering and less on data visualization compared to @deck.gl/layers.

three

Three.js is a JavaScript library for creating 3D graphics in the browser using WebGL. While it provides a lot of flexibility and power for 3D rendering, it requires more effort to set up and use for map-based visualizations compared to @deck.gl/layers.

README

@deck.gl/layers

This is the core layer catalog for deck.gl.

See deck.gl for documentation.

Changelog

[6.3.1] - Dec 4 2018

• Fix auto-offset mode bug (#2464)
• Fix PolygonLayer bug: getPolygon update trigger not working (#2473)
• Fix Mapbox integration bug - do not override canvas size if using external gl context (#2465)
• Fix event callbacks this ref (#2471)