Published
Edited
Sep 4, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// update day/night
animate = new Promise(resolve => {
setInterval(function() {
// date = addMinutes(date, 1);
let date = new Date()
// // https://codesandbox.io/s/cbrpb2?file=/src/index.js:580-667
var dayNightJson = new GeoJSONTerminator({
resolution: 2,
time: date
})
if (map.getSource('night-source')) {
map.getSource('night-source').setData(dayNightJson)
} else {
map.addSource('night-source', {
'type': 'geojson',
'data': dayNightJson
})
}
if (!map.getLayer('night-polygon-layer')) {
map.addLayer({
'id': 'night-polygon-layer',
'type': 'fill',
'source': 'night-source',
'layout': {},
'paint': {
'fill-color': '#000000',
'fill-opacity': [
"interpolate",
["linear"],
["zoom"],
0,
0.8,
8,
0.1
],
}
}, 'settlement-subdivision-label');
// map.addLayer({
// 'id': 'night-polygon-layer-line',
// 'type': 'line',
// 'source': 'night-source',
// 'layout': {},
// 'paint': {
// 'line-color': '#000000',
// 'line-width': 20,
// 'line-blur': 20,
// 'line-opacity': 0.5
// }
// }, 'settlement-subdivision-label');
}
}, 1000); // Every 1 second
})
Insert cell
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