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 *