Mapbox Routing using mapbox API

Question

I am not very good at coding and currently using the mapbox API to create a map with points on. But I can find nothing on a basic routing option between the user position using "geolocate" and points on my map. Is there any way to do this within the API? I'd like to create an option for the user to find their way to the locations i currently have on the map and between those locations. Your help would be most appreciated.

Regards

Al

Answer 1

There is no routing available in Mapbox api which is production ready. They are working on a preview see here: https://www.mapbox.com/developers/api/directions/

One of the team members at mapbox, did suggest an alternative. See here: https://stackoverflow.com/a/16305757/475882

Answer 2

I use the Mapbox.directions plugin to do this. I use the map contextmenu event to get a right click event at a location (my markers have clickable: false so the map gets the mouse clicks). I use the MouseEvent data to get the latlng and I set that as either the origin or destination of the route. I allow the plugin to query the route and use the controls to display the route, instructions, and highlighted path on the map. Here are some snippets:

$('#lblStatus').html("Calculating route....");

// **** units is not working yet in the current Mapbox release
moDirections = L.mapbox.directions({
    profile: 'mapbox.driving',
    units: 'metric'
});

moDirections.on('load', function (directions) {
    // Loop through all route coordinates and determine bounds for route.
    var minLat = 90, minLng = 180, maxLat = -90, maxLng = -180;
    var lat, lng;
    directions.routes[0].geometry.coordinates.forEach(function (laCoordinate, index) {
        lat = laCoordinate[1];
        lng = laCoordinate[0];
        if (lat < minLat) {
            minLat = lat;
        }
        if (lng < minLng) {
            minLng = lng;
        }
        if (lat > maxLat) {
            maxLat = lat;
        }
        if (lng > maxLng) {
            maxLng = lng;
        }
    });
    var loBounds = L.latLngBounds(L.latLng(minLat, minLng), L.latLng(maxLat, maxLng));
    moMap.fitBounds(loBounds);

    $('#lblStatus').html("");
});

moDirections.setOrigin(loStart);
moDirections.setDestination(loEnd);
moDirections.query();

moDirectionsLayer = L.mapbox.directions.layer(moDirections).addTo(moMap);
moDirectionsErrorsControl = L.mapbox.directions.errorsControl('pnlRouteErrors', moDirections);
moDirectionsRoutesControl = L.mapbox.directions.routesControl('pnlAlternateRoutes', moDirections);
moDirectionsInstructionsControl = L.mapbox.directions.instructionsControl('pnlRouteInstructions', moDirections);

The above pnl* elements are divs where the controls are injected.

At this time there is basically no documentation for the directions plugin. You can get the open source code here: https://github.com/mapbox/mapbox-directions.js

The only example is here: https://www.mapbox.com/mapbox.js/example/v1.0.0/mapbox-directions/ but I have found the Input control does not work well and didn't fit my design.