User Tools

Site Tools


GPX Viewer

Screenshot of the GPX Viewer plugin in action - click for full sizeThis plugin adds Jürgen Berkemeier's free JavaScript library GPX Viewer to FlatPress. It adds a BBCode tag “gpx” to include your uploaded GPX file into your blog entry or static page.

Important: The GPX Viewer library is free for non-commercial use. If you want to use it in a commercial environment, please contact its author Jürgen Berkemeier.

Author of the FlatPress plugin is Arvid Zimmermann.


Unzip, and upload the contained folder gpx to your fp-plugins folder. Then go to your blog's Admin Area → Plugins, and activate the GPX Viewer plugin.


Simple usage

Upload a GPX file to your FlatPress instance. Then simply insert into your static page or blog entry:


Multiple tracks

It is possible to display multiple tracks at once; simply note them comma-separated:

[gpx="attachs/file1.gpx, attachs/file2.gpx"]

All tracks

If you'd like to display the tracks of ALL uploaded GPX files on one single map, use the wildcard descriptor “attachs/*.gpx”:


Individual map layer

You can set the default map type in the plugin's settings. Nevertheless, each GPX track can be displayed with an individual map layer:

[gpx="attachs/file.gpx" maptype="opentopo"]

See all available values for the “maptype” attribut in the select box of the plugin settings.

Hide height profile

The height profile beneath the map is shown by default. You may wish to hide it for individual maps:

[gpx="attachs/file.gpx" heightprofile="false"]


The plugin's output consists of two parts: The map itself and a height profile plot. The map is displayed as div class=“gpxmap”, the height profile plot as div class=“gpxheightprofile”. Those two are packed together in a div class=“gpx”:

<div class="gpx">
    <div class="gpxmap"></div>
    <div class="gpxheightprofile"></div>

You find the default CSS defintions for these classes in res/gpxplugin.css.


The GPX Viewer library allows to change appearance of the map and height profile (such as colors and other behaviour) via JavaScript control variables. The file res/costumsettings.js contains a few of them to start with; you find them all on the GPX Viewer documentation page.



Feel free to send Pull Requests on Codeberg.


See the detailed changelog on Codeberg.

res/plugins/gpxviewer.txt · Last modified: 2024/03/24 13:24 by arvid

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki