I'm trying to find a way of producing a GPX string from a Leaflet map so I can then save it into my DB. I am using Leaflet Routing Machine to create the route and then display it on an embedded map. So far, I found many ways to import a GPX to Leaflet but I cannot figure out a way to do the opposite.
So far, my (simplified) code to display the map and generate the route is as it follows:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<div id="map" class="map"></div>
<style>
.map {
position: absolute;
width: 50%;
height: 50%;
justify-content: right;
}
</style>
<script>
var map = L.map('map').
setView([40.416729,-3.703339], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.Routing.control({
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
}).addTo(map);
</script>
I created recently the small Leaflet Plugin L.ConvertCoords, which allows you to import (parse) and export (convert) layers in different Formats:
In the back I use the library toGPX