Maplibre-GL Statistics Layers MVT

Give meaningful context to your map with statistical data layers 
<!DOCTYPE html>
<html>
<head>
    <!--  Include maplibregl javascript and css -->
    <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-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%;
        }
        .maplibregl-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]
        
        // add the map and set the initial center to berlin
        const map = new maplibregl.Map({
            container: 'map',
            style: client.basemaps.getGLStyleURL("Light"),
            zoom: 12,
            center: [-0.09725, 51.5079]
        }).addControl(new maplibregl.NavigationControl())
        
        // disable scroll zoom
        map.scrollZoom.disable()
        
        map.on('load', async () => {
            // get metadata for statistics group 274 (England and Wales ONS Census 2021 (Output Areas))
            // to see the available statistics, as well as details of the dataset
            // const meta = await client.statistics.metadata(274)
        
            // get details of the population statistics, statistic id 0, of group 274
            const populationMeta = await client.statistics.metadataKey(274, { id: 0 })
        
            // get the vectortiles url
            const tileRoute = await client.statistics.tileRoute(274, [{ 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,
                    attribution: '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>'
                },
                "source-layer": "274", // 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 maplibregl.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