GPX Map Viewer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_206":207,"_208":209},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":60,"_124":-5,"_125":-5,"_126":127},"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",45,"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 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 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 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\"));","// 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 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 + \"

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 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\"));","createdAt",["D",1751079170856],"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=1789727689&sig=03a4171101f5330193cc73f352174f524d3cfabb1a0afc2300d6b6ff90315c4c","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":202,"_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":203,"_82":204,"_84":205,"_86":25},"tree",[181,182,183,184,185],"files",[181,182,183,184,185],"counts",{"_170":171,"_172":64,"_173":171,"_174":175,"_176":177},"contents",[128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":163,"_32":164,"_30":165,"_134":-5,"_41":42,"_40":166,"_135":60,"_38":167,"_13":152,"_33":20,"_35":168,"_24":25,"_138":-5,"_27":169},{"_43":155,"_32":156,"_30":157,"_134":-5,"_41":42,"_40":158,"_135":25,"_38":159,"_13":160,"_33":20,"_35":161,"_24":25,"_138":-5,"_27":162},{"_43":148,"_32":149,"_30":150,"_134":-5,"_41":42,"_40":144,"_135":60,"_38":151,"_13":152,"_33":20,"_35":153,"_24":25,"_138":-5,"_27":154},{"_43":140,"_32":141,"_30":58,"_134":-5,"_41":42,"_40":142,"_135":60,"_38":143,"_13":144,"_33":145,"_35":146,"_24":25,"_138":-5,"_27":147},{"_43":133,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_135":25,"_38":136,"_13":137,"_33":34,"_35":37,"_24":25,"_138":-5,"_27":139},"fb099c44-53ca-11f0-bccd-f69ea79377d9","parentId","latest",["D",1751079170856],14,"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}",[141],"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",[149],"3757c83e-53ca-11f0-9e3c-f69ea79377d9","README.md","aebe3a2e-3a76-11f0-951a-9e149126039e",43,["D",1751078842535],12,"# GPX Map Viewer\n\nA web-based GPX file viewer that allows you to visualize GPS tracks on various basemaps.\n\n### Key Features\n\n- **Multi-file Support**: Load and view multiple GPX files simultaneously from a local directory\n- **Interactive Map Controls**: Pan, zoom, and switch between different map styles\n- **Multiple Basemaps**: Choose from OpenStreetMap, OpenTopoMap, and premium Thunderforest maps (Landscape and Outdoors)\n- **File Management**: Search and filter GPX files, select multiple files with Ctrl/Cmd+click or Shift+click for range selection\n- **Track Customization**: Adjust track opacity with a slider control\n- **Visual Markers**: Start points (red), end points (green), and waypoints (blue) are clearly marked\n- **Auto-fit**: Map automatically adjusts to show all selected tracks\n- **API Key Protection**: Thunderforest API keys are kept secure on the server side\n\n### Technical Architecture\n\n- **Frontend**: Vanilla JavaScript with Leaflet.js for mapping and Leaflet.GPX for GPX file parsing\n- **Backend**: TypeScript HTTP handler that serves static files and proxies map tile requests\n- **Map Tiles**: Supports both free (OpenStreetMap, OpenTopoMap) and premium (Thunderforest) tile providers\n- **File Access**: Uses the modern File System Access API for Chrome/Edge browsers, with automatic fallback to webkitdirectory for broader browser compatibility\n\n## How to Run\n\n### Prerequisites\n\n1. **Val Town Account**: This application runs on Val Town's serverless platform\n2. **Thunderforest API Key** (Optional): Required only if you want to use premium Thunderforest maps\n\n### Environment Variables\n\nTo use Thunderforest premium maps (Landscape and Outdoors styles), you need to set up an API key:\n\n1. **Get a Thunderforest API Key**:\n - Visit [Thunderforest](https://www.thunderforest.com/)\n - Sign up for a free account (includes 150,000 free map requests per month)\n - Navigate to your API Keys section in the dashboard\n - Copy your API key\n\n2. **Set Environment Variable in Val Town**:\n - In your Val Town project, go to the Environment Variables section\n - Add a new environment variable:\n - **Name**: `thunderforestAPIKey`\n - **Value**: Your Thunderforest API key (e.g., `abc123def456ghi789`)\n\n### Running the Application\n\n1. **Deploy to Val Town**: The `main.tsx` file is configured as an HTTP trigger\n2. **Access the Application**: Visit your Val Town URL to open the GPX viewer\n3. **Load GPX Files**: Click \"Select GPX Directory\" to choose a folder containing your GPX files\n\n### Usage Instructions\n\n1. **Select Directory**: Click the \"Select GPX Directory\" button and choose a folder containing `.gpx` files\n2. **Browse Files**: Use the file list on the left to navigate your GPX files\n3. **Select Tracks**: \n - Single click to select one file\n - Ctrl/Cmd+click to select multiple files\n - Shift+click to select a range of files\n4. **Search**: Use the search box to filter files by name\n5. **Customize View**:\n - Change basemap using the dropdown menu\n - Adjust track opacity with the slider\n6. **Navigate**: Use standard map controls to pan and zoom\n\n### Map Providers\n\n- **OpenStreetMap**: Free, general-purpose map (no API key required)\n- **OpenTopoMap**: Free topographic map (no API key required)\n- **Thunderforest Landscape**: Premium landscape-focused map (requires API key)\n- **Thunderforest Outdoors**: Premium outdoor activities map (requires API key)\n- **USGS National Map**: [The National Map](https://www.usgs.gov/programs/national-geospatial-program/national-map) from USGS\n\n### Browser Compatibility\n\nThis application works with most modern browsers:\n- **Chrome/Edge 86+**: Full support with modern File System Access API\n- **Firefox, Safari, and older browsers**: Fallback support using webkitdirectory attribute\n- **All browsers**: ES6+ JavaScript features and WebGL for map rendering required\n\n### File Format Support\n\n- **GPX Files**: Standard GPS Exchange Format files with tracks, routes, and waypoints\n- **File Extensions**: `.gpx` files only\n- **Content**: Supports tracks with multiple segments, waypoints, and route data\n\n## Development\n\n### Project Structure\n\n```\n├── main.tsx # HTTP handler and tile proxy server\n├── index.html # Main application HTML\n├── map.js # Frontend JavaScript for map functionality\n└── README.md # This file\n```\n\n### API Endpoints\n\n- `/` - Serves the main application\n- `/tiles/*` - Proxies Thunderforest tile requests (keeps API key secure)\n- `/config.js` - Provides map configuration\n- `/map.js` - Serves the main JavaScript file\n\n### Security Features\n\n- API keys are stored securely as environment variables\n- Thunderforest requests are proxied through the server to prevent key exposure\n- CORS headers are properly configured for tile requests\n\n## Troubleshooting\n\n### Common Issues\n\n1. **\"Select GPX Directory\" not working**: \n - Modern browsers (Chrome/Edge 86+) use the File System Access API\n - Older browsers automatically use a fallback method with broader compatibility\n - If neither works, ensure JavaScript is enabled and try a different browser\n2. **Thunderforest maps not loading**: Check that your `thunderforestAPIKey` environment variable is set correctly\n3. **No GPX files found**: Ensure your directory contains files with `.gpx` extension\n4. **Maps not displaying**: Check browser console for JavaScript errors and ensure internet connectivity\n\n### Error Messages\n\n- **\"API key not configured\"**: Set the `thunderforestAPIKey` environment variable\n- **\"Error accessing directory\"**: Browser doesn't support File System Access API or permission denied\n- **\"No GPX files found\"**: Selected directory contains no `.gpx` files",[156],"4351fd6a-3a77-11f0-afb8-9e149126039e","LICENSE.md","3b0f808c-3a77-11f0-aad8-9e149126039e",25,["D",1748294435338],"MIT License\n\nCopyright (c) [year] [fullname]\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.",[164],"pulls",0,"branches","forks","envVars",{"_178":64,"_180":171},"connections",{"_178":171,"_179":171},"count","unfilledCount","emptyCount",{"_43":163,"_32":164,"_30":165,"_134":-5,"_41":42,"_40":166,"_135":60,"_38":199,"_13":152,"_33":20,"_35":168,"_24":25,"_138":-5,"_187":200,"_27":201},{"_43":155,"_32":156,"_30":157,"_134":-5,"_41":42,"_40":158,"_135":25,"_38":196,"_13":160,"_33":20,"_35":161,"_24":25,"_138":-5,"_187":197,"_27":198},{"_43":148,"_32":149,"_30":150,"_134":-5,"_41":42,"_40":144,"_135":60,"_38":193,"_13":152,"_33":20,"_35":153,"_24":25,"_138":-5,"_187":194,"_27":195},{"_43":140,"_32":141,"_30":58,"_134":-5,"_41":42,"_40":142,"_135":60,"_38":190,"_13":144,"_33":145,"_35":146,"_24":25,"_138":-5,"_187":191,"_27":192},{"_43":133,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_135":25,"_38":186,"_13":137,"_33":34,"_35":37,"_24":25,"_138":-5,"_187":188,"_27":189},["D",1751079170856],"children",[],[28],["D",1748293238312],[],[141],["D",1748291723139],[],[149],["D",1751078842535],[],[156],["D",1748294435338],[],[164],["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,"_125":239,"_240":241,"_242":243,"_244":25,"_245":25,"_246":25,"_247":60,"_248":-5,"_249":-7,"_250":-7,"_251":171,"_252":25,"_253":25,"_254":-5,"_255":25,"_256":25,"_257":25,"_258":-5},"ENV",{"_210":211,"_212":213,"_214":88,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238},"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 · v45