Datos de los Viajeros
csvString = fetch(pathViajeros).then((response) => response.text())
dataProcedencia = d3.csvParse(procedenciaString, d3.autoType)
granColombia = FileAttachment("granColombia@1.geojson").json()
geoCaminoQuindio = FileAttachment("AnyConv.com__Camino del Quindío.geojson").json()
lineaCaminoQuindio = FileAttachment("geoJsonCaminoQuindio(3).json").json()
rutasViajeros = FileAttachment("Viajeros.geojson").json()
dataViajeros
Type Table, then Shift-Enter. Ctrl-space for more options.
mapaGranColombia = {
const container = yield htl.html`<div style="height: 600px;">`;
const map = L.map(container);
const layer = L.geoJSON(granColombia, {
style: {
color: 'blue',
weight: 0.2
}
}).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);
const colores = d3.schemePaired;
const markers = L.layerGroup(); // Utiliza L.layerGroup en lugar de L.markerClusterGroup
const marker = L.geoJson(rutasViajeros, {
style: function (feature) {
if (feature.geometry.type === 'LineString') {
const indiceColor = rutasViajeros.features.indexOf(feature) % colores.length;
return {
color: colores[indiceColor],
weight: 8
};
}
},
onEachFeature: function (feature, layer) {
if (feature.properties && feature.properties.name) {
layer.bindPopup(`<h1>${feature.properties.name}</h1>`, {
maxWidth: 600
});
layer.on('mouseover', function () {
layer.setStyle({ weight: 10, opacity: 1 });
});
layer.on('mouseout', function () {
layer.setStyle({ weight: 8, opacity: 0.8 });
});
if (feature.geometry.type === 'LineString') {
// Agregar etiquetas con el nombre del viajero
const midpointIndex = Math.floor(feature.geometry.coordinates.length / 2);
const midpoint = feature.geometry.coordinates[midpointIndex];
L.marker([midpoint[1], midpoint[0]], {
icon: L.divIcon({
className: 'label',
html: `<div style="background-color: white; padding: 2px;">${feature.properties.name}</div>`,
iconSize: [100, 40] // Ajusta el tamaño del icono según sea necesario
})
}).addTo(markers); // Agregar al grupo de capas en lugar de al mapa directamente
}
}
}
});
map.setView([4, -71], 5);
markers.addLayer(marker);
map.addLayer(markers);
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
mapaCodazzi = {
const container = htl.html`<div style="height: 600px;">`;
const map = L.map(container).setView([20, -50], 4);
const colorScale = d3.scaleOrdinal(d3.schemeSet1);
// Capa base de OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Datos de los lugares (nombre, coordenadas y descripción)
const datosParaMapa = [
{nombre: "Turín", latitud: 45.0703, longitud: 7.6869, papel: "Lugar donde los archivos de Codazzi llegaron en 1898 y se conservaron en la Biblioteca Nacional Universitaria de Turín."},
{nombre: "Roma", latitud: 41.9028, longitud: 12.4964, papel: "Sede de la Sociedad Geográfica Italiana, donde parte de los documentos de Codazzi fueron gestionados y discutidos."},
{nombre: "Lugo", latitud: 44.4170, longitud: 11.8990, papel: "Ciudad natal de Codazzi, donde en 1882 su hijo Lorenzo donó algunos de los mapas."},
{nombre: "Bogotá", latitud: 4.7110, longitud: -74.0721, papel: "Archivos de Codazzi microfilmados y depositados en el Archivo General de la Nación, donde son consultados por investigadores."},
{nombre: "Génova", latitud: 44.4056, longitud: 8.9463, papel: "Posible puerto de entrada de los archivos de Codazzi a Italia antes de llegar a Turín."},
{nombre: "Forlí", latitud: 44.2227, longitud: 12.0407, papel: "Lugar donde se conservaron algunos mapas de Codazzi donados por su hijo Lorenzo."},
{nombre: "Biblioteca Nacional Universitaria de Turín", latitud: 45.0703, longitud: 7.6869, papel: "Institución donde se conservaron y organizaron los archivos de Codazzi después de su llegada a Italia."}
];
// Añadir los círculos en el mapa
datosParaMapa.forEach((d, i) => {
const color = colorScale(i); // Obtener el color de la escala ordinal
// Añadir círculo al mapa
const circle = L.circle([d.latitud, d.longitud], {
radius: 50000, // Ajusta el radio según tus necesidades
color: color,
fillColor: color,
fillOpacity: 0.5
}).addTo(map);
// Añadir pop-up con información sobre el papel en la deriva del archivo
circle.bindPopup(`<b>${d.nombre}</b><br>${d.papel}`);
});
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.
