Loading three GPX files and a marker with html-text

There has been a request to display GPX files and a html marker with WP OSM Plugin. These steps are required:

  1. Optimze your GPX tracks
  2. Add a custom field called OSM_marker_text with your html text
  3. Generate the OSM Shortcode and modify it

In detail it’s like this:

Optimze your GPX tracks

Usually your tracks are quite huge with data you do not need but take a lot time to load your page. The free tool gpsbabel optimizes it:

gpsbabel -i gpx -f Input.gpx -x simplify,crosstrack,error=0.001k -o gpx -F Output.gpx

The argument: simplify,crosstrack,error=0.001k delets all points which are closer than 1 meter.

Add a custom field called OSM_marker_text with your html text

At the meta box for custom fields you should create a new customfield.

HTML text for WP OSM Plugin marker

HTML text for WP OSM Plugin marker

In this exampel the html text in the custom field is:

<font color="red">Variante basse</font><br><font color="green">Tivano trail</font><br><font color="blue">Muro di Sormano</font>

Generate the OSM Shortcode and modify it

There is a metabox when you create your post or page. Adjust the map and add a single marker to the map. In addition you will have to modified shortcode to get this:

[*osm_map lat="45.893" lon="9.271" zoom="13" width="100%" height="600" control="mouseposition,scaleline" map_border="thin solid grey" theme="dark" gpx_file_list="../../../../wp-content/uploads/osm_map/VARIANTE_BASSA_V2.gpx,../../../../wp-content/uploads/osm_map/TIVANO_TRAIL_V2.gpx,../../../../wp-content/uploads/osm_map/MURO_DI_SORMANO_V2.gpx" gpx_colour_list="red,green,blue" marker="45.893,9.271,OSM_marker_text" marker_name="mic_cycling_icon.png"]

* <= asterix has to be removed

[osm_map lat=”45.893″ lon=”9.271″ zoom=”13″ width=”100%” height=”600″ control=”mouseposition,scaleline” map_border=”thin solid grey” theme=”dark” gpx_file_list=”../../../../wp-content/uploads/osm_map/VARIANTE_BASSA_V2.gpx,../../../../wp-content/uploads/osm_map/TIVANO_TRAIL_V2.gpx,../../../../wp-content/uploads/osm_map/MURO_DI_SORMANO_V2.gpx” gpx_colour_list=”red,green,blue” marker=”45.893,9.271,OSM_marker_text” marker_name=”mic_cycling_icon.png”]


Posted in tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *


By continuing to use the site, you agree to the use of cookies and load data from third parties. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.