Map with GPX or KML in WordPress

The following samples explain how to add a map with your personal track stored in a GPX or KML file.

  1. Install and activate WP OSM Plugin on your WP site
  2. Upload your track (GPX or KML) via FTP or Media Library
  3. Use WP OSM Plugin shortcodegenerator to generate the shortcode for your track
    1. If you are using the blocke ditor make sure at [Preferences] the chapter [Additional panels] the [WP OSM Plugin shortcode generator] is enabled.
    2. If you are using the classic editor make sure at [Screen Options] the [WP OSM Plugin shortcode generator] is enabled.
  4. Copy/paste the shortcode and place it in your post / page

Table of content

  • Adding one sample track to your map
  • Adding three tracks with selection box to your map
  • Advanced tipps for GPX / KML
  • Known limitations with GPX / KML

Adding one sample track to your map

For testing purpose start with the GPX sample file provided by the WP OSM Plugin:

The location of the sample GPX files are shown in the [About] tab of the WP OSM Plugin shortcode generator.

The generated shortcode looks like this:

[osm_map_v3 map_center="autolat,autolon" zoom="autozoom" width="100%" height="450" file_list="https://www.YourDomain.com/wp-content/plugins/osm/examples/sample01.gpx" type="OpenSeaMap" file_color_list="green" control="scaleline" map_border="thin solid green" file_title="My boat trip" bckgrndimg="GDPR_bckgrnd.png"]

Add three tracks with selection box to your map

For testing purpose start with the three GPX sample file provided by the WP OSM Plugin:

If track selection box is enabled you have to adjust the map manually before generating the shortcode.

Click title to show track
My boat trip
My second trip
My third trip

The generated shortcode looks like this:

[*osm_map_v3 map_center="52.6138,5.4892" zoom="8" width="100%" height="450" file_list="https://www.YourDomain.com/wp-content/plugins/osm/examples/sample01.gpx,https://www.YourDomain/wp-content/plugins/osm/examples/sample02.gpx,https://www.YourDomain/wp-content/plugins/osm/examples/sample03.gpx" type="OpenSeaMap" file_color_list="green,red,orange" control="scaleline" map_border="thin solid green" file_title="My boat trip,My second trip,My third trip" file_select_box="one" bckgrndimg="GDPR_bckgrnd.png" ]

Display KML files

[osm_map_v3 map_center="38.713,-9.136" zoom="16" width="95%" height="450" file_list="../../../../wp-content/uploads/osm_map/OSM_01_red.kml,../../../../wp-content/uploads/osm_map/OSM_01_black.kml" file_color_list="#ff0000,#000000" map_border="thin solid orange" file_title="OSM_01_red.kml,OSM_01_black.kml"]

Advanced tipps for GPX / KML

Change GPX / KML location to relative paths

Since some sites are available with http as well as https you can provide the files within the shortcode also as relative path – something like this:

file_list="https://www.YourDomain.com/wp-content/plugins/osm/examples/sample01.gpx"

becomes:

file_list="../../../../wp-content/plugins/osm/examples/sample01.gpx"

Known limitations with GPX / KML

If selection box is enabled initially only one track is displayd