Mapbox Custom marker anchor and zoom issues

Question

MapBox Android SDK v4.1.1.1 via Xamarin Component (https://components.xamarin.com/view/mapboxsdk/)

I'm using the sample testbed provided with the Xamarin component above and am trying to set a drawable as the marker Icon using the mapbox Marker class. At runtime the marker anchoring appears to be set to top/left by default which results in the marker moving across the map South West during any zooming in and North East when zooming out. If I remove setting of the Icon then the default icon is used and it positions itself correctly during any zooming and rotation gestures.

Can anyone give any insight for this behaviour and how to counter it?

Sample code:

                        protected override async void OnCreate (Bundle bundle)
                        {
                            base.OnCreate (bundle);

                            SetContentView (Resource.Layout.Main);

                            mapView = FindViewById<MapView> (Resource.Id.mapview);
                            mapView.AccessToken = GetString (Resource.String.mapboxAccessToken);
                            mapView.StyleUrl = Mapbox.Constants.Style.MapboxStreets;
                            mapView.OnCreate (bundle);

                            // Get the map instance
                            map = await mapView.GetMapAsync ();
                            map.UiSettings.ZoomControlsEnabled = true;

                            //Removed code for click events

                            map.AddMarker (new MarkerOptions ()
                                           .SetTitle ("Test Marker")
                                           .SetPosition (new LatLng (41.885, -87.679))                            
        //This is the only change made from the provided sample code - for setting the icon             
          .SetIcon(IconFactory.GetInstance(this).FromResource(Resource.Drawable.Driver_Pin)
        //This is the only change made from the provided sample code - for setting the icon 
                                           );
                            var position = new CameraPosition.Builder ()
                                            .Target (new LatLng (41.885, -87.679)) // Sets the new camera position
                                            .Zoom (11) // Sets the zoom
                                            .Build (); // Creates a CameraPosition from the builder
                        map.AnimateCamera (CameraUpdateFactory.NewCameraPosition (position), 3000);
                    }

I switched to use the Mapbox MarkerView class which gives access to the SetAnchor() method, however it does not appear to have any effect on the issue regardless of what values I use.

             map.AddMarker (new MarkerViewOptions ()
                           .SetTitle ("Test Marker")
                           .SetPosition (new LatLng (41.885, -87.679))
                           .SetAnchor(0.5f, 1.0f) // this should be bottom center
                           .SetIcon(IconFactory.GetInstance(this).FromResource(Resource.Drawable.Driver_Pin))
                          );

The icon drawable I'm using is a simple square PNG with no padding with the expected point on the map to be at the bottom center of the icon.

Also, if I enable the built in Zoom buttons (via the UISettings) then zooming in and out also seems to have a top/left bias, meaning that instead of zooming in to the centre point of the visible map, the zoom seems to be centered on a point South West of it.

This SO post Drawable icons on route not pinned at base seems to be related to the issue I'm seeing and the final comment from the OP would indicate there is still a problem with custom marker icons and anchoring even though reference is made to anchoring issues being resolved in v4.1.1.

cammace cammace · Accepted Answer · 2016-12-06T00:30:37

Thanks for the detailed write up, while Mapbox doesn't directly support the Xamarin Component, I was able to reproduce the issue in this SO question. You can try updating to 4.2.0-beta.5 if Xamarin has this. MarkerOptions shouldn't have any anchoring issues but you will have to add padding to the bottom of the icon (the anchoring is centered).

Mapbox Custom marker anchor and zoom issues

1 Answers