Public
Edited
Aug 15, 2024
Insert cell
Insert cell
mapaCodazzi = {
const container = htl.html`<div style="height: 600px;">`;
const map = L.map(container).setView([27, -35], 4); // Centrado más o menos en la ruta
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: 100000, // 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}`);

});

// Dibujar la línea de desplazamiento desde Bogotá hasta Turín pasando por Génova
const rutaDesplazamiento = [
[4.7110, -74.0721], // Bogotá
[44.4056, 8.9463], // Génova
[45.0703, 7.6869], // Turín
[44.2227, 12.0407], // Forli
[44.4170, 11.8990], // Lugo
[41.9028, 12.4964] // Roma
];

// Añadir una línea con estilo
const line = L.polyline(rutaDesplazamiento, {
color: 'blue', // Color de la línea
weight: 4, // Grosor de la línea
opacity: 0.7, // Opacidad
dashArray: '10, 10' // Líneas punteadas para simular el movimiento
}).addTo(map);

return container;
}

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