Mapbox-GL Statistics Layers MVT

Give meaningful context to your map with statistical data layers 
<!DOCTYPE html>
<html>
<head>
    <!--  Include mapboxgl javascript and css -->
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css" rel="stylesheet">

    <!--  Include targomo core -->
    <script src="https://releases.targomo.com/core/latest.min.js"></script>
    <style>
        body, html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        .mapboxgl-popup-content {
            padding: 10px;
        }

    </style>
</head><body>
    <!--  where the map will live  -->
    <div id="map"></div>

    <script>
        // create targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
        // Coordinates to center the map
        const lnglat = [13.37, 52.52];
        const attributionText = `<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>`;;
        
        // add the map and set the initial center to berlin
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/positron/style.json?key=__your_maptiler_api_key__',
            zoom: 12,
            center: [-0.09725, 51.5079],
            attributionControl: false
        })
            .addControl(new mapboxgl.NavigationControl())
            .addControl(new mapboxgl.AttributionControl({ compact: true, customAttribution: attributionText }));
        
        // disable scroll zoom
        map.scrollZoom.disable();
        
        map.on('load', async () => {
            // get metadata for statistics group 52 (England and Wales Census 2011 (Output Areas))
            // to see the available statistics, as well as details of the dataset
            // const meta = await client.statistics.metadata(52);
        
            // get details of the population statistics, statistic id 0, of group 52
            const populationMeta = await client.statistics.metadataKey(52, { id: 0 });
        
            // get the vectortiles url
            const tileRoute = await client.statistics.tileRoute(52, [{ id: 0 }]);
        
            // http://colorbrewer2.org/?type=sequential&scheme=RdPu&n=7
            const colors = [
                '#feebe2',
                '#fcc5c0',
                '#fa9fb5',
                '#f768a1',
                '#dd3497',
                '#ae017e',
                '#7a0177'
            ];
        
            // create color breakpoints from metadata
            const breakpoints = populationMeta.breakpoints.kmeans.c7.map((b, i) => [
                b,
                colors[i]
            ]);
        
            // build color definition
            const colorDef = [
                "interpolate",
                ["linear"],
                ["get", "0"],
                ...breakpoints.flat()
            ];
        
            // add the tiles to the map
            map.addLayer({
                id: "statistics",
                type: "fill",
                source: {
                    type: "vector",
                    tiles: [tileRoute],
                    minzoom: 10
                },
                "source-layer": "52", // source-layer is the statistic group id
                layout: {},
                paint: {
                    "fill-opacity": 0.5,
                    "fill-color": colorDef,
                    "fill-outline-color": "rgba(255,255,255,.5)"
                }
            }, "place_other");
        
            // population popup
            map.on("click", "statistics", e => {
                const description = `Population: ${e.features[0].properties["0"]}`;
                new mapboxgl.Popup()
                    .setLngLat(e.lngLat)
                    .setHTML(description)
                    .addTo(map);
            });
        
            map.on('mouseenter', 'statistics', function (e) {
                // Change the cursor style as a UI indicator.
                map.getCanvas().style.cursor = 'pointer';
            });
        
            map.on('mouseleave', 'statistics', function () {
                // change back the cursor
                map.getCanvas().style.cursor = '';
            });
        });
    </script>
</body>
</html>
content_copy
Copied to clipboard