container = html`<div style="height:600px;">`
map = {
const map = L.map(container).setView([0, -0], 2);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
invalidation.then(() => map.remove());
return map;
}
quakesLayer = {
const quakes = await d3.json('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson');
// See: https://leafletjs.com/examples/geojson/
var geojsonMarkerOptions = {
radius: 3,
fillColor: "crimson",
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;
}
quakesLayer.eachLayer(function(quakeLayer) { // Each earthquake has its own "layer"
let mag = quakeLayer.feature.properties.mag;
let opacity = (mag > max_mag) ? 1 : 0;
quakeLayer.setStyle({opacity: opacity, fillOpacity: opacity});
});
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;
}
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.
