Example showing stretchable icon-image

[tobrun]

With mapbox/mapbox-gl-native-android#314 we now have support for stretchable icon-images. These are ideal to be used as an 'InfoWindow/Popup`. Would be great to showcase selecting an icon-image on a map and showing a stretchable icon-image with a label as result of it (we no longer need to rely on view -> bitmap generation)

cc @mapbox/maps-android

[langsmith]

The test app activity in mapbox/mapbox-gl-native-android#314 doesn't apply any type of anchor/offset, which means the middle of the window stays on top of the Feature coordinate, rather than the V bottom tick part of the window sitting right above the anchor coordinate.

I'm still very much exploring this new stretchable core Mapbox API, but I'm finding it hard to work with the stretching + offset/anchor. It might be easy to set ImageStretches values and other stuff, if the specific text is known. However, it seems like it'd be tough to wrap and position icon+text of dynamic data that's coming from a REST get call from a cloud server or something.

Worked on this on https://github.com/mapbox/mapbox-android-demo/pull/new/ls-stretchable-icon-example-and-refactor-other-examples in case you wanna' give it a shot yourself. Some of the things I tried are below.

VERSION 1:

textField(format),
iconImage(POPUP_IMAGE_ID),
iconAllowOverlap(true),
textAllowOverlap(true),
textIgnorePlacement(true),
iconIgnorePlacement(true),
iconOffset(new Float[]{0f, -31f}),
//                iconAnchor(Property.ICON_ANCHOR_BOTTOM),
//                textOffset(new Float[]{0f, -29f}),
iconTextFit(ICON_TEXT_FIT_BOTH)));

Bottom of window stays on the actual anchor coordinate

VERSION 2:

textField(format),
iconImage(POPUP_IMAGE_ID),
iconAllowOverlap(true),
textAllowOverlap(true),
textIgnorePlacement(true),
iconIgnorePlacement(true),
//                iconOffset(new Float[]{0f, -31f}),
iconAnchor(ICON_ANCHOR_BOTTOM),
//                textOffset(new Float[]{0f, -29f}),
iconTextFit(ICON_TEXT_FIT_BOTH)));

Despite the use of iconAnchor(ICON_ANCHOR_BOTTOM),, the bottom of the window doesn't respect the actual anchor coordinate.

VERSION 3:

textField(format),
iconImage(POPUP_IMAGE_ID),
iconAllowOverlap(true),
textAllowOverlap(true),
textIgnorePlacement(true),
iconIgnorePlacement(true),
//                iconOffset(new Float[]{0f, -31f}),
//                iconAnchor(ICON_ANCHOR_BOTTOM),
textOffset(new Float[]{0f, -29f}),
iconTextFit(ICON_TEXT_FIT_BOTH)));

The text and window don't even show up