Published
Edited
Feb 18, 2020
1 fork
3 stars
md`# US Building Footprints - Vector Tile Map`
centerpoint
viewof centerpoint = {
let container = html`<div style='height:800px;' />`;
// Give the container dimensions.
yield container;
// Create the \`map\` object with the mapboxgl.Map constructor, referencing
// the container div
let map = new mapboxgl.Map({
container,
center: [-74.05735267830434, 40.80723906267042],
zoom: 8,
style: "mapbox://styles/sinclarius/cjyfpabft0u8s1dpcfb99lion"
});
map.on("mousemove", e => {
container.value = e.lngLat;
container.dispatchEvent(new CustomEvent("input"));
});
map.on('load', function () {
var layers = map.getStyle().layers;
// Find the index of the first symbol layer in the map style
var firstSymbolId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol') {
firstSymbolId = layers[i].id;
break;
}
}
map.addLayer({
'id': 'building-fill',
'type': 'fill',
"source": {
type: 'vector',
url: 'mapbox://sinclarius.85till2b'
},
'source-layer': 'buildings',
'layout': {
},
'paint': {
'fill-color': '#e39f91',
'fill-opacity': 1
}
}, firstSymbolId)});
}
md`## Libraries`
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.
