3

[Duplicate] I am asking this question again as my original question was incorrectly closed by linking the question below to mine, but the provided solution doesn't answer my question.

Previously provided "solution": (Getting waypoints from leaflet routing machine) - This question does not answer my question as the answer only returns the waypoints that I have already provided, it doesn't return the points between the waypoints that comprise the route.

My original question is here: How can I fetch all points along route between waypoints?

I want to animate a marker along a route. I've been able to animate a marker successfully between waypoints but I want to fetch the points between two waypoints programmatically so that I can use a function to automatically set a route and animate along the route.

Two waypoints will be known, i.e. Point A and Point B. What I want is to be able to get all points between Point A and Point B automatically so that the marker is animated along the route instead of as the crow flies. I can animate the route successfully by entering the desired waypoints manually so I know that this will work if I can retrieve the points between the waypoints.

Here's my code so far:

// Draw route

var routeData = L.Routing.control({
    router: L.Routing.mapbox(L.mapbox.accessToken,{
        profile : 'mapbox/driving',
        language: 'en',
    }),
    waypoints: [
        L.latLng(52.501737, -2.119792),
        L.latLng(52.498798, -2.102591)
    ],
    lineOptions:{
        styles: [
            {
                color: '#006a4e', opacity: 1, weight: 5
            }
        ],
    },
    draggableWaypoints: false,
    createMarker: function() { return false; },
    show: false,
}).addTo(mymap);

var routeArray = new Array();
routeArray = routeData.getWaypoints();

console.log(routeArray);

// Draw animation

L.motion.polyline([[52.501737, -2.119792], [52.501267, -2.114707], [52.500313, -2.110361], [52.499243, -2.108751], [52.498596, -2.105886], [52.498812, -2.104953], [52.498798, -2.102591]], {
    color: "transparent"
}, {
    auto: true,
    duration: 30000,
    easing: L.Motion.Ease.easeInOutQuart
}, {
    removeOnEnd: false,
    showMarker: true,
    icon: L.icon({iconUrl: 'marker.png', iconSize: [32,37]})
}).addTo(mymap);

The plan is to find the points between the waypoints, enter them into an array and explode the array within the polyline, like so:

var pointsArray = new Array(???);
L.motion.polyline(pointsArray,...

I just don't know how to get the data for pointsArray. I'm using Leaflet Routing Machine with MapBox data.

Any help?

I hope I've explained myself clearly enough.

JustSomeGuy
  • 315
  • 2
  • 17
  • Please don't repost the question - now it *really* is a duplicate question. Make a comment on your original question with the argument you provided as to why its *not* a duplicate, and it can be reopened – Seth Lutske Feb 16 '21 at 18:10
  • 1
    @SethLutske When my original comment was closed it literally said "Your post has been associated with a similar question. If this question doesn’t resolve your question, ask a new one." So I asked a new one, like the message said. – JustSomeGuy Feb 16 '21 at 18:16
  • Yeah that's sort of a boiler plate message that SO puts in. I've had situations where someone closed my question, I made the case in a comment that it was not a duplicate, and they reopened it. I saw you edited your question, but I don't know that @IvanSanchez will see your edit, but he'll definitely see a comment – Seth Lutske Feb 16 '21 at 18:22
  • In the meantime, I would look into [leaflet-geometryutil's `interpolateOnLine` function](https://makinacorpus.github.io/Leaflet.GeometryUtil/global.html#interpolateOnLine) – Seth Lutske Feb 16 '21 at 18:23

0 Answers0