How to get 'line-dasharray' value from geojson for mapbox GL

Question

I am trying to get the value through ['get', 'line-dasharray'] but getting an error

Here is my code

var data = {
          'type': 'FeatureCollection',
          'features': [
 {
              'type': 'Feature',
              'geometry': {
                'type': 'LineString',
                'coordinates': []
              },
              'properties': {
                'route_id': 300,
                'route_url': 'http://test.com/file.gpx',
                'line-color': '#426d7e',
                'line-width':     3,
                'line-opacity':   1,
                'line-dasharray': [5, 2]
              },
            },
]
    }

// some code



              map.addSource('locations-rote', {
                type: 'geojson',
                data: data,
                generateId: true
              });

map.addLayer({
                  'id': 'route-coordinates',
                  'type': 'line',
                  'source': 'locations-rote',
                  'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                  },
                  'paint': {
                    'line-color': ['get', 'line-color'],
                    'line-width': ['get', 'line-width'],
                    'line-opacity': ['get', 'line-opacity'],
                    'line-dasharray': ['get', 'line-dasharray']
                  }
                });

I try to use an array expression - https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#types-array but also get an error. Tell me how to solve the problem.

Answer 1

Although you didn't specify what the error is that you are getting, it is likely the case that you are seeing something similar to:

Error: layers.route-coordinates.paint.line-dasharray: data expressions not supported

As indicated in the SDK support for the line-dasharray documentation here , this is because data-driven styling (ie using an expression to determine values for the property with information derived from your source data) is not yet supported on GL JS for the line-dasharray property.

If you'd like to style the line dashes differently based on different properties, you could instead create a few different layers referencing this source data by applying filters .

Answer 2

Mapbox supported data-driven property 'line-dasharray' on version 2.3.0. You can update sdk version.

For more detail, see github issue .