GPX Route Map

Àpèjúwe

GPX Route Map turns a GPX file into an interactive map on the front end of your site. Drop the block into any post or page, pick a .gpx file, and visitors get:

• An interactive OpenStreetMap map powered by MapLibre GL.
• The track drawn as a route line with start and end markers.
• Support for both GPX tracks (<trk>) and GPX routes (<rte>), e.g. Garmin Connect course exports.
• Waypoint markers with popups for any <wpt> points in the file.
• A stats bar: distance, elevation gain, elevation loss and max elevation.
• A hand-drawn elevation profile you can scrub with mouse or touch, the position syncs onto the map.

The map loads lazily (only when it scrolls into view) so it never slows down your page, and multiple maps can live on the same page.

You can author tracks in any GPX tool, for example the free gpx.studio editor, then upload the resulting file to your Media Library.

OpenStreetMap tile usage

By default the map uses OpenStreetMapÌtumọ̀ Yorùbá: ’s public tile server, an external service. When a page with a map is viewed, the visitorÌtumọ̀ Yorùbá: ’s browser loads map tiles directly from tile.openstreetmap.org, which means that server receives the visitorÌtumọ̀ Yorùbá: ’s IP address, browser User-Agent and the coordinates of the map area viewed. See the OpenStreetMap Tile Usage Policy and the OSMF Privacy Policy. The same data is sent to any custom tile provider you configure instead.

The public OSM tile server is rate-limited and is not intended for high-traffic sites. For busy sites, set a custom tile provider in the blockÌtumọ̀ Yorùbá: ’s Map tiles panel (or via the gpxrm_tile_url filter). Attribution to OpenStreetMap is always shown, as the license requires.

Source code

The front-end JavaScript in build/ is minified (the block editor script is not, so that its strings stay translatable). The human-readable source lives in the pluginÌtumọ̀ Yorùbá: ’s src/ directory, which is included in this plugin, and is also available with full build instructions at the public repository: https://github.com/SirLouen/gpx-route-map. The plugin is built with Vite (pnpm install && pnpm run build).

Usage

Block: search for “GPX Route Map” in the block inserter, then choose a GPX file.

Shortcode: [gpx_route_map]

Examples:

[gpx_route_map id="123"] - render the GPX attachment with ID 123.
[gpx_route_map gpx="https://example.com/route.gpx" height="520" elevation="false"]

Shortcode attributes:

• id Ìtumọ̀ Yorùbá: – Attachment ID of a .gpx file uploaded to the Media Library.
• gpx Ìtumọ̀ Yorùbá: – Attachment ID, or an absolute URL to a .gpx file (alternative to id).
• height Ìtumọ̀ Yorùbá: – Map height in pixels, from 200 to 1200. Default: 480.
• stats Ìtumọ̀ Yorùbá: – Show the stats bar (distance, elevation, waypoints). true or false. Default: true.
• elevation Ìtumọ̀ Yorùbá: – Show the interactive elevation profile. true or false. Default: true.
• maxzoom Ìtumọ̀ Yorùbá: – Maximum zoom level, from 1 to 22. Default: 17.
• tile Ìtumọ̀ Yorùbá: – Custom raster tile URL template using {z}/{x}/{y}. Default: OpenStreetMap.

Provide either id or gpx. The block exposes the same options in its sidebar (Source, Display and Map tiles panels).

Filters (for developers):

• gpxrm_tile_url Ìtumọ̀ Yorùbá: – change the default raster tile URL template.
• gpxrm_tile_attribution Ìtumọ̀ Yorùbá: – change the attribution HTML.