Mapbox Driving Direction

Question

I wanna use mapbox for a mapView using its Driving Direction API. I want to use this api to give me the route between two locations already defined. Let say we know the locations, and no we should draw the route between them. Also user should be able to change the locations (Markets / Pins on the map) to any location they want so mapbox should draw the appropriate route accordingly.

This is something that can do with mapbox Driving Direction but what I also want is to be able to get the locations, for example when user types in in the input boxes or uses the markets to locate the origin and destination, in the backend I want to be able to track these locations and log them.

Javascript Mapbox PHP

<div id='map'></div>
<div id='inputs'></div>
<div id='errors'></div>
<!--
<div id='directions'>
    <div id='routes'></div>
    <div id='instructions'></div>
</div>
 -->
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyc2hpZGFsYXZpIiwiYSI6ImNpZjNmNTRrYzQ0b2xzNWx1bXN5MnlmdjUifQ.IvZZfdiPe4rxQNolE88fhg';

var start = {lat: '<?php echo $__logbook->__route[0]->latitude ?>', lng: '<?php echo $__logbook->__route[0]->longitude ?>'};
var finish = {lat: '<?php echo end($__logbook->__route)->latitude ?>', lng: '<?php echo end($__logbook->__route)->longitude ?>'};

var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: false}).setView([start.lat, start.lng], 6);

map.attributionControl.setPosition('bottomleft');

var directions = L.mapbox.directions();

directions.setOrigin(L.latLng(start.lat, start.lng));
directions.setDestination(L.latLng(finish.lat, finish.lng));
directions.query();

var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions).addTo(map);
var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);
var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions).addTo(map);

console.log(L.mapbox.directions.inputControl);

$('#btn').click(function() {
    var obj = $('#live');
    obj.html('I just changed!!!');
    obj.trigger('contentchanged');
});

$('#inputs').bind('contentchanged', function(e) {
    console.log(L.mapbox.directions.inputControl);
});

</script>

I figure out the solution, I loaded the directions.js to my local library and made a lot of changes and in fact I merge it with my angular and scope (deploy) and it is working like a charm. I am happy to expose some of my code leave me a PM. thanks — Farshid

Farshid Farshid · Accepted Answer · 2016-01-14T01:35:52

I figure out the solution, I loaded the directions.js to my local library and made a lot of changes and in fact I merge it with my angular and scope (deploy) and it is working like a charm. I am happy to expose some of my code leave me a PM. thanks

Mapbox Driving Direction

1 Answers