Skip to main content

Mapbox (HTML)

Create Mapbox GL JS maps that load data from UDF HTTP endpoints.

You'll first generate a signed UDF URL and render it on an HTML map. You can then use the HTML map in a low-code app like Retool or render it as an iframe in an app such as Notion.

1. Generate a signed URL for a UDF​

First, create a UDF and generate an HTTP endpoint.

2. Create a Mapbox HTML map​

Create an .html file following this template. This code creates a mapbox map, adds a source, and then a layer that renders data from that source. Supported layer types are:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a vector tile source</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<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>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoiaXNhYWNmdXNlZGxhYnMiLCJhIjoiY2xicGdwdHljMHQ1bzN4cWhtNThvbzdqcSJ9.73fb6zHMeO_c8eAXpZVNrA';
    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/dark-v10',
        zoom: 13,
        center: [-122.447303, 37.753574]
    });

    // Optionally, pass parameters to the tile source
    const model = {
        theme: 'building'
    }

    map.on('load', () => {
        map.addSource('fused-vector-source', {
            'type': 'vector',
            'tiles': [ // Vector Tile URL that returns mvt (https://docs.mapbox.com/data/tilesets/guides/vector-tiles-standards/)
                `https://www.fused.io/server/v1/realtime-shared/UDF_Overture_Maps_Example/run/tiles/{z}/{x}/{y}?dtype_out_vector=mvt&type=${model.theme}`
            ],
            'minzoom': 6,
            'maxzoom': 14
        });
        map.addLayer(
            {
                'id': 'fused-vector-layer', // Layer ID
                'type': 'line',
                'source': 'fused-vector-source', // ID of the tile source created above
                'source-layer': 'udf', // Important! The source-layer name is 'udf' for all Fused vector tiles
                'layout': {
                    'line-cap': 'round',
                    'line-join': 'round'
                },
                'paint': {
                    'line-opacity': 0.6,
                    'line-color': 'rgb(53, 175, 109)',
                    'line-width': 2
                }
            }
        );
    })
</script>

</body>
</html>

Vector Tile layers​

Use the following snippet to create a vector layer. The layer in the sample map comes from Overture Buildings UDF.

info

When rendering mvt data types, Mapbox may clip features that exceed the bounds of the tile. A workaround is for the UDF to clip the output at the bounds bounds or to only return features within the bounds. See Discord thread for more information.

note

The dynamic map only shows data when zoomed in. If zoomed out too much we don’t load data to prevent slowing down the docs. Make sure to zoom in to see buildings

<script>
    map.addSource('fused-vector-source', {
        'type': 'vector',
        'tiles': [ // Vector Tile URL that returns mvt (https://docs.mapbox.com/data/tilesets/guides/vector-tiles-standards/)
            `https://www.fused.io/server/v1/realtime-shared/UDF_Overture_Maps_Example/run/tiles/{z}/{x}/{y}?dtype_out_vector=mvt&type=${model.theme}`
        ],
        'minzoom': 6,
        'maxzoom': 14
    });
    map.addLayer(
        {
            'id': 'fused-vector-layer', // Layer ID
            'type': 'line',
            'source': 'fused-vector-source', // ID of the tile source created above
            'source-layer': 'udf', // Important! The source-layer name is 'udf' for Fused vector tiles
            'layout': {
                'line-cap': 'round',
                'line-join': 'round'
            },
            'paint': {
                'line-opacity': 0.6,
                'line-color': 'rgb(53, 175, 109)',
                'line-width': 2
            }
        }
    );
</script>

Raster Tile layers​

Use the following snippet to create a raster layer. The layer in the sample map comes from the Solar Irradiance UDF.

note

The dynamic map only shows data when zoomed in. If zoomed out too much we don’t load data to prevent slowing down the docs. Make sure to zoom in to see buildings

<script>
    map.addSource('fused-irradiation-source', {
        'type': 'raster',
        'tiles': [ // Raster Tile URL that returns png
            'https://www.fused.io/server/v1/realtime-shared/UDF_Solar_Irradiance/run/tiles/{z}/{x}/{y}?dtype_out_raster=png'
        ],
        'tileSize': 256,
        'minzoom': 10,
        'maxzoom': 18
    });
    map.addLayer(
        {
            'id': 'wms-test-layer',
            'type': 'raster',
            'source': 'fused-irradiation-source',
            'paint': {}
        },
        'building' // Place layer under labels, roads and buildings.
    );
</script>