Published
Edited
Feb 23, 2021
map = {
const container = html`<div style="height:400px;">`;
yield container;
const map = L.map(container).setView([51.49, 0], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
// virtual grid
const vg = new VirtualGrid();
vg.addTo(map);
vg.on("cellcreate", function(e) {
L.rectangle([e.bounds.getSouthWest(), e.bounds.getNorthEast()], {
fill: false
}).addTo(map);
});
// listen for when cells reenter the view
vg.on("cellenter", function(e) {
console.log(e.type, e);
});
// listen for when cells leave the view
vg.on("cellleave", function(e) {
console.log(e.type, e);
});
}
VirtualGrid = require('leaflet-virtual-grid@1.0.7/dist/virtual-grid.js')
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.
