Accessing styling for each part of the route.

[bomanimc]

Is it possible to access for each part (step) of the route? For example, how would I go about turning a drive down Townsend Street to red, and a drive down The Embarcadero to purple? This would be somewhat like how Google Maps shows traffic by coloring.

[bomanimc]

I noticed this https://github.com/mapbox/mapbox-gl-directions/pull/55, but wondering if there is anything more granular.

[mapsam]

Hi @bomanimc - can you describe what specifics you'd like to style? Currently you can pass in a full styles array that replaces each route layer in the default style. If you were to copy the default and update the properties you need, does that open up more options for you?

[mapsam]

An example of styling the origin point (taken directly from the default style):

{
  'id': 'directions-origin-point',
  'type': 'circle',
  'source': 'directions',
  'paint': {
    'circle-radius': 18,
    'circle-color': '#3bb2d0'
  },
  'filter': [
    'all',
    ['in', '$type', 'Point'],
    ['in', 'marker-symbol', 'A']
  ]
}

[patricktargun]

When I pass a style object in, it removes the 'A' from the circle.

Note: I also tried passing the entire array in from the default styles, and lost both 'A' and 'B' from circles.

var directions = new MapboxDirections({
  accessToken: mapboxgl.accessToken,
  styles: [{
    'id': 'directions-origin-point',
    'type': 'circle',
    'source': 'directions',
    'paint': {
      'circle-radius': 18,
      'circle-color': '#3bb2d0'
    },
    'filter': [
      'all',
      ['in', '$type', 'Point'],
      ['in', 'marker-symbol', 'A']
    ]
  }]
})

[morgant]

While it sounds like a different question than @bomanimc originally asked (sounds like he wanted to be able to apply different styles for each stage of the route, or maybe individually between each waypoint), but I’m experiencing the same issue as @Targun. If I pass just a single style (or in my case, a few: directions-origin-point & directions-destination-point) into MapboxDirections(), I lose the labels. Same if I pass in the entire array from the default styles.

Is this because mapState() calls addLayer() for each default style, then addLayer() again for each of the styles passed in (with the same style IDs, but presumably above the defaults)? Shouldn’t the passed styles be merged with the default styles instead?

[mollymerp]

@morgant your issue is addressed in #168