viewof map = {
const container = html`<div style="height:1080px;">`;
yield container; // Give the container dimensions.
const map = container.value = new mapboxgl.Map({
container,
center: [0, 0],
zoom: 0,
//style: "mapbox://styles/andreabenedetti/ck9k1hanw0ym11iny0k6y8i2a",
style: "mapbox://styles/bea9292/ck9pnzdje0x8i1jufl7zylc7c",
scrollZoom: true
});
map.on("load", () => {
map.addSource('voronoi', {
'type': 'geojson',
'data': voronoi
});
map.addLayer({
'id': 'voronoi',
'type': 'line',
'source': 'voronoi',
'layout': {},
'paint': {
"line-color": "#FFFFFF",
"line-width": 0.75
}
});
map.addSource('topoi', {
'type': 'geojson',
'data': topoi
});
map.addLayer({
'id': 'topoi',
'type': 'circle',
'source': 'topoi',
'layout': {},
'paint': {
'circle-radius': 3,
'circle-color': 'peachpuff',
'circle-stroke-color': 'white',
'circle-stroke-width': 1,
'circle-opacity': 0.5
}
});
map.addLayer({
'id': 'poi-labels',
'type': 'symbol',
'source': 'topoi',
'layout': {
'text-field': [
'format',
['get', 'places__place__location__name'],
{ 'font-scale': 0.8 },
],
'text-font': ['DIN Pro Regular', 'Arial Unicode MS Bold'],
'text-offset': [0, 0.2],
'text-anchor': 'top',
},
'paint': {
'text-color': '#FFFFFF',
"text-halo-color": "#000000",
"text-halo-width": 2,
"text-halo-blur": 1
},
});
});
invalidation.then(() => map.remove());
}
voronoi = "https://gist.githubusercontent.com/andreabenedetti/bd34294194a13ca49b4849de98370340/raw/db038e5ca9168d09423daa6bb2598f9e0a06bd77/quarantiles.geojson"
topoi = "https://gist.githubusercontent.com/andreabenedetti/15f502939f06a5981c4ef839a7ef8f9f/raw/34a7df228f4979d4cd40ccf875ecb0b8101cd353/quarantopoi-1.geojson"
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.
