data = {
let response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson');
let json = await response.json();
return json;
}
quakes = data.features.filter(function (value) {
return value.properties.mag >= 2;}); //this does filter my geoJSON down but the map looks the same
//to pull out the earthquakes mag from features data
//quakesmag =
//quakes.map(function(d) {return d.properties.mag; });
//filteredmag = quakesmag.filter(function (value) {
// return value >= 2;});
map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
// "yield" -- pause/resume "generator" function
// Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([40.7299, -30.9923], 1);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png',{
// 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);
// 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);
};
// var magfilter = function (feature, layer){
// return feature.properties.mag >= 2;
// }; //creating function to filter for earthquakes greater than 2
let quakesLayer = L.geoJson(quakes, { pointToLayer: pointToLayer }).addTo(map);
//grandCentralLayer.bindPopup('Grand Central Terminal');
map.fitBounds(quakesLayer.getBounds());
}
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.
