The avatar for @eczajk1
Eric Czajkowski
GIS Developer
Published
GeoDev Summit 2019
Edited
Feb 28, 2019
3 stars
GeoDev Summit 2019
Drawing a lot of markers with Leaflet
OpenLayers/geojson-vt - Railroad Crossingsdeck.gl - Railroad Crossingsdeck.gl - National Bridge Inventory
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
points = {
if (app.bbox && app.bbox.length) {
return turf.randomPoint(numberOfPoints, {bbox: app.bbox });
}
return { features: [] };
}
Insert cell
Insert cell
layerGroup = L.layerGroup().addTo(mapInstance);
Insert cell
{
const markers = points.features.map((f) => L.marker(f.geometry.coordinates.reverse()));
layerGroup.clearLayers();
markers.forEach(m => layerGroup.addLayer(m));
}
Insert cell
Insert cell
mapInstance = {
let map = L.map(mapContainer, {
center: [40.89, -77.69],
zoom: 8,
});
yield map;
const s = () => {
app.bbox = map.getBounds().toBBoxString().split(',').map(n => Number(n));
};
map.whenReady(s);
map.on('moveend', s);
let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {
attribution: 'Wikimedia maps beta | &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
}
Insert cell
Insert cell
Insert cell
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
Insert cell
Insert cell
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