Reputation: 23

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":"[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);

Upvotes: 1

Answers (3)

Aliaksei Makas

Reputation: 123

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 :)

Upvotes: 0

Farshid

Reputation: 23

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 = [];
        },

Upvotes: 1

kmandov

Reputation: 3209

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.

Upvotes: 1

Mapbox Driving Direction with Custom Marker

Answers (3)

Related Questions