How do I change the marker of Mapbox with directionsjs? It shows A and B markers [duplicate]

How do I change the Mapbox marker (when using directionjs)?

It shows A and B markers.

I tried editing the marker but lose directions.

var x= L.marker([51.508245, -0.087700], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-icon': 'monument',
        'marker-color': '#fa0'
    })
}).addTo(map);  


// Set the origin and destination for the direction and call the routing service
directions.setOrigin(L.latLng(x)); 
directions.setDestination(L.latLng(51.508112, -0.075949));   
directions.query(); 



var directionsLayer = L.mapbox.directions.layer(directions).addTo(map); 
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions)
    .addTo(map);
  var directionsLayer = L.mapbox.directions.layer(directions, {readonly: true}).addTo(map);

The above is what I tried but it broke directions. I am looking for a way to change the icons of A and B.

JSFiddle: https://jsfiddle.net/x48qrca8/1/

Answers:

Answer

Try looking at their examples on how to do different marker styles. For an image, check out this example, specifically at this code:

myLayer.on('layeradd', function(e) {
  var marker = e.layer,
      feature = marker.feature;
  marker.setIcon(L.icon(feature.properties.icon));
});
myLayer.setGeoJSON(geojson);

This is going into the GeoJSON properties and using the icon value under feature.properties to figure out how it should be styled.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.