2c:null 2d:["$","title",null,{"children":"Viaje a Ecuador | juanFelipe | Observable"}] 32:T8d8,//L = await require("leaflet@1/dist/leaflet.js") // L = { // const L = await require('leaflet@1.9.4'); // await require('leaflet.markercluster'); // //await require('leaflet.heat'); // const leafletCSS = await require.resolve("leaflet@1/dist/leaflet.css"); // const leafletDefaultExtent = await require.resolve('leaflet.defaultextent/dist/leaflet.defaultextent.css'); // const markerclusterCSS = await require.resolve('leaflet.markercluster@1.4.1/dist/MarkerCluster.css'); // const markerclusterCSSdefault = await require.resolve('leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css'); // document.head.appendChild(L._style = html``); // document.head.appendChild(L._style = html``); // document.head.appendChild(L._style = html``); // document.head.appendChild(L._style = html``); // return L; // } // from https://observablehq.com/@pbrockmann/leaflet-synchro L = { const r = require.alias({ leaflet: "leaflet@1.9.4/dist/leaflet-src.js", "leaflet/dist/leaflet.css": "leaflet@1.8.0/dist/leaflet.css", "leaflet.markercluster": "leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js", "leaflet.markercluster/dist/MarkerCluster.css": "leaflet.markercluster@1.4.1/dist/MarkerCluster.css", "leaflet.markercluster/dist/MarkerCluster.Default.css": "leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css", "leaflet.heat": "leaflet.heat/dist/leaflet-heat.js", }); const L = await r("leaflet"); await Promise.all([ r("leaflet.markercluster").catch(() => {}), r("leaflet.heat").catch(() => {}) ]); if (!L._style) { // apply stylesheets (only once on load) L._style = true; document.head.append(htl.html` `); } return L; }33:T7e7,mapa = { const alto = 600 const svg = d3.create("svg").attr("viewBox", [0,0, width, alto]) const nombresPuntos = caminoQuindioPuntos.features.map( d => d.properties.name) const baseMap = svg.append("g").selectAll("path") .data(geoEcuador.features) .join("path") .attr("d", geoGenerator) .attr("fill", "#a8dadc") .attr("stroke", "#f1faee") const caminoPath = svg.append("g").selectAll("path") .data(puntosEcuador.features) .join("path") .attr('d', geoGenerator) .attr("fill", "none") .attr("stroke", "#1d3557") .attr("stroke-width", "1") const caminoPuntos = svg.append("g").selectAll("circle") .data(puntosEcuador.features) .join("circle") .attr("cx", d => projection(d.geometry.coordinates)[0]) .attr("cy", d => projection(d.geometry.coordinates)[1]) .attr("r", 2) .attr("fill", "#f1faee") .attr("stroke", "#e63946") .on("mouseover", function(e,d) { d3.select(e.target) .transition() .attr("r", 6) .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", 2) .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() }34:T64b,mapaViaje = { const container = yield htl.html`

`; const map = L.map(container); var autoPanPadding = L.point(5, 5); const layer = L.geoJSON(geoEcuador, { style: { color: 'blue', weight: 0.5 } }).addTo(map); map.fitBounds(layer.getBounds(), {maxZoom: 9}); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors" }).addTo(map); const markers = L.markerClusterGroup() const marker = L.geoJson(puntosEcuador, { style: { color: 'yellow', weight: 2 }, onEachFeature: function (feature, layer) { if (feature.properties && feature.properties.name) { layer.bindPopup(`

${feature.properties.name}

${feature.properties.description}

`, { maxWidth: 600, autoPanPadding: autoPanPadding }); // Configura el evento hover para mostrar información adicional layer.on('mouseover', function (e) { const hoveredMarker = e.target; // Agrega información adicional al popup en hover hoveredMarker.bindPopup(`

${feature.properties.name}

Información adicional

`); // Abre el popup al hacer hover hoveredMarker.openPopup(); }); // Cierra el popup al salir del hover layer.on('mouseout', function (e) { const hoveredMarker = e.target; hoveredMarker.closePopup(); }); } } }) markers.addLayer(marker) map.addLayer(markers) } 35:[{"id":"c926c0cc0d79e289d8f84d7ca6d2845be2b1bc7ec04fcd9d6af69e4458173ff73434bbe577c93fdc40370b85e7587d3120e972e2482e3b497a90fd793faf406d","href":"https://static.observableusercontent.com/files/c926c0cc0d79e289d8f84d7ca6d2845be2b1bc7ec04fcd9d6af69e4458173ff73434bbe577c93fdc40370b85e7587d3120e972e2482e3b497a90fd793faf406d","name":"ecuador.geojson","type":"application/geo+json","lastModified":1699389956730.254,"size":40641},{"id":"6350d80d4365dfd6368e0aec510379dcb93b2864ce838a39ffb7fe3c4f28a764768e64dae31d01b7000958103be06a5812cf5451bf98abc58a161aaf14d1af87","href":"https://static.observableusercontent.com/files/6350d80d4365dfd6368e0aec510379dcb93b2864ce838a39ffb7fe3c4f28a764768e64dae31d01b7000958103be06a5812cf5451bf98abc58a161aaf14d1af87","name":"Viaje a Ecuador(2)(1)@3.geojson","type":"application/geo+json","lastModified":1699389956730.254,"size":37381},{"id":"0c9af33d5e57b23fbd98d4ac43c7516a2069261b48db315bb4ab5e9766a4f7eb1afeb07739ce35cb1fbebab28ceaf40083e308f9650589a74449a3d24f3b7ebd","href":"https://static.observableusercontent.com/files/0c9af33d5e57b23fbd98d4ac43c7516a2069261b48db315bb4ab5e9766a4f7eb1afeb07739ce35cb1fbebab28ceaf40083e308f9650589a74449a3d24f3b7ebd","name":"AnyConv.com__Camino del Quindío.geojson","type":"application/geo+json","lastModified":1699389956730.254,"size":6211}] 30:{"id":"0604eedb97501f06","slug":null,"title":"Viaje a Ecuador","thumbnail":"9167224ccee6d77bbbdab39f729cfcf99b3b0e4e905a6b49bb7d48eda4576b21","access_level":"public","create_time":"$D2023-11-07T20:45:56.730Z","update_time":"$D2023-11-18T17:47:14.366Z","view_time":null,"first_public_time":"$D2023-11-07T20:45:56.730Z","has_unpublished_edits":null,"fork":{"id":"f909cb1a88738eda","slug":"viaje-a-ecuador-1","title":"Viaje a Ecuador","owner":{"id":"b08d810ce7971cef","login":"juanfuc","name":"juanFelipe"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b08d810ce7971cef","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":"starter_2024"},"version":595,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"787cd2505170a6b7","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":null}],"members":[{"type":"individual","id":"787cd2505170a6b7","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Viaje a Ecuador","cells":[{"id":0,"value":"# Viaje a Ecuador","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"geoEcuador = FileAttachment(\"ecuador.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"puntosEcuador = FileAttachment(\"Viaje a Ecuador(2)(1)@3.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"caminoQuindioPuntos = FileAttachment(\"AnyConv.com__Camino del Quindío.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"projection = d3.geoMercator()\n.scale(3000)\n.center([-84.8, -1.5]) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"geoGenerator = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"puntosEcuador.features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"