Gpxviewer
GPX Viewer is a web app to display caches from a gpx file on a map.
Install / Use
/learn @Surfoo/GpxviewerREADME
Geocaching GPX Viewer
Modern web app to visualize geocaching GPX files: load a GPX from disk or URL, see caches on an OpenLayers map with detailed info, geolocation, and free basemaps.
Features
- Import GPX from your computer or a public URL.
- Cache markers styled by type/found status, detail popup (code, owner, D/T, container, description).
- Basemap choices (OSM Standard, OSM Humanitarian, Carto Voyager, CyclOSM, Stamen Terrain).
- Geolocation, refit to data, clear map.
- Responsive UI (desktop, tablet, mobile).
- Language selector (EN/FR/DE/ES/IT).
Prerequisites
- Node.js 18+ recommended.
Installation
npm install
Scripts
npm run dev– start Vite dev server (HMR).npm run build– production bundle topublic/.npm run preview– serve the built bundle locally.npm run lint– format/lint via Biome.
Usage
npm run dev, then open the Vite URL at/gpxviewer/(e.g., http://localhost:5173/gpxviewer/).- Load a GPX:
- File: “Depuis ton ordinateur” button (multiple allowed).
- URL: paste a public GPX URL, click “Charger l'URL”.
- Options: choose a basemap, click “Recentrer sur les caches” or use the locate control on the map.
- You can add your own GPX files locally and load them via file picker or URL.
Structure
app/index.html– app shell for Vite (dev + build entry).static/– public assets copied as-is (favicons, manifest, map icons).src/main.ts– OpenLayers/GPX logic.src/style.css– styles and theme.
Deployment
- Build with
npm run build; servepublic/as a static site.
Contributing
See AGENTS.md for conventions, commands, and PR expectations.
License
Apache 2.0.
Related Skills
node-connect
350.1kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
109.9kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
350.1kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
350.1kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
