I need help and advice

Help and support
1

I need your help. I am writing a travel book and would like to use OSM. I have routes in GPX file format that I would like to display on OSM maps. I want to have the ability to download graphic files with the GPX track shown and share the map online for people with the link or make it completely public. How should I approach this? I uploaded 2 GPX files as a test (private), but when I click to preview the map, I only see the starting point and not the entire track. Any advice? :wink:

2

Displaying a GPX track over OpenStreetMap tiles is really easy with the OSM WordPress Plugin.

Here’s an explanation: Map with GPX or KML in WordPress – WordPress OpenStreetMap Plugin

1 Like
3

Hi @Przemek_kNOw_LIMIT and welcome here in the forum!

There are a lot of approaches to that, examples are:

relevant code:

     <!-- loading the leaflet library -->
	 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
	 <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>	 <link rel="stylesheet" href="Control.FullScreen.css" />

...

<body>
<h1>Sample display GPX-Track</h1>
	<!-- area for display -->
	<div id="mapid" style="width: 800px; height: 600px;"></div>

	<!-- load GPX-plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
	
    <script>
		var mymap = new L.map('mapid');
        // Load a tile Layer with the proper attribution
		L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; OpenStreetMap | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(mymap);

        // path to the gpx-file 
        // could be created server-side
        var gpx='./saarlandschwein3.gpx';
        
        // display this gpx-track        
        new L.GPX(gpx, {async: true}).on('loaded', function(e) {
             mymap.fitBounds(e.target.getBounds());
        }).addTo(mymap);
		
</script>

</body>
1 Like