Nine-part resizable images

[lucaswoj]

From @1ec5 on November 26, 2016 20:1

As part of moving style images inline (#220), we should add support for resizable images, also known as border images in CSS and on Qt, stretchable images on iOS, nine-part images on macOS, and nine-patch images on Android.

In combination with the icon-text-fit property added in #461, a resizable image would automatically resize to fit a label, but we’d be able to avoid distorting its corners or any outline baked into it. The “corner” parts of the image would remain as-is regardless of the image’s rendered size, while “edge” parts of the image could be either stretched or repeated, depending on the use case.

Just to kick things off, the proposed syntax below is loosely based on CSS3’s border-image properties:

{
  "de-federal": {
    "width": 6,
    "height": 6,
    "x": 824,
    "y": 642,
    "pixelRatio": 2,
    "slice": [5, 5, 5, 5],
    "repeat": ["stretch", "repeat"]
  }
}

This feature would allow styles such as Mapbox Streets to consolidate several style images that currently differ only in the number of digits that fit within them, and these images could be much smaller, making the overall sprite sheet more compact. Some reflen-specific images would still be required for exotic shapes, such as the Interstate and U.S. Route shields.

/cc @mapbox/cartography-cats @mapbox/gl

Copied from original issue: mapbox/mapbox-gl-style-spec#581

[lucaswoj]

From @cammace on November 28, 2016 17:4

I've been running into this distortion issue with the images i've been adding to the map during runtime. It would be great to also be able to use icon-color on the nine-patch images.

[lucaswoj]

From @kkaefer on November 29, 2016 13:25

Might be subsumed by mapbox/mapbox-gl-style-spec#222?

[lucaswoj]

From @1ec5 on November 29, 2016 22:39

Not necessarily. While both nine-part images and a truly scalable image format have some overlap of use cases (especially for highway shields), there’s a lot of good tooling and native platform support around nine-part images that likely won’t be compatible with any custom image format we develop. So nine-part images would be desirable for better platform integration at least.

[1ec5]

The current road name label in the navigation SDK could take advantage of this option to display a road name in a rounded rectangle. The iOS implementation uses a native view (mapbox/mapbox-navigation-ios#1576), but runtime styling would be desirable for the Android implementation (mapbox/mapbox-navigation-android#1222) for various reasons, so this feature would allow us to achieve the same effect on both platforms. The current road name label is never scaled, so a vector icon wouldn’t be an improvement over a nine-part image.

[andrewharvey]

for people tracking this issue, it continues at #8917

@kkaefer should we close this issue in lieu of #8917 ?

[ryanhamley]

Closed by #8997 🎉