map = {
const container = html`<div style="height:${height}px;">`;
yield container;
const oriental = [35.0310, -76.6930];
const charleston = [32.7765, -79.9311];
// Wikimedia
var wikimedia = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png',
{attribution: "Wikimedia maps | © <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"});
// OpenStreetMap
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
// CartoDB Positron
var cartodb = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'});
// OSM Toner
var toner = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
{attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'});
// White background
var white = L.tileLayer("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAAA1BMVEX///+nxBvIAAAAH0lEQVQYGe3BAQ0AAADCIPunfg43YAAAAAAAAAAA5wIhAAAB9aK9BAAAAABJRU5ErkJggg==");
// Overlay layer (TMS)
var layer = L.tileLayer('https://pbogden.com/mapping/tiles/{z}/{x}/{y}.png',
{tms: true, opacity: 0.7, attribution: "My stuff"});
mutable layer = layer;
var basemaps = {"Wikimedia": wikimedia, "OpenStreetMap": osm, "CartoDB Positron": cartodb,
"Stamen Toner": toner, "rien": white};
var overlaymaps = {"Layer": layer};
var map = L.map(container, {
center: charleston,
zoom: 8,
maxZoom: 12,
layers: [wikimedia, layer]
});
L.control.layers(basemaps, overlaymaps).addTo(map);
}
height = Math.floor(width / 2)
mutable layer = 42
layer._tiles
// Convert to TMS
Object.entries(layer._tiles).map(d => d[1].coords)
.map(d => d.x + ', ' + d.y + ', ' + d.z + ": " + ((1<<d.z) - 1 - d.y))
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.
