Simple way to display tracks on personal web server?

Hello,

I have a bunch of tracks in GPX that I’d like to share through my home web server:

  1. People would simply need to select either the city From which the track should start, or the To city where it should end, or both :

  2. Then, the application will simply display the track on top of a live — ie. zoomable, and up-to-date — Mapick map, and displays infos about this track (who uplodated it, its length and elevation, etc).

  3. Finally, there should be a Download button so people can… download it into their computer/smartphone, ready to be imported into their favorite routing application.

=> Is there an easy solution that I could install on my Linux web server that would take a GPX file as input, and display its contents on top of a map?

Thank you.

You can start like me https://www.jan-karina.es/wandelingen/

Thanks.

Is Leaflet the recommended solution to display tracks on top of a live OSM map on a home web server?

Leaflet is a solution, and for me * the* solution.

But there are others like https://www.mapbox.com/ and https://umap.openstreetmap.fr/en/

Thanks. I’m specifically looking for solutions I can install on my home web server with no external dependencies, so Umap won’t do.

I’ll look around and report back.

Where are you going to get the map tiles from? Whilst your usage might not individually trigger acceptable use alarms, the tiles are not provided for this sort of usage, which doesn’t contribute towards the the development of the map database.

I’m at the point I’m not even sure what a map tile is :slight_smile: I assume it’s a graphical representation of data located in the OSM databases.

Which is why I was looking for a bird’s view of what tools are needed/recommended to set up a simple, home-based OSM server to display tracks from GPX files.

For instance, do I need to download data from OSM, build my own maps locally, keep them up to date, etc. ? Then, do I need JavaScript-based tools like Leaflet to actually display data into the browser?

I’m slowly getting out of the dark.

At this point, I can display a live map using Leaflet + Mapbox using this in index.html:


<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
</head>

<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>

<script>
	var mymap = L.map('mapid').setView([48.8335, 2.3796], 10);
	
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);
	var marker = L.marker([48.8412, 2.3559]).addTo(mymap);
</script>

</body>

</html>

I have a couple of questions:

  1. Natively, Leaflet uses geoJson: Should I convert GPX files into geoJson, or add a plug-in to use GPX?

  2. For moderate use, is MapBox good enough, or should I look at other tile providers?

Thank you.

  1. I use a plugin https://github.com/mapbox/leaflet-omnivore

  2. depend what you call “moderate” but I think mapbox is Ok.

Any feedback from other experienced users, so that I make the right choice?