@deck.gl/geo-layers

What is @deck.gl/geo-layers?

@deck.gl/geo-layers is a collection of layers for geospatial visualization built on top of deck.gl. It provides specialized layers for rendering geospatial data, such as polygons, paths, and points, with support for various data formats and sources.

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

H3HexagonLayer

The H3HexagonLayer is used to visualize data aggregated into hexagonal grids using the H3 spatial indexing system. This example demonstrates how to create a hexagon layer with elevation and color based on data values.

const {DeckGL} = require('@deck.gl/react');
const {H3HexagonLayer} = require('@deck.gl/geo-layers');

const layer = new H3HexagonLayer({
  id: 'h3-hexagon-layer',
  data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/website/sf.h3cells.json',
  pickable: true,
  extruded: true,
  elevationScale: 1000,
  getHexagon: d => d.hexagon,
  getFillColor: d => [255, (1 - d.count / 5000) * 255, 0],
  getElevation: d => d.count
});

const deckgl = new DeckGL({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11,
    pitch: 30,
    bearing: 0
  },
  controller: true,
  layers: [layer]
});

TileLayer

The TileLayer is used to render raster tiles from a tile server. This example demonstrates how to create a tile layer using OpenStreetMap tiles.

const {DeckGL} = require('@deck.gl/react');
const {TileLayer} = require('@deck.gl/geo-layers');

const layer = new TileLayer({
  data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
  minZoom: 0,
  maxZoom: 19,
  tileSize: 256,
  renderSubLayers: props => {
    const {tile} = props;
    return new BitmapLayer(props, {
      data: null,
      image: tile.data,
      bounds: tile.bbox
    });
  }
});

const deckgl = new DeckGL({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11,
    pitch: 30,
    bearing: 0
  },
  controller: true,
  layers: [layer]
});

TripsLayer

The TripsLayer is used to visualize vehicle trips along a path over time. This example demonstrates how to create a trips layer with animated paths.

const {DeckGL} = require('@deck.gl/react');
const {TripsLayer} = require('@deck.gl/geo-layers');

const layer = new TripsLayer({
  id: 'trips-layer',
  data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/trips/trips-v7.json',
  getPath: d => d.path,
  getTimestamps: d => d.timestamps,
  getColor: [253, 128, 93],
  opacity: 0.8,
  widthMinPixels: 2,
  rounded: true,
  trailLength: 180,
  currentTime: 100
});

const deckgl = new DeckGL({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11,
    pitch: 30,
    bearing: 0
  },
  controller: true,
  layers: [layer]
});

Other packages similar to @deck.gl/geo-layers

leaflet

Leaflet is a popular open-source JavaScript library for mobile-friendly interactive maps. It provides a wide range of features for rendering and interacting with geospatial data, including support for various tile layers, markers, and vector layers. Compared to @deck.gl/geo-layers, Leaflet is more focused on 2D map rendering and has a simpler API, but it lacks the advanced 3D visualization capabilities of deck.gl.

mapbox-gl

Mapbox GL JS is a powerful JavaScript library for interactive, customizable vector maps on the web. It supports 3D terrain and buildings, custom vector tiles, and a wide range of map styles. Compared to @deck.gl/geo-layers, Mapbox GL JS offers more built-in map styles and customization options, but it may require more effort to integrate with custom data visualizations.

openlayers

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. It supports a wide range of geospatial data formats and provides extensive functionality for vector and raster layers, projections, and interactions. Compared to @deck.gl/geo-layers, OpenLayers offers more comprehensive support for different geospatial data formats and projections, but it may be more complex to use for advanced visualizations.

README

The README file is missing