DC School BudgetsHot spotsZIP codesMy U.S. Map (Canvas)Planes IIPIREPMy U.S. Map (SVG)Earthquakes on Mapbox GLMapzen DEMMapbox + ThreeChoropleth with OpenLayersdevicePixelRatioHello, LeafletMy Zoom to Bounding BoxD3 + LeafletProject to Bounding BoxZoom to CountyBrushable earthquakesStinkyMapLibre quakesHello, MapLibre!
MapLibre earthquake slider
Also listed in…
earthquakes
map.on("move", () => {
let f = d3.format("7.2f");
let deg = String.fromCharCode(176);
let center = map.getCenter();
let str = `Map center: ${f(center.lng) + deg} E, ${f(center.lat) + deg} N`
mutable z = str;
})
map = {
let source = usgs; // choose basemap from among: stamen, usgs, canada (radar)
let sources = {'raster-tiles': source};
let layers = [{
'id': 'simple-tiles',
'type': 'raster',
'source': 'raster-tiles',
}];
let style = {
version: 8,
sources: sources,
layers: layers
};
const map = container.value = new maplibregl.Map({
container: "map",
//center: [-77.033485, 38.897205], // DC
center: [-95., 37.], // DC
style: style,
zoom: 1,
minZoom: 1,
tiles: ['https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg'],
scrollZoom: true
});
invalidation.then(() => map.remove());
return map
}
stamen = ({
type: 'raster',
tiles: ['https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg'],
tileSize: 256,
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>'
})
usgs = ({
type: 'raster',
tiles: ['https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}'],
tileSize: 256,
attribution: 'United States Geological Survey'
})
canada = ({
type: 'raster',
tiles: ["https://geo.weather.gc.ca/geomet/?" +
"SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX={bbox-epsg-3857}&CRS=EPSG:3857" +
"&WIDTH=1000&HEIGHT=1000&LAYERS=RADAR_1KM_RDBR&TILED=true&FORMAT=image/png"],
tileSize: 256,
attribution: 'Government of Canada'
})
d3.json(
'https://docs.mapbox.com/mapbox-gl-js/assets/significant-earthquakes-2015.geojson',
function (err, data) {
if (err) throw err;
// Create a month property value based on time
// used to filter against.
data.features = data.features.map(function (d) {
d.properties.month = new Date(d.properties.time).getMonth();
return d;
});
map.addSource('earthquakes', {
'type': 'geojson',
data: data
});
map.addLayer({
'id': 'earthquake-circles',
'type': 'circle',
'source': 'earthquakes',
'paint': {
'circle-color': [
'interpolate',
['linear'],
['get', 'mag'],
6,
'#FCA107',
8,
'#7F3121'
],
'circle-opacity': 0.75,
'circle-radius': [
'interpolate',
['linear'],
['get', 'mag'],
6,
20,
8,
40
]
}
});
map.addLayer({
'id': 'earthquake-labels',
'type': 'symbol',
'source': 'earthquakes',
'layout': {
'text-field': [
'concat',
['to-string', ['get', 'mag']],
'm'
],
'text-font': [
'Open Sans Bold',
'Arial Unicode MS Bold'
],
'text-size': 12
},
'paint': {
'text-color': 'rgba(0,0,0,0.5)'
}
});
// Set filter to first month of the year
// 0 = January
filterBy(0);
document
.getElementById('map-slider')
.addEventListener('input', function (e) {
var month = parseInt(e.target.value, 10);
filterBy(month);
});
}
)
function filterBy(month) {
var months = ['January','February','March','April','May','June',
'July','August','September','October','November','December'
];
var filters = ['==', 'month', month];
map.setFilter('earthquake-circles', filters);
map.setFilter('earthquake-labels', filters);
// Set the label to the month
document.getElementById('month').textContent = months[month];
}
html`
<style>
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 25%;
top: 0;
left: 0;
padding: 10px;
}
.map-overlay .map-overlay-inner {
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
}
.map-overlay h2 {
line-height: 24px;
display: block;
margin: 0 0 10px;
}
.map-overlay .legend .bar {
height: 10px;
width: 100%;
background: linear-gradient(to right, #fca107, #7f3121);
}
.map-overlay input {
background-color: transparent;
display: inline-block;
width: 100%;
position: relative;
margin: 0;
cursor: ew-resize;
}
</style>
`
// maplibregl = require("maplibre-gl@2.1.9")
maplibregl = {
const gl = await require("maplibre-gl@2.1");
const href = await require.resolve("maplibre-gl@2.1.9/dist/maplibre-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
return gl;
}
// mapboxgl = {
// const gl = await require("mapbox-gl@1");
// const href = await require.resolve("mapbox-gl@1/dist/mapbox-gl.css");
// document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
// return gl;
// }
d3 = require("d3@3")
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.
