Public
Edited
Dec 1, 2022
school = FileAttachment("school.png").image()
Maplibre Earthquakes
maplibregl = require("maplibre-gl@2.1.9")
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
viewof range = Inputs.range([0, 10], {label: "Magnitude", step: 0.1})
World = {
const container = yield html`<div style="height:800px;">`;
const map = (container.value = new maplibregl.Map({
//interactive: false,
boxZoom: true,
pitch: 0,
bearing: 0,
maplibreLogo: true,
container,
center: [-70.2568, 43.64],
zoom: 12,
style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
scrollZoom: true
}));
map.on('load', function() {
map.loadImage('https://i.imgur.com/VzRWfNk.png',
function(error,image){
if (error) throw error;
map.addImage('schoolIcon', image)});
map.addSource('quake_points', {
type: 'geojson',
data: data
});
map.addLayer({
id: 'earthquakes',
type: 'symbol',
source: 'quake_points',
'layout': {
'icon-image': 'schoolIcon',
'icon-size': 1
}
});
});
map.on('mouseenter', 'earthquakes', function (e) {
popup.setLngLat(e.lngLat).setHTML('<h3>' + e.features[0].properties.place + '</h3>').addTo(map);
});
map.on('mouseleave', 'earthquakes', function (e) {
popup.remove();
});
}
popup = new maplibregl.Popup({
closeButton: false,
closeOnClick: false
});
source = World.value.getSource("quake_points");
source.setData(newSelected)
data = d3.json('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson')
quakes = data.features.map(d => ({
name: d.properties.title,
longitude: d.geometry.coordinates[0],
latitude: d.geometry.coordinates[1],
datum: d, // Save a copy of the entire earthquake datum for other data-driven features
}))
selected = data.features.map(d => d.properties.mag < range ? d : null)
newSelected = []
{
for(var i = 0; i < selected.length; i++){
if (selected[i] != null){
newSelected.push(selected[i])}
}
return newSelected}
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.
