path = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTBIjdsvW9CukMdb8zkld70PCLFhk1f9g5331SHn7e6Wg4NgKv7YrO9BAjInskKlTZ9VvNBVYjiwhpi/pub?output=csv"
csvString = fetch(path).then((response) => response.text())
imgUrl = "https://lh3.googleusercontent.com/d/"
procedenciaViajeros = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQdjHfroKYFIO4RK7vFDJwaMuy59i-JtPJ9w4xs_mT4x7lLO0PJhf-tVeOuNVHHexKeakK4CzNJXiLA/pub?output=csv"
procedenciaString = fetch(procedenciaViajeros).then((response) => response.text())
dataProcedencia = d3.csvParse(procedenciaString, d3.autoType)
procedenciaGroup = d3.group(dataProcedencia, d => d.procedencia)
arrayProcedencia = Array.from(procedenciaGroup.values()).map(group => group[0]);
iconify = import(await FileAttachment("iconify-icon.min.js").url())
geoEcuador = FileAttachment("ecuador.geojson").json()
caminosCargueros = FileAttachment("Mapa Cargueros.geojson").json()
lineStringCargueros = caminosCargueros.features.find(feature => feature.geometry.type === 'LineString').geometry.coordinates;
lineCaminosCargueros = caminosCargueros.features.filter(feature => feature.geometry.type === 'LineString')
coordinates = puntosQuindio.features[17].geometry.coordinates
line = d3.line()
.x(d => projection(d)[0])
.y(d => projection(d)[1]);
mapa = {
const alto = 600
const svg = d3.create("svg").attr("viewBox", [0,0, width, alto])
const baseMap = svg.append("g").selectAll("path")
.data(geoColombia.features)
.join("path")
.attr("d", geoGenerator)
.attr("fill", "#a8dadc")
.attr("stroke", "#f1faee")
const caminoPath = svg.append("g").selectAll("path")
.data(lineCoordinates)
.join("path")
.attr('d', line)
.attr("fill", "none")
.attr("stroke", "#1d3557")
.attr("stroke-width", "1")
const caminoPuntos = svg.append("g").selectAll("circle")
.data(puntosQuindio.features)
.join("circle")
.attr("cx", d => projection(d.geometry.coordinates)[0])
.attr("cy", d => projection(d.geometry.coordinates)[1])
.attr("r", 1)
.attr("fill", "#f1faee")
.attr("stroke", "#e63946")
.on("mouseover", function(e,d) {
d3.select(e.target)
.transition()
.attr("r", 2)
.attr("fill", "#e63946")
.attr("stroke", "#f1faee")
svg.append("text")
.text(d.properties.name)
.attr("x", projection(d.geometry.coordinates)[0])
.attr("y", projection(d.geometry.coordinates)[1] - 20)
.attr("fill", "#1d3557")
.style("font-size", "1em")
.style("cursor", "pointer");
})
.on("mouseout", function(e,d) {
svg.selectAll("text").remove()
d3.select(e.target)
.transition()
.attr("r", 1)
.attr("fill", "#f1faee")
.attr("stroke", "#e63946")
})
const zoom = d3.zoom()
.scaleExtent([-29, 29])
.on("zoom", zoomed);
svg.call(zoom);
//svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
function zoomed(event) {
const { transform } = event;
baseMap.attr("transform", transform);
caminoPath.attr("transform", transform);
caminoPuntos.attr("transform", transform);
}
return svg.node()
}
mapaViaje = {
const container = yield htl.html`<div style="height: 1000px;">`;
const map = L.map(container);
var autoPanPadding = L.point(5, 5);
const layerEcuador = L.geoJSON(geoEcuador, {
style: {
color: 'blue',
weight: 0.5
}
}).addTo(map);
map.fitBounds(layerEcuador.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 layerColombia = L.geoJSON(geoColombia, {
style: {
color: 'blue',
weight: 0.5
}
}).addTo(map);
map.fitBounds(layerColombia.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);
map.setView([4, -74.8], 6);
const nombreCaminoMap = {
"Ibagué - Cartago": "Quindío",
"Cartago - Novita": "Chocó",
"Nare - Medellín": "Antioquia",
"Pasto - Mocoa": "Putumayo",
"Quito - Napo": "Napo",
"Huila - Caquetá": "Caquetá"
};
function caminoSeleccionado(camino) {
const nombreRealDelCamino = nombreCaminoMap[camino];
const filtradas = data
.filter(d => d.camino === nombreRealDelCamino && d.otros === false)
.map(d => ({
url: d.url,
autor: d.autor,
nombre: d.obras,
fecha: d.fecha,
repositorio: d.repositorio
}));
return filtradas;
}
// Iterar sobre cada feature en el GeoJSON para las líneas
caminosCargueros.features.forEach(feature => {
const lineName = feature.properties.name;
const urlsFiltradas = caminoSeleccionado(lineName);
feature.properties.images = urlsFiltradas;
});
// Filtrar los puntos de caminosCargueros
const puntosCargueros = caminosCargueros.features.filter(feature => feature.geometry.type === 'Point');
// Asociar nombres de línea con colores usando d3.schemeCategory10
const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
const lineColors = {
"Ibagué - Cartago": colorScale(0),
"Cartago - Novita": colorScale(1),
"Nare - Medellín": colorScale(2),
"Pasto - Mocoa": colorScale(3),
"Quito - Napo": colorScale(4),
"Huila - Caquetá": colorScale(5),
};
// Configuración para las líneas
const markersLines = L.markerClusterGroup();
const markerLinesLayer = L.geoJSON(caminosCargueros, {
style: function (feature) {
const lineName = feature.properties.name;
return {
weight: 8,
opacity: 0.8,
color: lineColors[lineName]
};
},
onEachFeature: function (feature, layer) {
if (feature.properties && feature.properties.name) {
layer.on('click', function () {
layer.openPopup();
});
layer.bindPopup(function () {
var popupContent = `<h1>${feature.properties.name}</h1><div id="image-carousel">`;
feature.properties.images.forEach(function (imageInfo) {
popupContent += `
<div class="image-container">
<img src="${imageInfo.url}"/>
<div class="image-info">
<h3>${imageInfo.nombre}</h3>
<p>${imageInfo.autor}</p>
<p>${imageInfo.fecha}</p>
<a href="${imageInfo.repositorio}" target="_blank"><iconify-icon icon="ph:archive-light"></iconify-icon></a>
</div>
</div>`;
});
popupContent += `</div>`;
return popupContent;
}, {
autoPanPadding: autoPanPadding
});
layer.on('mouseover', function () {
layer.setStyle({ weight: 12, opacity: 1 });
});
layer.on('mouseout', function () {
layer.setStyle({ weight: 8, opacity: 0.8 });
});
}
}
});
markersLines.addLayer(markerLinesLayer);
// Configuración para los puntos
const markersPoints = L.markerClusterGroup();
const markerPointsLayer = L.geoJSON(puntosCargueros, {
onEachFeature: function (feature, layer) {
if (feature.properties && feature.properties.name) {
layer.bindPopup(`<h1>${feature.properties.name}</h1> <img src='${feature.properties.image}'/> <p>${feature.properties.description}</p>`, {
autoPanPadding: autoPanPadding
});
layer.on('mouseover', function (e) {
const hoveredMarker = e.target;
hoveredMarker.bindPopup(`<h1>${feature.properties.name}</h1>`);
hoveredMarker.openPopup();
});
layer.on('mouseout', function (e) {
const hoveredMarker = e.target;
hoveredMarker.closePopup();
});
}
}
});
markersPoints.addLayer(markerPointsLayer);
map.addLayer(markersLines);
map.addLayer(markersPoints);
}
style = html`
<style type="text/css">
.leaflet-popup-content-wrapper {
padding: 10px;
text-align: center;
max-width: 800px; /* Cambiado a max-width para limitar el ancho */
width: auto;
height: auto;
display: flex;
overflow-x: auto;
white-space: nowrap;
scroll-behavior: smooth;
background: #f1f1f1;
color: #331405;
margin: 5px;
font-family: 'Public Sans', sans-serif;
border-radius: 2px;
box-shadow: 0 0 8px #333;
}
#image-carousel {
max-width: 800px; /* Cambiado a max-width para limitar el ancho */
width: auto;
display: flex;
flex-wrap: nowrap; /* Cambiado de row a nowrap */
justify-content: space-between;
margin: 10px;
overflow-x: auto;
}
.image-container {
flex: 0 0 auto;
width: 100%; /* Cambiado a 100% para ocupar el espacio disponible */
border-radius: 2px;
box-shadow: 0 0 8px #333;
transition: all 1.5s ease;
margin-right: 10px;
padding: 10px;
box-sizing: border-box;
cursor: pointer;
}
.image-container img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 10px #333;
transition: all 1s ease;
}
.image-container img:hover {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 18px #333;
transition: all 1s ease;
}
.image-info {
text-align: left;
padding: 10px;
box-sizing: border-box;
white-space: normal;
font-size: 16px;
color: #331405;
}
.image-info a {
text-align: left;
box-sizing: border-box;
white-space: normal;
font-size: 27px;
color: #331405;
text-decoration: none;
}
.image-info a:hover {
text-align: left;
box-sizing: border-box;
box-shadow: 10 0 0px #333;
white-space: normal;
font-size: 30px;
text-decoration: none;
transition: all 0.8s ease;
}
.leaflet-popup-close-button {
display: none;
}
</style>
`
caminosCargueros.features.map(d => d.properties.name)
colores = d3.schemeCategory10
lineasCargueros = caminosCargueros.features.filter(feature => feature.geometry.type === 'LineString');
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.
