especiasDeAsia2 = FileAttachment("Especias+de+Asia+2.geojson").json()
{
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container);
const layer = L.geoJSON(especiasDeAsia2).addTo(map);
map.fitBounds(layer.getBounds(), {maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
especiasDeAsia3 = FileAttachment("Especias+de+Asia+3.geojson").json()
{
const container = html`<div style="height: 500px;"></div>`;
// Función para corregir el cruce del antimeridiano
function fixAntimeridian(coords) {
for (let i = 1; i < coords.length; i++) {
if (Math.abs(coords[i][0] - coords[i-1][0]) > 180) {
if (coords[i][0] < coords[i-1][0]) {
coords[i][0] += 360;
} else {
coords[i-1][0] += 360;
}
}
}
return coords;
}
// Clonar y corregir el GeoJSON
const correctedGeoJSON = JSON.parse(JSON.stringify(especiasDeAsia3)); // clonarlo para no modificar el original
correctedGeoJSON.features.forEach(f => {
if (f.geometry.type === "LineString") {
f.geometry.coordinates = fixAntimeridian(f.geometry.coordinates);
} else if (f.geometry.type === "MultiLineString") {
f.geometry.coordinates = f.geometry.coordinates.map(line => fixAntimeridian(line));
}
});
const map = L.map(container);
const layer = L.geoJSON(correctedGeoJSON).addTo(map);
map.fitBounds(layer.getBounds(), { maxZoom: 9 });
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
}).addTo(map);
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.
