javascript - Mapbox Driving Direction with Custom Marker

Question

I have the following code to use mapbox as my driving direction, but unfortunately it doesn't allow me to change the markers, and it keeps using its default marker even though I try to change it with geoJson

<script>

L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyc2hpZGFsYXZpIiwiYSI6ImNpZjNmNTRrYzQ0b2xzNWx1bXN5MnlmdjUifQ.IvZZfdiPe4rxQNolE88fhg';

var __journey = {"logbook":"29","consumer":"732","account":"1","category":"13","source":"2","platform":"4","vehicle":"25","label":"Farshid","startingodometer":"20000","endingodometer":"22721","note":"","status":"unverified","isreimbursable":"no","isdeductible":"yes","type":"deductible","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21","dbupdate":"2015-11-25 14:42:21","detail":{"logbook":"29","consumer":"732","account":"1","category":"13","source":"2","platform":"4","vehicle":"25","label":"Farshid","startingodometer":"20000","endingodometer":"22721","note":"","status":"unverified","isreimbursable":"no","isdeductible":"yes","type":"deductible","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21","dbupdate":"2015-11-25 14:42:21"},"__consumer":{"customer":null,"customerkey":"ed64e42a-e7c1-49b9-9fef-f5dd96bcd783","firstname":null,"lastname":null,"apikey":null,"email":"[email protected]","birth":null,"pincode":null,"pinlastupdate":null,"password":null,"gender":null,"emailverify":"1","postcode":null,"reference":null,"country":null,"forgetpasswordtoken":null,"forgetpasswordexpiry":null,"ipaddress":null,"company":"3","created":null,"updated":null,"active":"1","active !=":null,"archive":"0","archive !=":null,"mobile":null},"__account":{"id":"29","account":"Business","sequence":null,"icon":null,"parent":null,"customer":null,"admin":null,"created":"2015-11-23 03:10:21","updated":"2015-11-23 03:10:21","active":null},"__category":{"id":"29","category":"Home","brands":null,"keywords":null,"icon":null,"parent":null,"customer":null,"admin":null,"active":null,"customisable":null,"created":"2015-11-23 03:10:21","updated":"2015-11-25 03:42:21"},"__source":{"source":"29","creator":null,"name":"My Car","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21"},"__platform":{"platform":"29","creator":null,"name":"My Car","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21"},"__route":[{"logbookroute":"1448421928.896","logbook":"29","latitude":"-37.8437403","longitude":"144.9758769","pindate":"2015-11-05","pintime":"02:09 AM","journey":"29","pinned":"2015-11-05 02:09:00"},{"logbookroute":"1448421928.901","logbook":"29","latitude":"-31.980216","longitude":"115.869578","pindate":"2015-11-22","pintime":"12:10 PM","journey":"29","pinned":"2015-11-22 12:10:00"}],"__vehicle":{"vehicle":"25","consumer":"732","name":"My Car","make":"Toyota","family":"Yaris","description":"1.4 Manual","year":"2015","odometer":"20725","registrationnumber":"123ABC","isactive":"yes","isdefualt":"no","isdeleted":"no","updated":"2015-10-10 10:10:10","created":"2015-10-10 10:10:10","dbupdate":"2015-11-23 03:10:21","log":"2","__make":false,"__family":false,"__description":false},"__reimbursement":false,"taxdeduction_code":"D5","mileage":"2721","name":"My Car","accountname":"Business","categoryname":"Home","reimbursement_status":null};
var start = {lat: '-37.8437403', lng: '144.9758769'};
var finish = {lat: '-31.980216', lng: '115.869578'};
var zoom = 9;

if(Number(__journey.mileage) >= 10000) zoom = 1;
else if(Number(__journey.mileage) >= 4000) zoom = 2;
else if(Number(__journey.mileage) >= 700) zoom = 3;
else if(Number(__journey.mileage) >= 500) zoom = 5;
else if(Number(__journey.mileage) >= 400) zoom = 6;
else if(Number(__journey.mileage) >= 300) zoom = 7;
else if(Number(__journey.mileage) >= 200) zoom = 8;
else zoom = 9;

console.log(zoom);

var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: true}).setView([-35.792529592717, 129.89108613555], zoom);

var geoJson = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            properties: {
                "marker-color": "#f76565",
                route: {id: 1, type: "origin", points: 2}
            },
            geometry: {
                type: "Point",
                coordinates: ['144.9758769', '-37.8437403']}
        },{
            type: "Feature",
            properties: {
                "marker-color": "#f76565",
                route: {id: 2, type: "destination", points: 3}
            },
            geometry: {
                type: "Point",
                coordinates: ['115.869578', '-31.980216']
            }
        }
    ]
};

var origin = {"type":"Feature","geometry":{"type":"Point","coordinates":[144.9758769,-37.8437403]},"properties":{"marker-symbol":"circle-stroked","marker-color":"ff1f20","marker-size":"medium"}};
var destination = {"type":"Feature","geometry":{"type":"Point","coordinates":[115.869578,-31.980216]},"properties":{"marker-symbol":"circle-stroked","marker-color":"23be20","marker-size":"medium"}};

// = L.mapbox.directions({profile: 'mapbox.driving'})
var directions = L.mapbox.directions();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);
directions.setOrigin(origin).setDestination(destination).query();

var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);

var myLayer = L.mapbox.featureLayer().addTo(map);
myLayer.setGeoJSON(geoJson);

Answer 1

The Mapbox Directions API inserts the standard markers on top of your custom ones. You also seem to add the directionsLayer and directionsRoutesControl several times.

This should work:

var geoJson = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            properties: {
                "marker-color": "#f76565",
                "marker-symbol":"circle-stroked",
                "marker-color":"ff1f20",
                "marker-size": "medium",                
                route: {id: 1, type: "origin", points: 2}
            },
            geometry: {
                type: "Point",
                coordinates: ['144.9758769', '-37.8437403']}
        },{
            type: "Feature",
            properties: {
                "marker-color": "#f76565",
                "marker-symbol":"circle-stroked",
                "marker-color":"23be20",
                "marker-size":"medium",                
                route: {id: 2, type: "destination", points: 3}
            },
            geometry: {
                type: "Point",
                coordinates: ['115.869578', '-31.980216']
            }
        }
    ]
};

var origin = geoJson.features[0];
var destination = geoJson.features[1];

var directions = L.mapbox.directions();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);
directions.setOrigin(origin).setDestination(destination).query();

var myLayer = L.mapbox.featureLayer().addTo(map);
myLayer.setGeoJSON(geoJson);

Here is a working example.