How do I rotate an icon as specified by geoJSON in Mapbox?

Question

I have a geoJSON that contains points that show symbols of wind speed. I am trying to understand how to change my code to allow for rotation. I am sure I have seen this before but I can't find an example anywhere.

For reference, here a feature in my geoJSON that contains no attribute for rotation :

{
    "type": "Feature",
    "geometry": {      "type": "Point",
      "coordinates": [-117.2500 , 33.35000]
     },
     "properties": {
        "description": " ",
        "icon": "wind-speed-15"
     }
}

And here is my code to add it to the map :

map.addLayer({
        id: "wind_speed",
        type: 'symbol',
        source: 'wind_speed_json',
        layout: {
            'icon-image': ['get', 'icon']
        }
    })

What do I need to change in my JSON to allow Mapbox to rotate per each feature? I was thinking something like this, in degrees (just an example) :

 "properties": {
    "description": " ",
    "icon": "wind-speed-15",
    "icon-rotate": 90
 }

I can only find examples of how to rotate using icon-rotate that apply to the entire JSON, not for each feature. Is there a way to style it like this? Surely I must be doing something wrong.

Answer 1

You're on the right track, but confusing two issues.

First, you need to add a value to the GeoJSON object. You can call this field whatever you like.

"properties": {
    "description": " ",
    "icon": "wind-speed-15",
    "rotation": 90
 }

Next, you need to tell Mapbox-GL-JS how to turn that property into icon rotation:

layout: {
            'icon-rotate': ['get', 'rotation']
        }