GPX Map Viewer

GPX Files

\n\n \n \n \n \n \n \n \n \n \n",[],[185],{"_102":193,"_95":194,"_156":116,"_158":-5,"_159":141,"_160":195,"_162":118,"_104":196,"_99":187,"_165":197,"_167":198,"_169":22,"_170":-5,"_171":199,"_98":200},"79d63cb4-3a74-11f0-8eea-9e149126039e","main.tsx",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}",[],[194],{"_102":202,"_95":203,"_156":204,"_158":-5,"_159":141,"_160":205,"_162":118,"_104":206,"_99":207,"_165":208,"_167":209,"_169":22,"_170":-5,"_171":210,"_98":211},"1069a548-53cb-11f0-9095-f69ea79377d9","map.js","d7511872-3a70-11f0-9108-9e149126039e",49,["D",1751079206696],18,"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 select all tracks\nasync function selectAllTracks() {\n // Use filtered files if available, otherwise use all files\n const filesToSelect = window.currentFilteredFiles || allFiles;\n \n if (filesToSelect.length === 0) {\n return; // No files to select\n }\n\n // Add all visible files to selection (don't clear existing selections from other filters)\n filesToSelect.forEach(file => {\n selectedFiles.add(file.url);\n });\n\n // Update visual selection in the UI for currently visible items\n document.querySelectorAll(\".file-item\").forEach(item => {\n item.classList.add(\"selected\");\n });\n\n // Load all GPX files that aren't already loaded\n for (const file of filesToSelect) {\n if (!gpxLayers.has(file.url)) {\n await loadGPX(file);\n }\n }\n\n // Update the map to show all tracks\n await updateMap();\n}\n\n// Function to deselect all tracks\nasync function deselectAllTracks() {\n // Use filtered files if available, otherwise use all files\n const filesToDeselect = window.currentFilteredFiles || allFiles;\n \n // Remove visible files from selection\n filesToDeselect.forEach(file => {\n selectedFiles.delete(file.url);\n });\n\n // Update visual selection in the UI for currently visible items\n document.querySelectorAll(\".file-item\").forEach(item => {\n item.classList.remove(\"selected\");\n });\n\n // Reset last selected index if no files are selected\n if (selectedFiles.size === 0) {\n lastSelectedIndex = -1;\n }\n\n // Update the map\n await updateMap();\n}\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 // Store filtered files for selection buttons to work with\n window.currentFilteredFiles = filteredFiles;\n}\n\n// Function to handle directory selection using File System Access API (modern browsers)\nasync function handleDirectorySelectModern() {\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 processSelectedFiles();\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: \" + error.message + \"

\";\n }\n}\n\n// Function to handle directory selection using fallback method (broader browser support)\nfunction handleDirectorySelectFallback() {\n // Create a hidden file input with directory support\n const fileInput = document.createElement(\"input\");\n fileInput.type = \"file\";\n fileInput.webkitdirectory = true;\n fileInput.multiple = true;\n fileInput.accept = \".gpx\";\n fileInput.style.display = \"none\";\n\n fileInput.addEventListener(\"change\", (event) => {\n const files = Array.from(event.target.files);\n const gpxFiles = files.filter(file => file.name.toLowerCase().endsWith(\".gpx\"));\n\n if (gpxFiles.length > 0) {\n allFiles = gpxFiles.map(file => ({\n name: file.name,\n url: URL.createObjectURL(file),\n file: file,\n }));\n \n processSelectedFiles();\n } else {\n const container = document.getElementById(\"file-list-container\");\n container.innerHTML = \"

No GPX files found in the selected directory.

\";\n }\n });\n\n // Trigger the file picker\n document.body.appendChild(fileInput);\n fileInput.click();\n document.body.removeChild(fileInput);\n}\n\n// Function to process selected files (common logic)\nasync function processSelectedFiles() {\n // Clear previous selections\n selectedFiles.clear();\n gpxLayers.clear();\n lastSelectedIndex = -1;\n\n // Initialize filtered files to all files\n window.currentFilteredFiles = allFiles;\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}\n\n// Main function to handle directory selection with fallback\nasync function handleDirectorySelect() {\n // Check if the modern File System Access API is available\n if ('showDirectoryPicker' in window) {\n await handleDirectorySelectModern();\n } else {\n // Fallback to the older webkitdirectory method\n handleDirectorySelectFallback();\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;\n\nfileList.insertBefore(selectButton, document.getElementById(\"file-list-container\"));\n\n// Create selection control buttons container\nconst selectionContainer = document.createElement(\"div\");\nselectionContainer.style.marginBottom = \"20px\";\nselectionContainer.style.display = \"flex\";\nselectionContainer.style.gap = \"10px\";\n\n// Create Select All button\nconst selectAllButton = document.createElement(\"button\");\nselectAllButton.textContent = \"Select All\";\nselectAllButton.style.padding = \"8px 12px\";\nselectAllButton.style.flex = \"1\";\nselectAllButton.style.fontSize = \"12px\";\nselectAllButton.onclick = selectAllTracks;\n\n// Create Deselect All button\nconst deselectAllButton = document.createElement(\"button\");\ndeselectAllButton.textContent = \"Deselect All\";\ndeselectAllButton.style.padding = \"8px 12px\";\ndeselectAllButton.style.flex = \"1\";\ndeselectAllButton.style.fontSize = \"12px\";\ndeselectAllButton.onclick = deselectAllTracks;\n\nselectionContainer.appendChild(selectAllButton);\nselectionContainer.appendChild(deselectAllButton);\nfileList.insertBefore(selectionContainer, document.getElementById(\"file-list-container\"));",[],[203],"files",[153,174,183,192,201],"counts",{"_216":32,"_217":121,"_218":32,"_219":220},"pulls","branches","forks","envVars",{"_221":121,"_222":32},"count","emptyCount","contents",[225,228,231,234,237],{"_102":154,"_95":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":118,"_104":226,"_99":164,"_165":166,"_167":168,"_169":22,"_170":-5,"_98":227},["D",1748294435338],[155],{"_102":175,"_95":176,"_156":177,"_158":-5,"_159":141,"_160":140,"_162":118,"_104":229,"_99":179,"_165":166,"_167":180,"_169":22,"_170":-5,"_98":230},["D",1751079229524],[176],{"_102":184,"_95":185,"_156":186,"_158":-5,"_159":141,"_160":187,"_162":118,"_104":232,"_99":164,"_165":166,"_167":189,"_169":22,"_170":-5,"_98":233},["D",1748291723139],[185],{"_102":193,"_95":194,"_156":116,"_158":-5,"_159":141,"_160":195,"_162":118,"_104":235,"_99":187,"_165":197,"_167":198,"_169":22,"_170":-5,"_98":236},["D",1748293238312],[194],{"_102":202,"_95":203,"_156":204,"_158":-5,"_159":141,"_160":205,"_162":118,"_104":238,"_99":207,"_165":208,"_167":209,"_169":22,"_170":-5,"_98":239},["D",1751079206696],[203],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":248,"_219":253},{"_102":103,"_95":96,"_104":249,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":113,"_14":114,"_115":116,"_117":118,"_119":-5,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":250,"_135":251,"_138":252,"_150":22},["D",1748291677148],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_99":140,"_95":43,"_102":141,"_142":103,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[254],{"_255":256,"_104":257,"_258":-5,"_110":259,"_260":22},"key","thunderforestAPIKey",["D",1748293293308],"updatedAt","API Key for Thunderforest Map Tiles","isEmpty","actionData","errors"]

bjtitus

GPXViewer

Environment variables