Mapbox icon size interpolation stops working

Question

I am running a Mapbox map with points that have an icon with this style:

  iconImage: ['get', 'icon'],
  iconSize: ['interpolate', ['linear'], ['zoom'], 15, 0.0015, 23, 0.2],
  iconAllowOverlap: true,

The icon is an image of a house. The interpolation works well until the zoom is very high and the iconSize stay the same but the map is more detailed, making the house smaller and smaller: https://i.imgur.com/6i8OwPL.mp4.

Any suggestion would help. Thank you in advance.

I can definitely rule out that the problem is the size of the image because I can make the height of the image bigger that the height of the phone.

Steve Bennett Steve Bennett · Accepted Answer · 2020-08-23T23:22:23

That's a great icon.

I think the answer is just that you need to make the icon image even bigger at that zoom scale. Probably you want to use an exponential interpolation, rather than linear, too. Maybe something like:

iconSize: ['interpolate', ['exponential', 2], ['zoom'], 15, 0.0015, 23, 1],

Hard to be more specific without access to your code somewhere.

Mapbox icon size interpolation stops working

1 Answers