Published
Edited
Jan 7, 2020
quakes = {
let response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson');
let json = await response.json();
return json;
}
container = {
let div = DOM.element('div');
div.style.width = width / 1.9 + "px";
div.style.height = width / 2 + "px";
return div;
}
viewof slider = html`<input type=range min=0 max=10 step=0.1>`
map = {
// Create a map object
let map = L.map(container).setView([0, 0], 1);
// Create a layer object and add it to the map
let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
invalidation.then(() => map.remove());
return map;
}
layer = {
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
// See: https://leafletjs.com/reference-1.4.0.html#geojson-pointtolayer
var pointToLayer = function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
// See: https://leafletjs.com/examples/geojson/
let layer = L.geoJSON(quakes.features, { pointToLayer: pointToLayer }).addTo(map);
return layer;
}
count = {
var count = 0;
// layer is the object returned by L.geoJSON that presents all of the earthquakes
// See: https://leafletjs.com/reference-1.4.0.html#geojson
// the layer.eachLayer() method iterates over each earthquake layer (quakeLayer) in the group
// See: https://leafletjs.com/reference-1.4.0.html#geojson-eachlayer
layer.eachLayer(function(quakeLayer){
// Set the opacity using JavaScript's contitional (ternary) operator.
// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
// Python version: https://docs.python.org/3/reference/expressions.html#conditional-expressions
var opacity = (quakeLayer.feature.properties.mag > slider) ? 1 : 0;
count += opacity; // count the visible earthquakes (i.e. those with opacity = 1)
quakeLayer.setStyle({opacity: opacity, fillOpacity: opacity});
});
return count;
}
bounds = {
yield map.getBounds();
while (true) {
yield new Promise((resolve, reject) => {
map.on('load', function() { resolve(map.getBounds()) });
map.on('zoom', function() { resolve(map.getBounds()) });
map.on('move', function() { resolve(map.getBounds()) });
})
}
}
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
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.
