Export GPX route from leaflet map

945 Views Asked by At

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> 

1

There are 1 best solutions below

2
On

I created recently the small Leaflet Plugin L.ConvertCoords, which allows you to import (parse) and export (convert) layers in different Formats:

var gpxString = L.ConvertCoords.GPX.convert(layer);

In the back I use the library toGPX