dataurl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSOgo_7DfTm0yV0bmX_eWU9gEMYFu4ydtnMYJSx9XZRiScmRx3zKMUxmEANXwj_U8TvkwbBwxTx6BI8/pub?output=csv"
csv = fetch (dataurl).then((response) => response.text())
data = d3.csvParse(csv, d3.autoType)
tabla = Inputs.table(data)
especiasDeAsia2 = FileAttachment("Especias+de+Asia-2.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(especiasDeAsia2)); // 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;
}
map = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView([16.84, -99.90], 1);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
for (const d of data) {
if (d.LATITUD && d. LONGITUD) {
L.marker([+d.LATITUD, +d.LONGITUD])
.addTo(map)
.bindPopup(`<b>${d.ESPECIA}</b><br>${d.ORIGEN}`);
}
}
L.geoJSON(especiasDeAsia2, {
style: function (feature) {
return { color: "darkred", weight: 3 };
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 6,
fillColor: "orange",
color: "darkred",
weight: 1,
opacity: 1,
fillOpacity: 0.8
}).bindPopup(`<b>${feature.properties.name}</b>`);
},
coordsToLatLng: function (coords) {
// Ignora la altitud (Z) y usa solo latitud y longitud
return L.latLng(coords[1], coords[0]);
}
}).addTo(map);
}
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.
