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">© 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>
Copied to clipboard