Search code examples
mapbox-gl-jsmapbox-gl

Smoothly rotate icons via interpolate on MapboxGL

I'm trying to animate the rotation of my map markers when their values change using MapboxGL's data driven styling and the interpolate expression. Here is the relevant part of the layer config:

{
  layout: {
    'icon-rotate': ['interpolate', ['linear'], ['number', ['get', 'winddir'], 0], -180,-180, -90,-90, 0,0, 90, 90, 180, 180]
  }
}

The winddir property will be a value between -180 & 180.

The markers appear on the map rotated correctly. However, when they change, they "snap" to the next position. I'm thinking I'm not using the "stops" correctly. Here are the interpolate docs.

Solution

  • As the documentation says:

    Layout property. Optional number. Units in degrees. Defaults to 0. Requires icon-image. Supports interpolate expressions.

    It does not include the magic term "transitionable". So, animation transitions are not applied to icon-rotate.