Skip to main content

DeckGL (HTML)

DeckGL is a highly framework to create interactive map visualizations that handle large datasets.

This guide shows how to load data from Fused into DeckGL maps created from a single standalone HTML page with the following layer types:

1. Generate a signed URL for a UDF​

First create a UDF and generate an HTTP endpoint.

2. Create a DeckGL HTML map​

Create an .html file following this template. This code creates a DeckGL map then introduces a layer that renders data from the specified Fused endpoint.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Fused DeckGL</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/geo-layers@^9.0.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^9.0.0/dist.min.js"></script>
    <script src="https://unpkg.com/h3-js"></script>
    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const { DeckGL, H3HexagonLayer, GeoJsonLayer, BitmapLayer, TileLayer } = deck;

      new DeckGL({
        mapboxApiAccessToken:
          "pk.eyJ1IjoiZXN0b3JudWRhbWUiLCJhIjoiY2xneTh0Y3czMDczODNmcG11ZTNuazZvbSJ9.QFTdgqDlAFQKaJ_QLA35ew",
        mapStyle: "mapbox://styles/mapbox/dark-v10",
        initialViewState: {
          longitude: -122.417759,
          latitude: 37.776452,
          zoom: 12,
        },
        controller: true,
        layers: [
          new H3HexagonLayer({
            id: "H3HexagonLayer",
            data: "https://www.fused.io/server/v1/realtime-shared/f393efed9c75425365f2f00254d37cb15166e22fc5defabcc7ee6fd9e2d7a3b4/run/file?dtype_out_vector=json",
            extruded: true,
            getElevation: (d) => d.count,
            elevationScale: 20,
            filled: true,
            stroked: true,
            getFillColor: (d) => [255, (1 - d.count / 500) * 255, 0],
            getHexagon: (d) => d.hex,
            getLineColor: [255, 255, 255],
            getLineWidth: 2,
            lineWidthUnits: "pixels",
          }),
        ],
      });
    </script>
  </body>
</html>

H3HexagonLayer​

Create an H3HexagonLayer.

new H3HexagonLayer({
    id: "H3HexagonLayer",
    data: "https://www.fused.io/server/v1/realtime-shared/f393efed9c75425365f2f00254d37cb15166e22fc5defabcc7ee6fd9e2d7a3b4/run/file?dtype_out_vector=json",
    extruded: true,
    getElevation: (d) => d.count,
    elevationScale: 20,
    filled: true,
    stroked: true,
    getFillColor: (d) => [255, (1 - d.count / 500) * 255, 0],
    getHexagon: (d) => d.hex,
    getLineColor: [255, 255, 255],
    getLineWidth: 2,
    lineWidthUnits: "pixels",
}),

Vector Tile Layer​

Vector Tile layers are created by placing a GeoJsonLayer sublayer within a TileLayer. Use the following snippet to introduce a vector layer.

The layer in the sample map comes from Overture Buildings UDF.

new TileLayer({
  // Use geojsonlayer inside of tilelayer. This is instead of MVT Layer, which has optimizations that can cause clipping when polygon extends beyond Tile area.
  id: "VectorTileLayer",
  data: "https://www.fused.io/server/v1/realtime-shared/3aadf7a892ace2f6efab8da9720f1da241fc4403e7722f501ab45503e094a13d/run/tiles/{z}/{x}/{y}?dtype_out_vector=geojson",
  maxZoom: 19,
  minZoom: 0,

  renderSubLayers: (props) => {
    const { boundingBox } = props.tile;

    return new GeoJsonLayer(props, {
      data: props.data,
      stroked: true,
      getLineColor: [0, 255, 10],
      getLineWidth: 10,
      getFillColor: [0, 40, 0, 0.5],
      getPointRadius: 4,
      getLineWidth: 5,
      pointRadiusUnits: "pixels",
      bounds: [
        boundingBox[0][0],
        boundingBox[0][1],
        boundingBox[1][0],
        boundingBox[1][1],
      ],
    });
  },
});

Raster Tile Layer​

Raster Tile layers are created by placing a BitmapLayer sublayer within a TileLayer. Use the following snippet to introduce a raster layer. The sample layer below was created from the NAIP Tile UDF.

new TileLayer({
  id: "RasterTileLayer",
  data: "https://staging.fused.io/server/v1/realtime-shared/3a6030eb4fa9c70780bba1b62cdfffe2eca24745db78aba62ddd96ebb0f6e0cc/run/tiles/{z}/{x}/{y}?dtype_out_raster=png",
  maxZoom: 19,
  minZoom: 0,

  renderSubLayers: (props) => {
    const { boundingBox } = props.tile;

    return new BitmapLayer(props, {
      data: null,
      image: props.data,
      bounds: [
        boundingBox[0][0],
        boundingBox[0][1],
        boundingBox[1][0],
        boundingBox[1][1],
      ],
    });
  },
  pickable: true,
});