html`2. Link to leaflet.css
<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
md`${result}`
map = {
let map = L.map('myMap', {zoomSnap: 0, zoomAnimation: false});
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);
map.fitBounds([
[-75, -180],
[75, 180]
]);
return map;
}
viewof slider = html`<input type=range min="0" max="10">`//manually set range to 0-10 because earthquake range
result = {
var count = 0;
// The bounds are here for the extra credit question.
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) ? 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;
}
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.
