search

mapbox / mapbox-gl-style-spec

76 stars 38 forks source link

Nine-part resizable images #581

Closed 1ec5 closed 7 years ago

1ec5 commented 7 years ago

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

cammace commented 7 years ago

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.

kkaefer commented 7 years ago

Might be subsumed by https://github.com/mapbox/mapbox-gl-style-spec/issues/222?

1ec5 commented 7 years ago

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.

lucaswoj commented 7 years ago

This issue was moved to mapbox/mapbox-gl-js#4143