Geospatial Export

Integrate Fused UDFs with popular mapping and visualization tools. See UDFs as API for more details.

DeckGL

DeckGL is a highly performant 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.

Setup

Create a UDF, share your canvas to get a canvas token, call your UDF through the HTTPS endpoint.
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.eyJ1IjoiaXNhYWNmdXNlZGxhYnMiLCJhIjoiY2xicGdwdHljMHQ1bzN4cWhtNThvbzdqcSJ9.73fb6zHMeO_c8eAXpZVNrA",
        mapStyle: "mapbox://styles/mapbox/dark-v10",
        initialViewState: {
          longitude: -122.417759,
          latitude: 37.776452,
          zoom: 12,
        },
        controller: true,
        layers: [
          new H3HexagonLayer({
            id: "H3HexagonLayer",
            data: "https://udf.ai/fc_<CANVAS_TOKEN>/my_udf.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://udf.ai/fc_<CANVAS_TOKEN>/my_udf.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://udf.ai/Overture_Maps_Example/run/tiles/{z}/{x}/{y}?=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://udf.ai/Arcgis_Rgb/run/tiles/{z}/{x}/{y}?=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,
});

Learn more about DeckGL

Felt

Felt is a collaborative mapping platform for creating interactive maps. Load Fused data directly via URLs.

Raster Tiles

Create a UDF that returns raster tiles
Share your canvas and use your canvas token and UDF name:

https://udf.ai/fc_<CANVAS_TOKEN>/my_udf/run/tiles/{z}/{x}/{y}?=png

In Felt, click "Upload from URL" and paste the URL

Vector Data

Create a UDF that returns vector data
Share your canvas and use your canvas token and UDF name; add UDF parameters as query params:

https://udf.ai/fc_<CANVAS_TOKEN>/my_udf.csv?param1=value1

In Felt, click "Upload from URL" and paste the URL

Learn more about Felt

Kepler

Kepler is an open source tool for visualizing large geospatial datasets. The Fused UDF Builder provides direct integration with Kepler.

Usage

Create a UDF that returns vector data
In the UDF Builder, click "Open in Kepler.gl" on the top-right menu
Wait for data transfer and click "Open in Kepler.gl" in the bottom-right

This opens your data directly in Kepler for advanced visualization and analysis.

Learn more about Kepler

Mapbox

Mapbox GL JS creates interactive web maps. Load Fused data using tile sources.

Basic Setup

Generate a Mapbox token

<!DOCTYPE html>
<html>
<head>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/dark-v10',
            center: [-122.447303, 37.753574],
            zoom: 13
        });
    </script>
</body>
</html>

Vector Tiles

Layer Name

Fused MVT tiles always use udf as the source-layer name. This is required for Mapbox GL JS, MapLibre, and react-map-gl.

<script>
map.on('load', () => {
    map.addSource('fused-source', {
        'type': 'vector',
        'tiles': [
            'https://udf.ai/fc_<CANVAS_TOKEN>/my_udf/run/tiles/{z}/{x}/{y}?=mvt'
        ],
        'minzoom': 6,
        'maxzoom': 14
    });
    
    map.addLayer({
        'id': 'fused-layer',
        'type': 'line',
        'source': 'fused-source',
        'source-layer': 'udf',
        'paint': {
            'line-color': 'rgb(53, 175, 109)',
            'line-width': 2
        }
    });
});
</script>

Raster Tiles

<script>
map.on('load', () => {
    map.addSource('fused-raster-source', {
        'type': 'raster',
        'tiles': [
            'https://udf.ai/fc_<CANVAS_TOKEN>/my_udf/run/tiles/{z}/{x}/{y}?=png'
        ],
        'tileSize': 256
    });
    
    map.addLayer({
        'id': 'fused-raster-layer',
        'type': 'raster',
        'source': 'fused-raster-source'
    });
});
</script>

Learn more about Mapbox GL JS

QGIS

QGIS is an open source desktop GIS platform. Load Fused data as raster tiles, vector tiles, or vector files.

Raster Tiles

Create a UDF that returns raster tiles
Share your canvas and use your canvas token and UDF name:

https://udf.ai/fc_<CANVAS_TOKEN>/my_udf/run/tiles/{z}/{x}/{y}?=png

In QGIS: Right-click "XYZ Tiles" → "New Connection"
Paste the URL and configure the layer

Vector Tiles

Create a UDF that returns vector tiles
Share your canvas and use your canvas token and UDF name:

https://udf.ai/fc_<CANVAS_TOKEN>/my_udf/run/tiles/{z}/{x}/{y}?=mvt

In QGIS: Right-click "Vector Tiles" → "New Connection"
Paste the URL and configure the layer

Vector Files

Create a UDF that returns vector data
Share your canvas and use your canvas token and UDF name:

https://udf.ai/fc_<CANVAS_TOKEN>/my_udf.geojson

In QGIS: Layer → Add Layer → Add Vector Layer
Paste the URL as the data source

Learn more about QGIS

Generate HTTPS endpoints for your UDFs
Check the Fused catalog for ready-to-use UDFs

DeckGL​

Setup​

H3HexagonLayer​

Vector Tile Layer​

Raster Tile Layer​

Felt​

Raster Tiles​

Vector Data​

Kepler​

Usage​

Mapbox​

Basic Setup​

Vector Tiles​

Raster Tiles​

QGIS​

Raster Tiles​

Vector Tiles​

Vector Files​

Related​

DeckGL

Setup

H3HexagonLayer

Vector Tile Layer

Raster Tile Layer

Felt

Raster Tiles

Vector Data

Kepler

Usage

Mapbox

Basic Setup

Vector Tiles

Raster Tiles

QGIS

Raster Tiles

Vector Tiles

Vector Files

Related