GPX Map Viewer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_180":181,"_182":183},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":88,"_27":36,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":60,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",16,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","map.js","latestPath","fileId","d7511872-3a70-11f0-9108-9e149126039e","name","fileType","script","content","","// Initialize the map\nconst map = L.map(\"map\").setView([0, 0], 2);\n\n// Define basemaps\nconst basemaps = {\n \"OpenStreetMap\": L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\",\n }),\n \"OpenTopoMap\": L.tileLayer(\"https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors, © OpenTopoMap\",\n }),\n \"Thunder - Landscape\": L.tileLayer(\n \"https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=\" + config.THUNDERFOREST_API_KEY,\n {\n attribution: \"© OpenStreetMap contributors, © Thunderforest\",\n maxZoom: 22,\n },\n ),\n \"Thunder - Outdoors\": L.tileLayer(\n \"https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=\" + config.THUNDERFOREST_API_KEY,\n {\n attribution: \"© OpenStreetMap contributors, © Thunderforest\",\n maxZoom: 22,\n },\n ),\n};\n\n// Add default basemap\nbasemaps[\"OpenStreetMap\"].addTo(map);\n\n// Add basemap control\nL.control.layers(basemaps).addTo(map);\n\nlet currentGPX = null;\nlet allFiles = []; // Store all files for filtering\nlet selectedFiles = new Set(); // Store selected files\nlet gpxLayers = new Map(); // Store GPX layers for each file\nlet lastSelectedIndex = -1; // Track the last selected index\n\n// Function to update track opacity\nfunction updateTrackOpacity(opacity) {\n gpxLayers.forEach(layer => {\n if (layer) {\n layer.setStyle({ opacity: opacity, weight: 3 });\n }\n });\n}\n\n// Function to load a GPX file\nasync function loadGPX(gpxFile) {\n // Check if we already have this file loaded\n if (gpxLayers.has(gpxFile.url)) {\n return gpxLayers.get(gpxFile.url);\n }\n\n try {\n // Read the file content\n const text = await gpxFile.file.text();\n\n // Create new GPX layer\n const gpxLayer = new L.GPX(text, {\n async: true,\n marker_options: {\n startIconUrl:\n \"https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png\",\n endIconUrl:\n \"https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png\",\n shadowUrl: \"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png\",\n wptIconUrls: {\n \"\": \"https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png\",\n },\n },\n });\n\n // Wait for the GPX to be loaded\n await new Promise((resolve, reject) => {\n gpxLayer.on(\"loaded\", resolve);\n gpxLayer.on(\"error\", reject);\n });\n\n // Store the layer\n gpxLayers.set(gpxFile.url, gpxLayer);\n return gpxLayer;\n } catch (error) {\n console.error(\"Error loading GPX file:\", error);\n return null;\n }\n}\n\n// Function to update the map with selected files\nasync function updateMap() {\n // Remove all existing layers\n gpxLayers.forEach(layer => {\n if (map.hasLayer(layer)) {\n map.removeLayer(layer);\n }\n });\n\n // Add selected layers and collect their bounds\n const bounds = L.latLngBounds();\n let hasBounds = false;\n\n for (const fileUrl of selectedFiles) {\n const layer = gpxLayers.get(fileUrl);\n if (layer) {\n layer.addTo(map);\n if (layer.getBounds) {\n bounds.extend(layer.getBounds());\n hasBounds = true;\n }\n }\n }\n\n // Fit map to show all tracks if we have bounds\n if (hasBounds) {\n map.fitBounds(bounds, { padding: [50, 50] });\n }\n}\n\n// Function to create file list\nfunction createFileList(files) {\n const container = document.getElementById(\"file-list-container\");\n container.innerHTML = \"\";\n\n files.forEach((file, index) => {\n const div = document.createElement(\"div\");\n div.className = \"file-item\";\n if (selectedFiles.has(file.url)) {\n div.classList.add(\"selected\");\n }\n div.textContent = file.name;\n div.onclick = async (e) => {\n const isMultiSelect = e.metaKey || e.ctrlKey;\n const isRangeSelect = e.shiftKey && lastSelectedIndex !== -1;\n\n if (isRangeSelect) {\n // Select range of files\n const start = Math.min(lastSelectedIndex, index);\n const end = Math.max(lastSelectedIndex, index);\n\n // Clear existing selections if not using multi-select\n if (!isMultiSelect) {\n selectedFiles.clear();\n document.querySelectorAll(\".file-item\").forEach(item => {\n item.classList.remove(\"selected\");\n });\n }\n\n // Select all files in range\n for (let i = start; i <= end; i++) {\n const rangeFile = files[i];\n selectedFiles.add(rangeFile.url);\n container.children[i].classList.add(\"selected\");\n const layer = await loadGPX(rangeFile);\n if (layer) {\n await updateMap();\n }\n }\n } else if (isMultiSelect) {\n // Toggle selection\n if (selectedFiles.has(file.url)) {\n selectedFiles.delete(file.url);\n div.classList.remove(\"selected\");\n } else {\n selectedFiles.add(file.url);\n div.classList.add(\"selected\");\n }\n } else {\n // Single select\n selectedFiles.clear();\n document.querySelectorAll(\".file-item\").forEach(item => {\n item.classList.remove(\"selected\");\n });\n selectedFiles.add(file.url);\n div.classList.add(\"selected\");\n }\n\n // Update last selected index\n lastSelectedIndex = index;\n\n // Load the file if not already loaded\n const layer = await loadGPX(file);\n if (layer) {\n // Update the map\n await updateMap();\n }\n };\n container.appendChild(div);\n });\n}\n\n// Function to filter files based on search input\nfunction filterFiles(searchTerm) {\n const filteredFiles = allFiles.filter(file => file.name.toLowerCase().includes(searchTerm.toLowerCase()));\n createFileList(filteredFiles);\n}\n\n// Function to handle directory selection\nasync function handleDirectorySelect() {\n try {\n // Request directory access\n const dirHandle = await window.showDirectoryPicker();\n\n // Get all files in the directory\n allFiles = [];\n for await (const entry of dirHandle.values()) {\n if (entry.kind === \"file\" && entry.name.endsWith(\".gpx\")) {\n const file = await entry.getFile();\n allFiles.push({\n name: entry.name,\n url: URL.createObjectURL(file),\n file: file,\n });\n }\n }\n\n if (allFiles.length > 0) {\n // Clear previous selections\n selectedFiles.clear();\n gpxLayers.clear();\n lastSelectedIndex = -1;\n\n createFileList(allFiles);\n // Select and load the first file\n selectedFiles.add(allFiles[0].url);\n document.querySelector(\".file-item\").classList.add(\"selected\");\n lastSelectedIndex = 0;\n const layer = await loadGPX(allFiles[0]);\n if (layer) {\n await updateMap();\n }\n } else {\n throw new Error(\"No GPX files found in the selected directory\");\n }\n } catch (error) {\n console.error(\"Error accessing directory:\", error);\n const container = document.getElementById(\"file-list-container\");\n container.innerHTML = \"

Error accessing directory or no GPX files found.

\";\n }\n}\n\n// Add directory selection button and search input\nconst fileList = document.getElementById(\"file-list\");\n\n// Create opacity control\nconst opacityContainer = document.createElement(\"div\");\nopacityContainer.style.marginBottom = \"20px\";\n\nconst opacityLabel = document.createElement(\"label\");\nopacityLabel.textContent = \"Track Opacity: \";\nopacityLabel.style.marginRight = \"10px\";\n\nconst opacitySlider = document.createElement(\"input\");\nopacitySlider.type = \"range\";\nopacitySlider.min = \"0\";\nopacitySlider.max = \"1\";\nopacitySlider.step = \"0.1\";\nopacitySlider.value = \"1\";\nopacitySlider.style.width = \"100%\";\nopacitySlider.style.marginTop = \"5px\";\n\nopacitySlider.addEventListener(\"input\", (e) => {\n updateTrackOpacity(parseFloat(e.target.value));\n});\n\nopacityContainer.appendChild(opacityLabel);\nopacityContainer.appendChild(opacitySlider);\nfileList.insertBefore(opacityContainer, document.getElementById(\"file-list-container\"));\n\n// Create basemap selector\nconst basemapContainer = document.createElement(\"div\");\nbasemapContainer.style.marginBottom = \"20px\";\n\nconst basemapLabel = document.createElement(\"label\");\nbasemapLabel.textContent = \"Base Map: \";\nbasemapLabel.style.marginRight = \"10px\";\n\nconst basemapSelect = document.createElement(\"select\");\nbasemapSelect.style.padding = \"5px\";\nbasemapSelect.style.width = \"100%\";\nbasemapSelect.style.marginTop = \"5px\";\n\nObject.keys(basemaps).forEach(name => {\n const option = document.createElement(\"option\");\n option.value = name;\n option.textContent = name;\n basemapSelect.appendChild(option);\n});\n\nbasemapSelect.addEventListener(\"change\", (e) => {\n // Remove current base layer\n Object.values(basemaps).forEach(layer => {\n if (map.hasLayer(layer)) {\n map.removeLayer(layer);\n }\n });\n // Add selected base layer\n basemaps[e.target.value].addTo(map);\n});\n\nbasemapContainer.appendChild(basemapLabel);\nbasemapContainer.appendChild(basemapSelect);\nfileList.insertBefore(basemapContainer, document.getElementById(\"file-list-container\"));\n\n// Create search container\nconst searchContainer = document.createElement(\"div\");\nsearchContainer.style.marginBottom = \"20px\";\n\n// Create search input\nconst searchInput = document.createElement(\"input\");\nsearchInput.type = \"text\";\nsearchInput.placeholder = \"Search GPX files...\";\nsearchInput.style.width = \"100%\";\nsearchInput.style.padding = \"10px\";\nsearchInput.style.boxSizing = \"border-box\";\nsearchInput.style.marginBottom = \"10px\";\nsearchInput.addEventListener(\"input\", (e) => filterFiles(e.target.value));\n\n// Add elements to the page\nsearchContainer.appendChild(searchInput);\nfileList.insertBefore(searchContainer, document.getElementById(\"file-list-container\"));\n\nconst selectButton = document.createElement(\"button\");\nselectButton.textContent = \"Select GPX Directory\";\nselectButton.style.marginBottom = \"20px\";\nselectButton.style.padding = \"10px\";\nselectButton.style.width = \"100%\";\nselectButton.onclick = handleDirectorySelect;\nfileList.insertBefore(selectButton, document.getElementById(\"file-list-container\"));","createdAt",["D",1748293382387],"branchVersion","branchId","d74f3f7a-3a70-11f0-9108-9e149126039e","id","d74ee0c0-3a70-11f0-9108-9e149126039e","GPXViewer",["D",1748291677148],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A simple viewer for GPX files with open source data layers","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e8b1bf27-85c1-4c04-511f-3297939e1b00/square512?exp=1789730586&sig=17aafb5ac8d726d59c0fbb396caf1abd44ca74278f3e8a8aabb15d1f846996be","1ddd50bc-c8b7-4894-bbd7-afc2cc6750cb","pinnedFileId","be191442-3a73-11f0-8171-9e149126039e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","71771b1e-8da0-406a-9fa3-c5006b9de404","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"isOwned",53,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","bjtitus","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZDNockZZOGtmYnMwRjhwdWx1QVYyNXNrVVcifQ","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":176,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":177,"_82":178,"_84":179,"_86":25},"tree",[163,164,165],"files",[163,164,165],"counts",{"_152":153,"_154":64,"_155":153,"_156":157,"_158":159},"contents",[127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":145,"_32":146,"_30":147,"_131":-5,"_41":42,"_40":141,"_132":60,"_38":148,"_13":149,"_33":20,"_35":150,"_24":25,"_135":-5,"_27":151},{"_43":137,"_32":138,"_30":58,"_131":-5,"_41":42,"_40":139,"_132":60,"_38":140,"_13":141,"_33":142,"_35":143,"_24":25,"_135":-5,"_27":144},{"_43":130,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_132":25,"_38":133,"_13":134,"_33":34,"_35":37,"_24":25,"_135":-5,"_27":136},"cfb6d738-3a74-11f0-9dec-9e149126039e","parentId","latest",["D",1748293382387],2,"label",[28],"79d63cb4-3a74-11f0-8eea-9e149126039e","main.tsx",15,["D",1748293238312],6,"http","import { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n \n // Serve the main index.html page\n if (url.pathname === \"/\" || url.pathname === \"/index.html\") {\n try {\n const html = await readFile(\"/index.html\", import.meta.url);\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n } catch (error) {\n return new Response(\"Error loading index.html\", { status: 500 });\n }\n }\n \n // Proxy Thunderforest tile requests to keep API key private\n if (url.pathname.startsWith(\"/tiles/\")) {\n const thunderforestApiKey = Deno.env.get('thunderforestAPIKey') || '';\n if (!thunderforestApiKey) {\n return new Response(\"API key not configured\", { status: 500 });\n }\n \n // Extract the tile path (everything after /tiles/)\n const tilePath = url.pathname.substring(7); // Remove \"/tiles/\"\n const queryParams = url.search;\n \n // Construct the Thunderforest URL\n const thunderforestUrl = `https://tile.thunderforest.com/${tilePath}?apikey=${thunderforestApiKey}${queryParams ? '&' + queryParams.substring(1) : ''}`;\n \n try {\n const response = await fetch(thunderforestUrl);\n const headers = new Headers();\n \n // Copy relevant headers\n if (response.headers.get('content-type')) {\n headers.set('content-type', response.headers.get('content-type')!);\n }\n \n // Add CORS headers for browser access\n headers.set('Access-Control-Allow-Origin', '*');\n \n return new Response(response.body, {\n status: response.status,\n headers: headers\n });\n } catch (error) {\n return new Response(\"Error fetching tile\", { status: 500 });\n }\n }\n \n // Serve a config.js with free map providers (no API key needed)\n if (url.pathname === \"/config.js\") {\n const configJs = `const config = {\n // Using free OpenStreetMap tiles - no API key required\n MAP_PROVIDERS: {\n osm: {\n url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',\n attribution: '© OpenStreetMap contributors'\n },\n // If you want to use Thunderforest, tiles are proxied through /tiles/\n thunderforest: {\n url: '/tiles/landscape/{z}/{x}/{y}.png',\n attribution: '© Thunderforest, © OpenStreetMap contributors'\n }\n }\n};`;\n \n return new Response(configJs, {\n headers: { \"Content-Type\": \"application/javascript\" },\n });\n }\n \n // Serve map.js\n if (url.pathname === \"/map.js\") {\n try {\n const mapJs = await readFile(\"/map.js\", import.meta.url);\n return new Response(mapJs, {\n headers: { \"Content-Type\": \"application/javascript\" },\n });\n } catch (error) {\n return new Response(\"Error loading map.js\", { status: 500 });\n }\n }\n \n // 404 for other paths\n return new Response(\"Not Found\", { status: 404 });\n}",[138],"f2b9764a-3a70-11f0-bba0-9e149126039e","index.html","ea7ea34c-3a70-11f0-b939-9e149126039e",["D",1748291723139],3,"\n\n \n \n \n GPX Map Viewer\n\n \n \n\n \n \n \n

GPX Files

\n\n \n \n \n \n \n \n \n \n \n",[146],"pulls",0,"branches","forks","envVars",{"_160":64,"_162":153},"connections",{"_160":153,"_161":153},"count","unfilledCount","emptyCount",{"_43":145,"_32":146,"_30":147,"_131":-5,"_41":42,"_40":141,"_132":60,"_38":173,"_13":149,"_33":20,"_35":150,"_24":25,"_135":-5,"_167":174,"_27":175},{"_43":137,"_32":138,"_30":58,"_131":-5,"_41":42,"_40":139,"_132":60,"_38":170,"_13":141,"_33":142,"_35":143,"_24":25,"_135":-5,"_167":171,"_27":172},{"_43":130,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_132":25,"_38":166,"_13":134,"_33":34,"_35":37,"_24":25,"_135":-5,"_167":168,"_27":169},["D",1748293382387],"children",[],[28],["D",1748293238312],[],[138],["D",1748291723139],[],[146],["D",1748291677148],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_124":213,"_214":215,"_216":217,"_218":25,"_219":25,"_220":25,"_221":60,"_222":-5,"_223":-7,"_224":-7,"_225":153,"_226":25,"_227":25,"_228":-5,"_229":25,"_230":25,"_231":25,"_232":-5},"ENV",{"_184":185,"_186":187,"_188":88,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v16