Add the ability to set icon width/height independently

[stackTom]

mapbox-gl-js version: 0.36.0

Steps to Trigger Behavior

1. create source with image-icon

Expected Behavior

Actual Behavior

Is there a way to set icon-height or icon-width? I know we can set icon-size, but this scales images uniformly by both width and height.

[stevage]

You want to stretch the icon vertically? Not possible currently afaik. What's your use case? Some kind of data visualisation?

[stackTom]

Yes. I need to draw arrows on the map, and scale their length as appropriate based on a property. Scaling the whole arrow (both the arrow's width and height) doesn't produce the desired effect, as only the length of the arrow should change. My current workaround is to create arrows out of geojson line string. The only issue is that since these are based on lat/long points, they don't scale as appropriate based on zoom level. I will manually have to enlarge or shrink them depending on zoom, which wasn't an issue if I use icon-image. I am not sure if I can resize the geojson on the fly on each zoom event, as I am dealing with a lot of these geojson arrows.

[wysisoft]

I also want this, it allows things like progress bar to complete from 0 to 100

[ChrisLoer]

We think about this problem most frequently with highway shields, where we want to change the width of the shield icon based on the width of the number inside. The approach we use in our core styles is to create multiple icons with different aspect ratios, and dynamically choose which one to use based on the required width.

Just adding an independent height/width control wouldn't work well for two reasons:

• Changing the aspect ratio of bitmap-based icons causes all sorts of ugly distortion (using SDF icons can mitigate this issue, but at the cost of only allowing a single color).
• Even with good rendering, just stretching an icon looks weird in most cases. You actually want to stretch a specific part of the image.

One proposal we have for addressing the issue is #4143. Another idea we've been investigating is to support "vector icons", which would allow you to write style expressions to generate basically a mini-SVG on the fly.

I'm going to close this issue because I don't think we're likely to do anything that takes the form "set icon width/height independently", but the use case is definitely valid and it's something we want to address.