Skip to Content
Overview

BTT Pirineus — Mapes Embedded

Embeddable GPX map viewer for bttpirineus.org . Replaces broken WordPress [map] shortcodes with interactive Leaflet maps, elevation profiles, and analytics.

What this project does

The WordPress blog bttpirineus.org has 425 pages with GPX route maps. The original Google Maps plugin broke, leaving raw [map gpx="..."] text on every page. This project provides:

  1. An embeddable map viewer (/embed) — renders GPX tracks on topographic maps with elevation/speed charts, download buttons, and sharing
  2. A WordPress plugin — converts [map] shortcodes into iframes that load the viewer
  3. An analytics dashboard (/analytics) — tracks views, downloads, and shares per route
  4. A shortcode helper (/helper) — generates WordPress shortcodes for new or legacy maps
  5. An embed preview tool (/demo) — validates embed changes before deploying

Tech stack

  • Framework: Next.js 16 (App Router)
  • Maps: Leaflet + React-Leaflet (OpenTopoMap, Esri Satellite, IGN tiles)
  • Charts: Custom SVG elevation/speed profiles + Recharts for dashboard
  • Analytics: PostHog (events, sessions) + Supabase (counters)
  • Styling: Tailwind CSS
  • Deployment: Vercel
  • WordPress: PHP shortcode plugin with lazy-loading iframes
Getting Started