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
Show / Hide all
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

This is a test for the shortcode:

[*osm_map_v3 map_center=”38.713,-9.136″ zoom=”16″ width=”95%” height=”300″ map_border=”thin solid orange” file_list=”../../../../wp-content/uploads/osm_map/OSM_02.kml”]
*…remove the red star

Download this sample kml-file HERE.

You can also display a list of kml-files within one map with an selection box under the map:

[*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” file_select_box=”one”]

Click title to show track
Show / Hide all
OSM_01_red.kml
OSM_01_black.kml

Add an clickable area with an whole in your map:

[*osm_map_v3 map_center=”41.904,12.4495″ zoom=”15″ width=”95%” height=”300″ map_border=”thin solid orange” file_list=”../../../../wp-content/uploads/osm_map/OSM_Plugin_KML_Sample_02.kml” type=”stamen_toner”]

Note: The KML file has to be located on your blog domain!

A sample for an KML file with html content:

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> 
<Document>   
<name>TEST.kml</name>     
<Style id="pushpin">       
<IconStyle>         
<scale>1</scale>         
<Icon>           
<href>http://www.YourDomain.com/wp-content/plugins/osm/icons/styria_linux.png</href>         
</Icon>         
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>       
</IconStyle>     
</Style>     
<Placemark>     
<name>TEST</name>     
<description>
<![CDATA[       
<div style="width:300px; height:200px">         
<img src="http://www.YourDomain.com/wp-content/uploads/YourPhoto.jpg"/>       </div> ]]>
</description>     
<styleUrl>#pushpin</styleUrl>     
<Point><coordinates>17.130,49.977,0</coordinates>
</Point>   
</Placemark>   
<Placemark>   
<name>TEST</name>     
<description><! [CDATA[     
<div style="width:300px; height:200px">       Das ist ein Test für KML files mit dem WP OSM Plugin.<br> 
<img src="http://www.YourDomain.com/wp-content/uploads/YourPhoto.jpg"/> </div> ]]> 
</description> 
<styleUrl>#pushpin</styleUrl> 
<Point>
<coordinates>17.133,49.979,0</coordinates></Point> 
</Placemark> 
</Document> 
</kml>

Note: You can set the transparency / opacity of the KML track directly in the KML file as KML color. In the first map on this page black is 60% transparent:

<Style id="blackLine"> 
<LineStyle> 
<color>3c000000</color> 
<width>5</width> 
</LineStyle> 
</Style> 
<Style id="redLine"> 
<LineStyle> 
<color>#ff0000ff</color> 
<width>5</width> 
</LineStyle> 
</Style>