Published
Edited
Oct 10, 2022
9 forks
2 stars
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
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;
}
viewof slider = html`<input type=range min=0 max=10 step=0.1>`
map = {
container;
let map = L.map('myMap', {zoomSnap: 0.1, zoomAnimation: false}) ;
L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg', {
attribution: 'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
}).addTo(map);
map.fitBounds([
[-75, -180],
[75, 180]
]);
invalidation.then(() => map.remove());
return map;
}
quakesLayer = {
// See: https://leafletjs.com/examples/geojson/
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);
}
let quakesLayer = L.geoJson(quakes.features, { pointToLayer: pointToLayer }).addTo(map);
return quakesLayer;
}
report = {
var count = 0;
// The bounds are here for the extra credit question.
var bounds = map.getBounds()
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
// Earthquake filtering occurs here
quakesLayer.eachLayer(function(quakeLayer) { // Each earthquake has its own "layer"
var threshold = slider / 10;
// The next line uses Javascript's conditional (ternary) operator.
// If you're not familiar with this operator, then look at the following reference.
// 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
let mag = quakeLayer.feature.properties.mag;
let opacity = ((mag > slider) && bounds.contains(quakeLayer.getLatLng())) ? 1 : 0;
count = count + opacity;
quakeLayer.setStyle({opacity: opacity, fillOpacity: opacity});
});
var bnds = " \nmap bound -- sw: " + Math.round(sw.lng) + " " + Math.round(sw.lat)
+ " \nmap bound -- ne: " + Math.round(ne.lng) + " " + Math.round(ne.lat);
return count + " earthquake" + (count == 1 ? "" : "s") + " exceeding magnitude " + slider + bnds;
}
map.on('load, zoom, move', (evt) => {
viewof slider.dispatchEvent(new CustomEvent("input"));
})
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.
