Displaying waypoints as they are in google maps

[bbantsadze]

I am setting the waypoints. They are applied but not displayed as it is on the google map (point B). Does mapbox support displaying waypoints? And if it does, then how is it possible?

I also tried changing style objects: directions-waypoint-point and directions-waypoint-point-casing, but useless.

Implementation:

    this.map = new mapboxgl.Map({container: 'map'});
    this.map.on('load', () => {
        const directions = new MapboxDirections({
          accessToken: this.accessToken,
          unit: 'metric',
          profile: 'mapbox/driving',
          flyTo: false,
          controls: {
            inputs: false,
            instructions: false,
            profileSwitcher: false
          }
        });
        directions.setOrigin([this.startLng, this.startLat]);
        directions.removeWaypoint(0);
        if (this.wayPoints && this.wayPoints.length) {
          this.wayPoints.forEach((w, i) => {
            directions.addWaypoint(i, [w.lon, w.lat]);
          });
        }
        directions.setDestination([this.endLng, this.endLat]);
        this.map.addControl(directions);
    });

Request: https://api.mapbox.com/directions/v5/mapbox/driving/44.827095%2C41.715137%3B44.108409882%2C41.985412598%3B41.636745%2C41.616756.json?steps=true&overview=full&geometries=polyline&access_token=

[bbantsadze]

@geografa Can you help with this?

[andrewcarter]

+1. It would be nice if the controls.inputs UI would show the additional waypoints as well. It currently only shows the origin and destination.

[GregStephens92]

You could use mapboxgl.Marker();

this.wayPoints.forEach((w, i) => {
    directions.addWaypoint(i, [w.lon, w.lat]);
    new mapboxgl.Marker().setLngLat([w.lon, w.lat]).addTo(map);
}); 

[bbantsadze]

You could use mapboxgl.Marker();

this.wayPoints.forEach((w, i) => {
    directions.addWaypoint(i, [w.lon, w.lat]);
    new mapboxgl.Marker().setLngLat([w.lon, w.lat]).addTo(map);
}); 

That's what i'm using now, but its a real headache. You have to manage everything(events and marker size&placing while zooming) by yourself. It would be great if mapbox had same functionality as google does about waypoints.

[clementmas]

It would be great if mapbox had same functionality as google does about waypoints.

I agree. Leaflet Routing Machine also supports this out of the box.

I'm migrating from Leaflet to Mapbox and it would be great to have at least an option to style the existing waypoints.

[ajay-dev-j]

Wondering why this option is missed out is such a great library. Looking forward. +1

[Muskos]

I agree, it's not so easy to customize markers. But I found a solution. First, you need to customize the default icons of origin and destination. You can push these styles these styles to MapboxDirections.

const directions = new MapboxDirections({
                accessToken: mapboxgl.accessToken,
                unit: "metric",
                profile: "mapbox/driving",
                interactive: false,
                controls: false,
                styles: **directionStyles**
            });

btw, If you would like to add images, try to customize the style of the map in your account. Just add new images to the map, and then you can find it in the sprite, like this:

{
    "id": "directions-origin-label",
    "type": "symbol",
    "source": "directions",
    "layout": {
        "icon-image": "**uploading-marker**",
    },
    "paint": {
        "text-color": "#fff"
    },
    "filter": [
        "all",
        ["in", "$type", "Point"],
        ["in", "marker-symbol", "A"]
    ]
}

The next one, you need to add waypoints to the direction: directions.addWaypoint(index, [ln, lat]); Then next layer, you need to add Marker above the direction after map is loaded (map.current.on("load", handleMapLoad);):

const el = document.createElement("div");
    el.className = className;
    new mapboxgl.Marker(el).setLngLat(geo).addTo(map.current);

And bonus :) you need to add additional waypoints to the bounds after route loading:

directions.on("route", () => {
 const bounds = new mapboxgl.LngLatBounds(
            [originPoint.ln, originPoint.lat], [destinationPoint.ln, destinationPoint.lat]
        );

        for (const coord of uploadingPointsGeo) {
            bounds.extend(coord);
        }
        for (const coord of unloadingPointsGeo) {
            bounds.extend(coord);
        }

        map.current.fitBounds(bounds, {
            padding: 30
        });
});

You are welcome to Mapbox world :)