Best way to integrate Leaflet.Elevation in Leaflet web app?

Developers
1

Hi,

I’m currently trying to integrate the use of the Leaflet.Elevation plug-in, into my own person Leaflet web page. I want to have an elevation bar similar to the one on your page but I have having trouble trying to find where the GPX or GeoJSON file is found. What would be the best option to use, GPX or GeoJSON?

I’m fairly new to JS and any help would be appreciated.

Thank you.

Here’s a snippet of my code so far for routing.

// Setup routing engine 
    var routingEngine = L.Routing.control({ 
        waypoints: [  ], 
        //routeWhileDragging: true, 
        //showAlternatives: true, 
        draggableWaypoints: true, 
           //addWaypoints: false, 
            routeWhileDragging: true, 
        reverseWaypoints: true, 
        useZoomParameter: false, 
        showAlternatives: true, 
        altLineOptions: { 
                styles: [ 
                    {color: 'black', opacity: 0.15, weight: 9}, 
                    {color: 'white', opacity: 0.8, weight: 6}, 
                    {color: 'blue', opacity: 0.5, weight: 2} 
                ] 
                }, 
        geocoder: L.Control.Geocoder.nominatim(), // Only use nominatim for routing for now 
        router: L.Routing.graphHopper('', /*'api key' (empty string for local GraphHopper),*/ { 
            serviceUrl: 'http://localhost:8989/route', 
                urlParameters: { algorithm: 'alternativeroute' } 
        }), 
    }); 
 
    routingEngine.addTo(map);

    function addData(e) {
        var el = L.control.elevation();
        el.addData(e);
        map.addControl(el);
    }

    function onEachFeature(feature, layer) {
    layer.on({
        click: addData(feature)
    });
}

    var trails = new L.GeoJSON.AJAX('http://localhost:8989/route', {
        onEachFeature: onEachFeature
    }).addTo(map);
2

Any idea on this? I want the Leaflet elevation profile just like on https://graphhopper.com/maps/ but for my own personal application.

3

You should better ask this in the leaflet plugin forum or issues. Here it is just about GraphHopper.