L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
macrostratColumns = {
let response = await fetch('https://macrostrat.org/api/v2/columns?all&format=geojson_bare');
let json = await response.json();
return json
}
macrostratMap = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let macrostratColumnLayer = L.geoJson(macrostratColumns, {
style: () => {
return {
weight: 1,
color: '#432'
}
},
onEachFeature: (feature, layer) => {
layer.bindPopup(`
<h4>${feature.properties.col_name}</h4>
<p>${feature.properties.col_area} km2</p>
`)
}
}).addTo(map);
map.fitBounds(macrostratColumnLayer.getBounds());
}
heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)
crimes = (await fetch('https://opendata.arcgis.com/datasets/6af5cb8dc38e4bcbac8168b27ee104aa_38.geojson')).json()
crimeMap = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([38.896, -77.0459], 11);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Process DC's crime data into the [latitude, longitude, intensity] form that
// Leaflet.heat desires.
let crimePoints = crimes.features.map(feature =>
feature.geometry.coordinates.slice().reverse().concat([0.1]));
let crimeLayer = heatLayer(crimePoints).addTo(map);
}
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.
