How do I implement routing using vue-leaflet?

Question

Basically what I'm coding is a E-Bike Sharing website, a JSON with a bunch of charging station all throughout NYC was given to me, my goal is to have a map where I can input 2 addresses or coordinates (start and end position) , the website will have to search for the closest station to both positions and guide me.

I had searched a bit before and I'm pretty sure that you can't use only one routing.control object for this and need 3, because from the start position to the first station it's on foot, from the first station to the second one is by bike and back on foot for the last bit, as you can't separate the route in 3 parts (at least I think so?). But when I started coding I found this package and it was so easy to use, unfortunately now that I've gotten to the routing bit I don't seem to find anything that works, the package doesn't seem to have it included and in the discord nobody responded. I noticed another package that most people, including my classmates (who aren't using Vue btw) are using, and even though I knew it was barely maintained I gave it a try, unfortunately I don't think the 2 package work together or perhaps im just dumb and couldn't make it work.

I saw one other person had the same problem in a github issue on the first package's page but nobody answered, hoping to get a bit more help than I have, because I have been stuck to no avail for the past few days and the project is due soon.

Answer 1

I've used two solutions for adding routing information to leaflet. Not sure about vue, but I think these two approaches should work for it just as well.

Mapquest Directions API

With this API you can get the directions between different waypoints specified by latitude/longitude, e.g:

    var formBody =
    {
        // fastest = Quickest drive time route
        // shortest = Shortest driving distance route
        // pedestrian = Walking route; Avoids limited access roads; Ignores turn restrictions
        // bicycle = Will only use roads on which bicycling is appropriate
        options: {
            // k = kilometers, m = miles
            unit: "k",
            routeType: "pedestrian",
            locale: "de_DE"
        },
        locations: coordinatesArray
    }

    var postResponse = await fetch(`http://www.mapquestapi.com/directions/v2/route?key=${apiKey}`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept-Encoding": "gzip, deflate, br"
        },
        body: JSON.stringify(formBody)
    }).catch(error => {
        console.log("Fetch error")
        console.log(error)
    });

From my experience this works without problems, but sometimes the routing is not the best and/or not very detailed in terms of matching the routes to the actual roads etc. on the map. With MapQuest you get 15000 free transactions per month.

Mapbox Directions API

This API is limited to 100000 requests per month in the free version which should be sufficient for a lot of testing purposes.

Compared to MapQuest it is a lot more accurate, especially when using pedestrian navigation:

Usage is similar to MapQuest, e.g.:

    var formBody = `coordinates=${coordinatesArray.join(";")}`;     // A semicolon-separated list of between two and 25
    //                                                              // { longitude }, { latitude } coordinate pairs to visit in order.
    formBody += `&overview=full`;                                   // Required for other parameters to work
    formBody += `&annotations=distance,duration`;                   // Which info to include
    formBody += `&geometries=geojson`;                              // Format
    formBody += `&steps=true`;                                      // Steps and turn-by-turn instructions
    formBody += `&language=de`;                                     // Language for steps
    formBody += `&voice_instructions=true`;                         // SSML for speech synthesis
    formBody += `&voice_units=metric`;                              // imperial/metric
    formBody += `&waypoints_per_route=true`;                        // If true, the waypoints array is returned within the route object,
    //                                                              // otherwise it's returned at the root of the response body. Defaults to false
    formBody += `&alternatives=false`;                              // Don't return alternatives (if available)

    var postResponse = await fetch(`https://api.mapbox.com/directions/v5/mapbox/walking?access_token=${apiKey}`, {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "Accept-Encoding": "gzip, deflate, br"
        },
        body: formBody
    }).catch(error => {
        return response.status(500).json({ errors: error });
    });