Public
Edited
Jul 31, 2023
map = {
const container = htl.html`<div style="height: 500px;"></div>`;
const map = L.map(container).setView([4.570, -74.2973], 5); // Change the zoom level to 4
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Replace cartilla_lugares_de_memoria_mnm with your actual GeoJSON object
const geojsonObject = cartilla_lugares_de_memoria_mnm;
// Create a Leaflet GeoJSON layer and add it to the map
const geojsonLayer = L.geoJSON(geojsonObject).addTo(map);
// Optionally, you can customize the GeoJSON layer's style
geojsonLayer.setStyle({
color: 'red',
fillColor: 'orange',
weight: 2,
opacity: 1,
fillOpacity: 0.6
});
// Fit the map bounds to the GeoJSON layer
map.fitBounds(geojsonLayer.getBounds());
// Set the zoom level to 10 after logging the initial zoom level
setTimeout(() => {
map.setZoom(5);
}, 1000); // Change the delay (in milliseconds) as needed
return container;
}
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.
