Published
Edited
Apr 27, 2021
2 stars
Insert cell
Insert cell
Insert cell
map = {
const container = html`<div style="width:${width}px;height:${
width / 1.6
}px">`;
yield container;

const map = L.map(container).setView([41.3570701, -72.0923688], 16);

const controlLayers = new L.control.layers(
{
"Open Street Maps": OSM_Layer(),
"World Imagery": World_Imagery(),
"World Topo Map": World_Topo().addTo(map)
},
{
"3 Band_CIR": Band_CIR_image_wms().addTo(map)
},
{ position: "topright", collapsed: false }
);

map.addControl(controlLayers);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
L = {
const L = require("leaflet@1.7.1");
const n = html`<link href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" rel=stylesheet>`;
document.head.appendChild(n);
invalidation.then(() => n.remove());
return L;
}
Insert cell
Insert cell
Insert cell
Insert cell
/*
Band_CIR_tile = L.tiledMapLayer({
url: 'https://coast.noaa.gov/arcgis/rest/services/Imagery/3Band_CIR_8Bit_Imagery/ImageServer/tile/{z}/{y}/{x}?blankTile=false',
maxZoom: 17
});
*/
Insert cell
Insert cell

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.
Learn more