Skip to Content
WordPress Plugin

WordPress Plugin

The WordPress plugin (bttpirineus-maps) converts [map] shortcodes into iframes that load the Next.js embed viewer.

Version: 1.3.0 File: wordpress/bttpirineus-maps/bttpirineus-maps.php

Installation

  1. Copy the wordpress/bttpirineus-maps/ folder
  2. Upload it to wp-content/plugins/ on the WordPress server
  3. Go to Plugins in wp-admin and activate BTT Pirineus Maps
  4. If you have a caching plugin (WP Super Cache, etc.), purge the cache
  5. Visit any page that had a broken [map] shortcode — it should now show a map

Configuration

The only setting is the BTTPIRINEUS_EMBED_DOMAIN constant at the top of bttpirineus-maps.php:

define('BTTPIRINEUS_EMBED_DOMAIN', 'https://btt-pirineus-embedded.vercel.app');

Set it to your Vercel production URL (no trailing slash).

Shortcode attributes

[map gpx="https://...ruta.gpx" chart="auto" title="My Route"]
AttributeRequiredDefaultDescription
gpxYes—URL to the GPX file
styleNo—Inline CSS. If it contains height:Xpx, uses fixed-height mode
chartNoautoChart visibility: auto, show, hide
titleNoGPX filenameCustom display title in the bottom bar

Ignored legacy attributes: bike, maptype, pano, marker — silently accepted for backwards compatibility.

How it works

Shortcode processing

  1. Extracts gpx attribute, strips trailing commas/semicolons
  2. Resolves relative URLs (prepends https://www.bttpirineus.org)
  3. Generates a stable anchor ID from the GPX filename: map-{sanitized-name}
  4. Builds the iframe src: {EMBED_DOMAIN}/embed?gpx=...&chart=...&page=...&anchor=...
  5. Wraps in a .bttmap-wrap div with lazy-loading iframe

Fixed-height vs responsive mode

  • Fixed-height: If the shortcode has style="height:400px", the wrapper gets that height + 200px (extra space for the elevation chart and bottom bar)
  • Responsive: If no explicit height, uses aspect-ratio: 16/9 with min-height: 300px and max-height: 600px

Lazy loading

Iframes use data-src instead of src. An IntersectionObserver script in the footer swaps data-src to src when the iframe is within 200px of the viewport. This prevents inflated view counts on pages with many maps (a page with 8 maps would otherwise register 8 views immediately).

Fallback: if IntersectionObserver is not available, all iframes load immediately.

FitVids.js workaround

Many WordPress themes include FitVids.js, which wraps iframes in a .fluid-width-video-wrapper with a padding-top trick for responsive videos. With our iframes (width="100%", height="480px"), FitVids calculates 480/100 = 4.8 → 480% padding, blowing up the iframe to ~3400px tall.

The plugin injects CSS that resets FitVids wrappers inside .bttmap-wrap:

.bttmap-wrap .fluid-width-video-wrapper {
    position: static !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
Embed SystemHelper Tool