GPX Map Viewer

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\"));","label",[132],"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}",[143],"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",[150],"aebe3970-3a76-11f0-951a-9e149126039e","README.md","aebe3a2e-3a76-11f0-951a-9e149126039e",21,["D",1748294186070],0,"# GPX Map Viewer\n\nA web-based GPX file viewer that allows you to visualize GPS tracks on interactive maps with multiple basemap options including Thunderforest premium maps.\n\n## Overview\n\nThis application provides a clean, intuitive interface for viewing GPX (GPS Exchange Format) files on interactive maps. It features a file browser sidebar for easy navigation between multiple GPX files and supports various map styles including topographic and outdoor-focused maps.\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 local directory browsing\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\n### Browser Compatibility\n\nThis application requires a modern browser that supports:\n- File System Access API (Chrome 86+, Edge 86+)\n- ES6+ JavaScript features\n- WebGL for map rendering\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**: Ensure you're using a supported browser (Chrome/Edge 86+)\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\n\n## License\n\nThis project is open source and available under standard open source terms.",[157],"3fd2a89c-3a77-11f0-9159-9e149126039e",["D",1748294429469],2,[28],"pulls","branches","forks","envVars",{"_175":63,"_177":161},"connections",{"_175":161,"_176":161},"count","unfilledCount","emptyCount",{"_42":164,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_136":25,"_37":196,"_13":166,"_33":20,"_35":36,"_24":25,"_140":-5,"_184":197,"_27":198},{"_42":156,"_32":157,"_30":158,"_134":-5,"_40":41,"_39":159,"_136":25,"_37":193,"_13":161,"_33":20,"_35":162,"_24":25,"_140":-5,"_184":194,"_27":195},{"_42":149,"_32":150,"_30":151,"_134":-5,"_40":41,"_39":138,"_136":59,"_37":190,"_13":153,"_33":20,"_35":154,"_24":25,"_140":-5,"_184":191,"_27":192},{"_42":142,"_32":143,"_30":57,"_134":-5,"_40":41,"_39":144,"_136":59,"_37":187,"_13":138,"_33":146,"_35":147,"_24":25,"_140":-5,"_184":188,"_27":189},{"_42":131,"_32":132,"_30":133,"_134":-5,"_40":41,"_39":135,"_136":25,"_37":183,"_13":138,"_33":34,"_35":139,"_24":25,"_140":-5,"_184":185,"_27":186},["D",1748293601297],"children",[],[132],["D",1748293238312],[],[143],["D",1748291723139],[],[150],["D",1748294186070],[],[157],["D",1748294429469],[],[28],["D",1748291677148],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_42":41,"_88":43,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":44,"_95":96},"ctx",{"_79":-5,"_123":236,"_237":238,"_239":240,"_241":25,"_242":25,"_243":25,"_244":59,"_245":-5,"_246":-7,"_247":-7,"_248":161,"_249":25,"_250":25,"_251":-5,"_252":25,"_253":25,"_254":25,"_255":-5},"ENV",{"_207":208,"_209":210,"_211":87,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235},"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 · v24