GPX Map Viewer

GPX Files

\n\n \n \n \n \n \n \n \n \n \n",[],[180],{"_105":188,"_98":189,"_150":190,"_152":-5,"_153":137,"_154":191,"_156":157,"_107":192,"_102":182,"_160":193,"_162":194,"_164":27,"_165":-5,"_166":195,"_101":196},"79d63cb4-3a74-11f0-8eea-9e149126039e","main.tsx","be191442-3a73-11f0-8171-9e149126039e",15,["D",1748293238312],"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}",[],[189],{"_105":198,"_98":199,"_150":200,"_152":-5,"_153":137,"_154":201,"_156":157,"_107":202,"_102":203,"_160":204,"_162":205,"_164":27,"_165":-5,"_166":206,"_101":207},"48c27892-3a7c-11f0-a4ba-9e149126039e","map.js","d7511872-3a70-11f0-9108-9e149126039e",33,["D",1748296591947],10,"script","// 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 window.location.origin + \"/tiles/landscape/{z}/{x}/{y}.png\",\n {\n attribution: \"© OpenStreetMap contributors, © Thunderforest\",\n maxZoom: 22,\n },\n ),\n \"Thunder - Outdoors\": L.tileLayer(\n window.location.origin + \"/tiles/outdoors/{z}/{x}/{y}.png\",\n {\n attribution: \"© OpenStreetMap contributors, © Thunderforest\",\n maxZoom: 22,\n },\n ),\n \"USGS - National Map\": L.tileLayer(\n \"https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}?blankTile=false\",\n {\n attribution:\n \"USGS The National Map: National Boundaries Dataset, 3DEP Elevation Program, Geographic Names Information System, National Hydrography Dataset, National Land Cover Database, National Structures Dataset, and National Transportation Dataset; USGS Global Ecosystems; U.S. Census Bureau TIGER/Line data; USFS Road data; Natural Earth Data; U.S. Department of State HIU; NOAA National Centers for Environmental Information. Data refreshed February, 2025.\",\n maxZoom: 22,\n },\n ),\n};\n\n// Add default basemap\nbasemaps[\"OpenStreetMap\"].addTo(map);\n\n// Define overlay layers\nconst overlayLayers = {};\n\n// NOAA Weather Radar WMS Layer\nconst noaaRadarLayer = L.tileLayer.wms('https://opengeo.ncep.noaa.gov/geoserver/conus/conus_bref_qcd/ows', {\n layers: 'conus_bref_qcd',\n format: 'image/png',\n transparent: true,\n version: '1.1.1',\n attribution: '© NOAA National Weather Service',\n opacity: 0.7\n});\n\n// Create layer group for weather radar\nconst weatherRadar = L.layerGroup([noaaRadarLayer]);\noverlayLayers[\"Weather Radar\"] = weatherRadar;\n\n// Add layer control with basemaps and overlays\nconst layerControl = L.control.layers(basemaps, overlayLayers).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\"));",[],[199],"files",[147,169,178,187,197],"counts",{"_212":31,"_213":120,"_214":31,"_215":120},"pulls","branches","forks","envVars","contents",[218,221,224,227,230],{"_105":148,"_98":149,"_150":151,"_152":-5,"_153":137,"_154":155,"_156":157,"_107":219,"_102":159,"_160":161,"_162":163,"_164":27,"_165":-5,"_101":220},["D",1748294435338],[149],{"_105":170,"_98":171,"_150":172,"_152":-5,"_153":137,"_154":136,"_156":157,"_107":222,"_102":174,"_160":161,"_162":175,"_164":27,"_165":-5,"_101":223},["D",1748296763683],[171],{"_105":179,"_98":180,"_150":181,"_152":-5,"_153":137,"_154":182,"_156":157,"_107":225,"_102":159,"_160":161,"_162":184,"_164":27,"_165":-5,"_101":226},["D",1748291723139],[180],{"_105":188,"_98":189,"_150":190,"_152":-5,"_153":137,"_154":191,"_156":157,"_107":228,"_102":182,"_160":193,"_162":194,"_164":27,"_165":-5,"_101":229},["D",1748293238312],[189],{"_105":198,"_98":199,"_150":200,"_152":-5,"_153":137,"_154":201,"_156":157,"_107":231,"_102":203,"_160":204,"_162":205,"_164":27,"_165":-5,"_101":232},["D",1748296591947],[199],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_96":97,"_98":99,"_100":42,"_102":-7,"_101":71,"_103":239,"_145":243,"_208":259,"_161":-7,"_216":260,"_271":-5,"_272":27,"_273":-5,"_274":-5,"_275":-5,"_276":277},{"_105":106,"_98":99,"_107":240,"_109":-5,"_110":27,"_111":112,"_113":-5,"_114":-5,"_12":115,"_116":-5,"_117":27,"_118":-5,"_119":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_130":27,"_21":241,"_134":242},["D",1748291677148],{"_96":97,"_132":133},{"_102":136,"_98":42,"_105":137,"_138":106,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":99,"_144":97},[244,247,250,253,256],{"_105":148,"_98":149,"_150":151,"_152":-5,"_153":137,"_154":155,"_156":157,"_107":158,"_102":159,"_160":161,"_162":163,"_164":27,"_165":-5,"_166":245,"_101":246},[],[149],{"_105":170,"_98":171,"_150":172,"_152":-5,"_153":137,"_154":136,"_156":157,"_107":173,"_102":174,"_160":161,"_162":175,"_164":27,"_165":-5,"_166":248,"_101":249},[],[171],{"_105":179,"_98":180,"_150":181,"_152":-5,"_153":137,"_154":182,"_156":157,"_107":183,"_102":159,"_160":161,"_162":184,"_164":27,"_165":-5,"_166":251,"_101":252},[],[180],{"_105":188,"_98":189,"_150":190,"_152":-5,"_153":137,"_154":191,"_156":157,"_107":192,"_102":182,"_160":193,"_162":194,"_164":27,"_165":-5,"_166":254,"_101":255},[],[189],{"_105":198,"_98":199,"_150":200,"_152":-5,"_153":137,"_154":201,"_156":157,"_107":202,"_102":203,"_160":204,"_162":205,"_164":27,"_165":-5,"_166":257,"_101":258},[],[199],[244,247,250,253,256],[261,263,265,267,269],{"_105":148,"_98":149,"_150":151,"_152":-5,"_153":137,"_154":155,"_156":157,"_107":219,"_102":159,"_160":161,"_162":163,"_164":27,"_165":-5,"_101":262},[149],{"_105":170,"_98":171,"_150":172,"_152":-5,"_153":137,"_154":136,"_156":157,"_107":222,"_102":174,"_160":161,"_162":175,"_164":27,"_165":-5,"_101":264},[171],{"_105":179,"_98":180,"_150":181,"_152":-5,"_153":137,"_154":182,"_156":157,"_107":225,"_102":159,"_160":161,"_162":184,"_164":27,"_165":-5,"_101":266},[180],{"_105":188,"_98":189,"_150":190,"_152":-5,"_153":137,"_154":191,"_156":157,"_107":228,"_102":182,"_160":193,"_162":194,"_164":27,"_165":-5,"_101":268},[189],{"_105":198,"_98":199,"_150":200,"_152":-5,"_153":137,"_154":201,"_156":157,"_107":231,"_102":203,"_160":204,"_162":205,"_164":27,"_165":-5,"_101":270},[199],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"routes/_app","actionData","errors"]