Support for Popups (rendered on map, not via Android view)

[SamuelBrucksch]

Hi,

i want to be able to place a popup on the map similiar to this sample in mapbox-gl-js: https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/

the idea is that i want to add popup texts, that contain information for a route, for example like this:

Right now i just add an image as background and overlay it with a text + x/y-offset. However that overlays the route in some cases and i would have to manually check the position of the popup and adjust the anchor and position of the pointer on each frame rendered to the map.

The popup in mapbox-gl-js already deals with positioning the pointer at least depending on the position of the map:

The pointer of the popup is is pointing to the map so that the information has the best visible spot on the map. I want to be able to add such a popup to the map as well, that automatically places the popup pointer so that it automatically adjusts to the viewport and tries to not overlay anything else.

If there is already anything available that could do this with the current implementation please let me know. This is for Android Auto, so it requires to be drawn on the map like a marker and not to use any additional android views.

Thanks in advance.

[ZiZasaurus]

@SamuelBrucksch this is something we don't support at the moment so the logic implementation would need to be your own, using the view annotation API. Please note it would require the usage of an Android View, which is not applicable for Android Auto.

With Android Auto, you could use the Annotation API, or a simple layer and sources but the implementation to adjust the anchor and position of the annotation would also be your own.

[yunikkk]

Linking answer about current progress and possible workarounds from the very similar ticket https://github.com/mapbox/mapbox-maps-android/issues/342#issuecomment-1028403362

[SamuelBrucksch]

As you can see in the first screenshot we already draw 3 overlays onto the map (on the right). So drawing is not really a problem this time. Also the "popup" we currently use is just a marker with a popup image, however that marker does not automatically adjust to the viewport or drawn features (yet).

So if i have to calculate the position myself, what would be the best approach? Should this be done in the onRenderFrame listener?

My first approach on how to deal with this would be to query the features around the position where i want to place the popup marker, then convert that into x/y coordinates (if it is not already) and try to find the position, that has the least overlaps. Is that a good approach? Or would you recommend something else?

[yunikkk]

@SamuelBrucksch you could use CameraChangeListener to listen for camera updates and position markers accordingly

[ZiZasaurus]

@SamuelBrucksch were you able to follow the suggestion provided above by @yunikkk?

[SamuelBrucksch]

Did not have time yet to check it out. Also I'm still missing what would be the best option to calculate the placement. Is the best way to query features and then decide where to draw? Or is there an easier solution?

[yunikkk]

@SamuelBrucksch my answer was about where you can listen to camera updates to trigger placement logic to happen. And your question seems more about how to determine the best place for your custom view so that it wouldn't intersect any features, right? I don't think we have any other solutions here other then to calculate screen coordinates of the features that may intersect with your views, then determine if the views need to be drawn and where exactly they should be placed.