GPX Map Viewer

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\"));","label",[91],"79d63cb4-3a74-11f0-8eea-9e149126039e",["D",1748293238312],"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}",[77],"f2b9764a-3a70-11f0-bba0-9e149126039e",["D",1748291723139],"\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",[108],"1e01c96a-53cb-11f0-8b66-f69ea79377d9",["D",1751079229524],"# 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, or use Select All/Deselect All buttons for quick bulk operations\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\n - Use \"Select All\" button to select all visible files\n - Use \"Deselect All\" button to deselect all visible files\n4. **Search**: Use the search box to filter files by name\n5. **Bulk Selection**: \n - \"Select All\" button selects all currently visible files (respects search filter)\n - \"Deselect All\" button deselects all currently visible files\n6. **Customize View**:\n - Change basemap using the dropdown menu\n - Adjust track opacity with the slider\n7. **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",[235],"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.",[334],"pulls",0,"branches","forks","envVars",{"_348":20,"_350":341},"connections",{"_348":341,"_349":341},"count","unfilledCount","emptyCount",{"_47":333,"_13":334,"_75":335,"_56":-5,"_49":50,"_313":336,"_315":177,"_51":369,"_53":94,"_78":66,"_317":338,"_80":24,"_319":-5,"_357":370,"_285":371},{"_47":329,"_13":235,"_75":234,"_56":-5,"_49":50,"_313":271,"_315":177,"_51":366,"_53":194,"_78":66,"_317":331,"_80":24,"_319":-5,"_357":367,"_285":368},{"_47":325,"_13":108,"_75":99,"_56":-5,"_49":50,"_313":118,"_315":177,"_51":363,"_53":94,"_78":66,"_317":327,"_80":24,"_319":-5,"_357":364,"_285":365},{"_47":321,"_13":77,"_75":130,"_56":-5,"_49":50,"_313":187,"_315":177,"_51":360,"_53":118,"_78":162,"_317":323,"_80":24,"_319":-5,"_357":361,"_285":362},{"_47":312,"_13":91,"_75":76,"_56":-5,"_49":50,"_313":314,"_315":177,"_51":356,"_53":208,"_78":79,"_317":318,"_80":24,"_319":-5,"_357":358,"_285":359},["D",1751079206696],"children",[],[91],["D",1748293238312],[],[77],["D",1748291723139],[],[108],["D",1751079229524],[],[235],["D",1748294435338],[],[334],["D",1748291677148],{"_11":12,"_284":83},{"_11":12,"_280":-5,"_82":83,"_25":81,"_281":282,"_283":24},{"_53":271,"_13":16,"_47":50,"_272":236,"_273":-5,"_274":-5,"_275":-5,"_276":-5,"_277":-5,"_278":14,"_279":12},"ctx",{"_64":-5,"_304":409,"_410":411,"_412":413,"_414":24,"_415":24,"_416":24,"_417":177,"_418":-5,"_419":-7,"_420":-7,"_421":341,"_422":24,"_423":24,"_424":-5,"_425":24,"_426":24,"_427":24,"_428":-5},"ENV",{"_380":381,"_382":383,"_384":16,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408},"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"]

History