Published
Edited
Aug 9, 2019
Insert cell
Insert cell
Insert cell
viewof startDate = html`<input type="number" value="1900" id="startDate">`
Insert cell
Insert cell
viewof endDate = html`<input type="number" value="2019" id="endDate">`
Insert cell
viewof map = {
let container = html`<div id="map" style='height:600px;' />`;
yield container;

var dateFilter = ["all",[">=", 'date', startDate],["<=", 'date', endDate]];
let map = new mapboxgl.Map({
container,
center: [-73.976, 40.738],
zoom: 10,
style: "mapbox://styles/dhalpern/cjz09p3o75h381cjwyn2oq5yv?fresh=true"
});
// Wait until the map loads.
map.on("load", () => {
map.setFilter('test-layer', dateFilter);
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more