{
let container = html`<div style='height:600px;' />`;
yield container;
let map = new mapboxgl.Map({
container,
zoom: 2,
style: "mapbox://styles/mapbox/streets-v9",
scrollZoom: false
});
map.addControl(new mapboxgl.NavigationControl(), "top-right");
map.on('load', () => {
map.addSource('ipc', {
type: 'vector',
tiles: [
`${ENDPOINT}/{z}/{x}/{y}?key=${API_KEY}`
],
});
map.addLayer({
id: 'areas',
type: 'fill',
source: 'ipc',
'source-layer': 'areas',
paint: {
'fill-color': fillcolor,
'fill-opacity': 0.9,
},
filter: filter,
});
// also add the layer as a line for borders
map.addLayer({
id: 'borders',
type: 'line',
source: 'ipc',
'source-layer': 'areas',
paint: {
'line-color': '#ffffff',
'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 4, 0.05, 8, 2],
},
filter: filter,
});
});
invalidation.then(() => map.remove());
}
fillcolor = [
'case',
['all', ['==', ['get', 'condition'], 'A'], ['==', ['get', 'overall_phase'], 1]],
'#cef9ce',
['all', ['==', ['get', 'condition'], 'A'], ['==', ['get', 'overall_phase'], 2]],
'#f9e43c',
['all', ['==', ['get', 'condition'], 'A'], ['==', ['get', 'overall_phase'], 3]],
'#e4781f',
['all', ['==', ['get', 'condition'], 'A'], ['==', ['get', 'overall_phase'], 4]],
'#c60813',
['all', ['==', ['get', 'condition'], 'A'], ['==', ['get', 'overall_phase'], 5]],
'#640000',
['all', ['==', ['get', 'condition'], 'C'], ['==', ['get', 'overall_phase'], 1]],
'rgb(204, 255, 204)',
['all', ['==', ['get', 'condition'], 'C'], ['==', ['get', 'overall_phase'], 2]],
'rgb(203, 201, 226)',
['all', ['==', ['get', 'condition'], 'C'], ['==', ['get', 'overall_phase'], 3]],
'rgb(158, 154, 200)',
['all', ['==', ['get', 'condition'], 'C'], ['==', ['get', 'overall_phase'], 4]],
'rgb(106, 81, 163)',
['==', ['get', 'overall_phase'], 9],
'#a6a6a6',
'hsl(0, 0%, 100%)',
];
filter = ['==', ['get', 'current'], true];
// Request data for a single year
// filter = ['==', ['get', 'year'], 2020];
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
gl.accessToken = MAPBOX_TOKEN;
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
