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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.