Add Marker anchor points

[ljbade]

Currently due to lack of support in core GL layer, we don't support anchor() with Marker. An anchor is a custom point in the Marker image (using a GL texture like coordinate system of 0 to 1) where we assign the Markers 'position()` to.

Currently we just use the centre of the image. You can see this is the default red marker image which is twice as high as needed (and padded with transparent pixels) to push the tip of the marker to the image centre. A anchor function would remove the need for this padding.

However this is not currently on our core GL roadmap.

A similar infoWindowAnchor() function would be easy to implement currently as it would only require changes to Java.

[ljbade]

/cc @tobrun @bleege @zugaldia

[thatsvishalhere]

Hi, I was working on an Android app and experimenting with somewhat bigger markers on Mapbox maps with images. Since the marker is fairly big (having a big marker is kind of necessary for the app. I just need 1 marker for the map and no marking of routes involved), I would definitely need the anchor for the marker. The big marker currently gets a very inaccurate position on the map and gets worse while zooming in/out of the map in different views. Is there any workaround regarding the same? Any help would be appreciated. Thanks! :)

[tobrun]

@thatsvishalhere
Thank you for reaching out and highlighting this issue.

• Are you able to share that image you are referring to?
• or share the details (height/width)?

It will help a lot when trying to implement the feature / resolve the incorrect positioning,

[thatsvishalhere]

Hi, thanks for your reply. I'm using markers of height more than 48 dp. For example you may consider this marker, https://github.com/google/material-design-icons/blob/master/navigation/drawable-mdpi/ic_arrow_downward_black_48dp.png. I can't anchor the lowermost tip of the marker to a particular point in the map. Since I want to show the correct point on the map with the lowermost tip and the anchor is of the image is set to the middle of the icon, I can't really show the right location on the map. The lower most point on the icon is pointing to different locations on the map on zoom in/out and rotation of the map.

[friedbunny]

The (already mentioned) workaround here is to double the height of your marker asset, such that the desired anchor is also the true center. This is how our marker images currently work.

[thatsvishalhere]

Thanks for your response. I'm doing exactly that for the workaround. I was just worried if clicking on the empty space would also trigger the onMarkerClick actions. But, so far there haven't been any issues. :)

Just for reference, if somebody else is looking for a hack and lands on this thread, this is the code I'm using:

public static Bitmap mapboxHackIcon(Bitmap icon){
        Bitmap loc_img = Bitmap.createBitmap(icon.getWidth(), 2*icon.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas bitmapCanvas = new Canvas(loc_img);
        Bitmap tempBitmap = icon.copy(Bitmap.Config.ARGB_8888, false);
        bitmapCanvas.drawBitmap(tempBitmap, 0, 0, null);
        return loc_img;
    }

Thanks again for your response!

[tobrun]

This is something that should be picked up with marker refactoring for 4.1.0 release.

[tobrun]

I'm picking this up, since this is a blocker for #3643 and a highly requested feature.

[tobrun]

Looking into this, I feel the only real good solution would be a feature in core.
We could go with a hack as suggested above but this will be not very efficient.
I need to check what status is for core GL roadmap on this feature.

[bleege]

Looking into this, I feel the only real good solution would be a feature in core.

👍

[brunoabinader]

Looking into this, I feel the only real good solution would be a feature in core.

After discussing this with @tobrun, I propose the following:

• Replace Map::getTopOffsetPixelsForAnnotationIcon withMap::getAnnotationIconOrigin, with origin being a ScreenCoordinate to comply with both axis customization.
• Add an optional anchor parameter to addAnnotationIcon, which will be the return value for the function suggested above, being the top left position the fallback value.

[jfirebaugh]

This comment from the related iOS issue is relevant.

The "right way" to implement this is via the icon-offset or icon-translate style properties. But in order to control those per-annotation, we need either data-driven styles or control over annotation grouping into layers.

[tobrun]

@jfirebaugh thank you for the 👀, will not work or ping people for this or similar issues until the dust from implementing the style api has settled.

[tobrun]

Closing as it will be automatically be picked up again with style api and we have a workaround with view annotations in place.

[andre99]

Just in case someone comes across this and needs it working on v4.1.0, I have found a solution.

If you call MarkerViewManager.ensureInfoWindowOffset() with the marker that you've just added it will add the marker correctly.