html`2. Link to leaflet.css
<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
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, -73.9923], 13);
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);
}
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.
