31:T698,map = { const container = html`

`; yield container; const googleSat = L.tileLayer( "http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", { maxZoom: 20, subdomains: ["mt0", "mt1", "mt2", "mt3"] } ); const googleTerrain = L.tileLayer( "http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}", { maxZoom: 20, subdomains: ["mt0", "mt1", "mt2", "mt3"] } ); const osm = L.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors" } ); var map = L.map(container, { center: [43.370167, -8.4051497], zoom: 10, layers: [googleSat, googleTerrain, osm] }); const baseMaps = { Satellite: googleSat, Terrain: googleTerrain, OSM: osm }; L.control.layers(baseMaps).addTo(map); const desktop = width > 600; const ev = desktop ? "click" : "touchend"; const radius = desktop ? 5 : 8; console.log({ desktop, ev, radius }); points.features.forEach((point) => { const [lat, lng] = point.geometry.coordinates; let color = "steelblue"; if (lat && lng) { const marker = L.circleMarker([lat, lng], { color, radius }).addTo(map); marker.bindPopup("Cargando datos, por favor espera..."); marker.on("click", onMapClick.bind(this, point.properties)); } }); const load = document.createElement("div"); load.classList.add("spinner-container"); load.innerHTML = `

`; container.appendChild(load); console.log(container); }32:T4d2,function buildTable(d, result) { let distanceRow = ""; let timeRow = ""; console.log({ result }); if (result && result.code === "Ok") { distanceRow = ` Distancia desde Coruña ${(result.routes[0].distance / 1000) .toFixed(1) .replace(".", ",")} km. `; timeRow = ` Tiempo trayecto desde Coruña ${secondsToHms(result.routes[0].duration)} `; } const output = `

${d.ruta_nombre}

${distanceRow}${timeRow} ${Object.entries(d) .filter(([key, value]) => !!value) .filter( ([key, value]) => key !== "position" && key !== "ruta_nombre" && key !== "coordenadas" ) .map(([key, v]) => { let value = v; if (key === "post_url" || key === "wikiloc") { value = `enlace`; } return ``; }) .join("")}

${key.replace( "_", " " )}

${value}

`; return output; }33:[{"id":"68e916a46e4ee010034393bfa061eed58fcb4c79ac3c1761a4eb6eb127e89bc5b2409fdae60c21b109f4cb38bd9f5c8f5b3ada1439c7e2f695b81759ed99b9ef","href":"https://static.observableusercontent.com/files/68e916a46e4ee010034393bfa061eed58fcb4c79ac3c1761a4eb6eb127e89bc5b2409fdae60c21b109f4cb38bd9f5c8f5b3ada1439c7e2f695b81759ed99b9ef","name":"posts_info.tsv","type":"text/tab-separated-values","lastModified":1617751441344.729,"size":36221}] 2f:{"title":"Galician hiking trails","cells":[{"id":0,"value":"md`# Galician hiking trails\nThis post plots scraped data from [Caminando entre senderos](https://www.caminandoentresenderos.com/) ©, a website that contains very well documented hiking trails to do around the world. The ones from Galicia are shown here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`\n\nThis is a project that I have developed simply for my own interest. The original page doesn't have a map where you can see all the trails at once. I wanted to see which routes are closest to the city I live in and to know my travel time to the starting point of the trail.\n\nOf course, all the rights and all the authorship of the information presented here belongs solely and exclusively to the authors of Caminando entre senderos.\n\nI used cheerio to scrape the data and [Open Source Routing Machine](https://github.com/Project-OSRM/osrm-backend) to calculate travel times which I found very interesting and easy to use.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`_____________`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`### _Boring part_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"showPinning = function (show) {\n console.log({ show });\n if (show) {\n document.querySelector(\".spinner-container\").classList.add(\"visible\");\n } else {\n document.querySelector(\".spinner-container\").classList.remove(\"visible\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"async function onMapClick(point, e) {\n showPinning(true);\n e.target.closePopup();\n e.target.unbindPopup();\n console.log(from, {\n name: point.ruta_nombre,\n position: point.position\n });\n const result = await getRoute(from, {\n name: point.ruta_nombre,\n position: point.position\n });\n showPinning(false);\n const newPopup = buildTable(point, result);\n e.target.bindPopup(newPopup).openPopup();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"cors = 'https://api.allorigins.win/get?url='","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"from = ({name: 'Montealto', position:[43.3782272, -8.401748]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"async function getRoute(from, to) {\n const url = `http://router.project-osrm.org/route/v1/driving/${[\n ...from.position\n ].reverse()};${[...to.position].reverse()}`;\n console.log({ url });\n return await soFetch(url, {\n headers: {\n accept:\n \"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\",\n \"accept-language\": \"es,en;q=0.9,fr;q=0.8\",\n \"cache-control\": \"no-cache\",\n pragma: \"no-cache\",\n \"upgrade-insecure-requests\": \"1\"\n },\n referrerPolicy: \"strict-origin-when-cross-origin\",\n method: \"GET\",\n mode: \"cors\",\n credentials: \"omit\"\n })\n .then(res => res.json())\n .catch(e => console.log(e));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"points = {\n const geo = { type: \"FeatureCollection\", features: [] };\n [...data].forEach((d) => {\n const feature = {\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [d.position[0], d.position[1]]\n },\n properties: d\n };\n geo.features.push(feature);\n });\n return geo;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"function secondsToHms(d) {\n d = Number(d);\n var h = Math.floor(d / 3600);\n var m = Math.floor(d % 3600 / 60);\n var s = Math.floor(d % 3600 % 60);\n\n var hDisplay = h > 0 ? h + (h == 1 ? \" hora, \" : \" horas, \") : \"\";\n var mDisplay = m > 0 ? m + (m == 1 ? \" minuto \" : \" minutos\") : \"\";\n return hDisplay + mDisplay; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"data = { \n return [...tsv].filter(d => !!d.ruta_nombre).map(d => {\n const [x, y] = d.coordenadas.split(',');\n let coordenadas = [ null, null ]\n if(x && y){\n coordenadas = [+x.trim(), +y.trim()]\n }\n return Object.assign({ position: coordenadas }, d)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"tsv = FileAttachment(\"posts_info.tsv\").tsv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"import { soFetch } from '@alecglassford/so-fetch'","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}