Visual Journalism on The Pudding @puddingviz Email: matt@pudding.cool. Support The Pudding: https://t.co/IPU14YnoFv
Published
Edited
May 18, 2020
md`# test map`
viewof centerpoint = {
let container = html`<div style='height:400px;' />`;
// Give the container dimensions.
yield container;
// Create the \`map\` object with the mapboxgl.Map constructor, referencing
// the container div
mapboxgl.accessToken = 'pk.eyJ1Ijoibnl0Z3JhcGhpY3MiLCJhIjoiY2o5YTlyb3ptMTB5bDMybXF2ODRjdThlYyJ9.cytRa2y0Qt3Nedj4eUX67w';
var map = new mapboxgl.Map({
container: container,
style: 'mapbox://styles/nytgraphics/cjmsjh9u308ze2rpk2vh41efx?optimize=true',
center: [-84.191605, 39.758949],
minZoom: 1,
maxZoom: 18,
zoom: 11
});
map.on('load', function() {
map.addSource('fsf', {
'type': 'raster',
'tiles': ['https://tiles-preview.firststreet.org/probability/depth/2035/100/{z}/{x}/{y}.png'],
'tileSize': 256
});
map.addLayer({
'id': 'fsf',
'source': 'fsf',
'type': 'raster',
'minzoom': 0,
'maxzoom': 18,
'paint': { 'raster-opacity': 0.5 } });
});
console.log(map.getCanvas().getContext('webgl'));
}
mapboxgl = {
const gl = await require("mapbox-gl@0.53");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoiZW1hbWQtai1hcm1hbmQiLCJhIjoiY2p0aTBwY3drMGt0ajQ0cGYyMWozZTUyMCJ9.VcYxgVc6cJMaYNC3w-KUyA";
const href = await require.resolve("mapbox-gl@0.53/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
html`<style>
.labeled::after {
margin-left: 2em;
white-space: nowrap;
content: attr(aria-label);
}
body {
margin: 0;
padding: 0;
}
.map-wrapper {
position: relative;
width: 100%;
height: 500px;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.filter-ctrl {
position: absolute;
top: 10px;
right: 100px;
z-index: 1;
width: 180px;
}
.filter-ctrl input[type="text"] {
font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
width: 100%;
border: 0;
background-color: #fff;
height: 30px;
margin: 0;
color: rgba(0, 0, 0, 0.5);
padding: 10px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
</style>`
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.
