Advice on how best to add many symbols at different rotations

[liebrand]

Hi there,

I'm attempting to add wind data to a map, much like this example:
http://goo.gl/OC7Ujp

In short this means

• many (a few hundred) wind symbols,
• each at a potentially different rotation
• some isobar linestrings
• some polygons for rain/clouds

The linestrings and polygons are straight forward, but the wind symbols are a little more puzzling to add to mapbox-gl. Initially I wanted to just add one symbol layer, and then have each symbol be rotated along the direction of the wind. Something like this:

      "type": "symbol",
      "layout": {
          "icon-image": "wind-symbol",
          "icon-rotate": parseInt("{DIRECTION}", 10) * (180 / Math.PI)
      }

Where the DIRECTION field would be set for each Point Feature in it's geojson properties.

However, it appears the "{FIELD}" is only resolved for 'text-field'. Is there a reason for this? Performance? Or has their simply not really been a need to allow layout/paint properties to be derived from geojson properties before? Would it be possible to add that?

The only alternative I see is to add 360 layers, each with a different icon-rotate, and a filter to pick out the correct point features. But gut feeling here is that adding 360 layers to the map is not going to be the most efficient?

Also, I'll likely have different data for the different zoom levels. So either I would need to remove and add new json data during zoom events. Or add yet more layers, each with a different min/max zoom level so that the correct data is shown. (ie I dont want to show thousands of wind symbols in a zoomed out view). So assuming I want to display different data at every other zoom level, with some sensible min/max, lets say 4 different data sets, then I'd have to have 4 * 360 layers.... I'm assuming that would not be very performant?

So in summary:

• Is there a way to rotate individual points within a layer?
• Or is there a better way to do this?

[jfirebaugh]

Until data-driven styles are implemented, multiple layers is the only way to accomplish this. If you need degree-level precision for rotation, I think the minimum number of layers is 360. "icon-image" also supports via the {value} syntax so the image can be a feature property.

[liebrand]

Ah excellent, {icon-image} based on property is going to be better in my case than 360 layers, so that'll tie me over until data-driven styles come in to play.. thanks!