@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

The README file is missing

Changelog

[5.3.0-rc.1] - May 29 2018

• update whats new (#1859)
• Attribute transition bug fix (#1858)
• Fix attribute transition manager tests (#1856)
• Fix constant attribute transition (#1844)
• Reduce React emphasisis in docs. Miminize top README, add congributing.md (#1851)
• Use new Cylinder geometry API (#1848)
• Attribute: Add support for custom Buffer setup. (#1846)
• Rename core-layers to layers (#1845)
• Core util exports audit (#1843)
• Fix viewportChanged flag (#1841)
• Update layer browser (#1834)
• AttributeTransitionManager test (#1836)
• Add deprecation guide and what's new polish (#1831)
• Fix arc/line layer prop override (#1830)
• Fix a typo in deck.js (#1827)
• Update webpack version for examples (#1824)
• Enable example testing for "experimental" and "get-started" folders (#1825)
• Async Props #3: The Examples (#1818)
• Unblock render tests (#1822)
• Constant accessor implementation (#1814)
• Implement attribute buffer RFC (#1794)
• Async Props #2: Loading and shadowing in new ComponentState base class (#1779)
• Async Props #1: Add ability to differentiate between actual and resolved values for async props. (#1777)
• Light renaming in props handling code. Start introducing component. Better oldProps handling. (#1815)
• GPUGridAggregator: Add position offset to fix Intel specific issue (#1817)
• Add Transition class (#1806)
• Use auto control in standalone version (#1813)
• fix invert pan (#1811)
• Add Whats new entry for auto interactivity (#1807)
• Fix viewport resize issue (#1812)
• debugging and z-fighting docs (#1809)
• Remove default attribute updaters (#1582)
• Break out ViewManager class from LayerManager. (#1787)
• Move developer docs to developer-guide directory (#1790)
• Move viewport transition into controller (#1799)
• Bump example dependency versions (#1803)
• fix assert import (#1804)
• RFC catalog reorganization (#1791)
• Fix table (#1800)
• copy the actual props from the embedded demos to their markdowns (#1774)
• bug fixes (#1798)
• split core-layers into own module (#1796)
• fix index type in webgl 2 context (#1789)
• Attribute Buffer RFC (#1786)
• Add rendering test for orthographic mode (#1785)
• orthographic switch in layer-browser. (#1783)
• fix the wrong blog link (#1781)
• doc fixes (#1782)
• Hook git push with browser based tests (#1778)
• Controller cleanup (#1771)
• Remove obsolete MapController and OrbitController "proxy" classes (#1769)
• Orthographic support in WebMercatorViewport (#1640)
• Move deprecated viewports to deprecated folder (#1763)
• Deprecate the OrbitViewport class (#1765)
• Fix prop name in TextLayer documentation (#1773)
• Update deck.gl package.json files with missing BABEL_ENV (#1768)
• Generic accessor micro-RFC (#1752)
• Fix Deck class doc (#1761)
• Reorganize Viewport code (#1766)
• Auto Controls: Automatic Event Handling if no callback is specified (#1662)
• Fix using default prop in module settings (#1754)
• Remove React checks in controller classes (#1758)
• bump lite module dependency manually