Mapbox Driving Direction with Custom Marker

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":"farshid@ichit.com","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);

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.

All I needed to do was to customise the directions.js file, unfortunately even if you post your customise marker as part of your geoJson because it is hardcoded withing directions.js it won't change it unless you download the library and customise it yourself (you can make it dynamic as you load the geoJson object or change it as hardcode as you want) in the directions.js look for the following code

                L.setOptions(this, options);
            this._directions = directions || new L.Directions();
            L.LayerGroup.prototype.initialize.apply(this);

            this._drag = debounce(L.bind(this._drag, this), 100);

            this.originMarker = L.marker([0, 0], {
                draggable: !this.options.readonly,
                icon: L.mapbox.marker.icon({
                    "marker-symbol": "circle-stroked",
                    "marker-color": "23be20",
                    "marker-size": "medium",
                    "stroke": "#e8b920",
                    "stroke-opacity": "1.0",
                    "stroke-width": 5,
                    "fill":"#e8b920",
                })
            }).on('drag', this._drag, this);

            this.destinationMarker = L.marker([0, 0], {
                draggable: !this.options.readonly,
                icon: L.mapbox.marker.icon({
                    "marker-symbol": "circle-stroked",
                    "marker-color": "ff1f20",
                    "marker-size": "medium",
                    "stroke": "#e8b920",
                    "stroke-opacity": "1.0",
                    "stroke-width": 5,
                    "fill":"#e8b920",
                })
            }).on('drag', this._drag, this);

            this.stepMarker = L.marker([0, 0], {
                icon: L.divIcon({
                    className: 'mapbox-marker-drag-icon mapbox-marker-drag-icon-step',
                    iconSize: new L.Point(12, 12)
                })
            });

            this.dragMarker = L.marker([0, 0], {
                draggable: !this.options.readonly,
                icon: this._waypointIcon()
            });

            this.dragMarker
                .on('dragstart', this._dragStart, this)
                .on('drag', this._drag, this)
                .on('dragend', this._dragEnd, this);

            this.routeLayer = L.geoJson(null, {
                style: this.options.routeStyle
            });
            this.routeHighlightLayer = L.geoJson(null, {
                style: this.options.routeStyle
            });

            this.waypointMarkers = [];
        },

来源：https://stackoverflow.com/questions/33909296/mapbox-driving-direction-with-custom-marker

标签

javascript

mapbox

geojson