[Android] Custom Icon Drift When Map Is Moving and Unable to Change CustomIcon Size

[josefkorbel]

Hello, great library, i just moved from gmaps because i was missing some things there, however, i ran into an issue, my custom icons are drifting when im moving the map around, also they are very small and i have not found a way to solve this yet.

Thanks for answer in advance!
Cheers

[cammace]

Glad to hear you are using our SDK in your Android application. Could you provide a gif/video of the bug occurring? Does this only happen when the map is being panned and once the camera is finished moving the markers return to their correct positions?

The icons being to small might be a result of you placing them inside the wrong drawable density folder if they are pngs. Try generating the correct sizes for all 5 densities and see if the issues resolved. Otherwise sharing the icon image file will help me troubleshoot the issue.

[josefkorbel]

Hi Cammace ! Thanks for your fast respond.
Here is gif of the drift occuring

It looks like the icons are on separate layer, and the trigger to move is slightly delayed for it compared to the map layer.
Also, i have tried generating assets for all 5 densities from svg to png but that has exactly the same effect.
Now i use only one 94x94 png from main drawable folder, here it is.

I resized the bitmap to exactly 64x64 (size i need) but still the icon remain so small.
Here is my code to turn png from drawable into icon:

bitmapDrawable =(BitmapDrawable) ContextCompat.getDrawable(this.getContext(), R.drawable.pinpoint_timothy);
originalBitmap = bitmapDrawable.getBitmap();
resizedBitmap = Bitmap.createScaledBitmap(originalBitmap, width, height, false);

IconFactory iconFactory = IconFactory.getInstance(this.getContext());
icon = iconFactory.fromBitmap(resizedBitmap);

Thanks !

[vanshg]

Are you on the 4.2.0 beta? I believe the delay in the movement of the Annotations is because of the update of the MapView from TextureView to SurfaceView

#5000 (comment)

[josefkorbel]

I am

compile ('com.mapbox.mapboxsdk:mapbox-android-sdk:4.2.0-beta.1@aar'){
        transitive=true
}

[josefkorbel]

I somehow fixed the icon size, but the drift remains, should i use another version?

Here is the fix

// Icon Size 56x56dp
int height = (int) convertDpToPixel(56,getContext());
int width = (int) convertDpToPixel(56,getContext());

bitmapDrawable =(BitmapDrawable) ContextCompat.getDrawable(this.getContext(), R.drawable.pinpoint_timothy);
originalBitmap = bitmapDrawable.getBitmap();
resizedBitmap = Bitmap.createScaledBitmap(originalBitmap, width, height, false);

IconFactory iconFactory = IconFactory.getInstance(this.getContext());
icon = iconFactory.fromBitmap(resizedBitmap);

[vanshg]

Version 4.1.1 uses a TextureView and doesn't have the jiggle. However, it is also lower performance (again, see #5000 (comment)).

[josefkorbel]

When im trying version 4.1.1 it is suddenly giving me this error com.mapbox.mapboxsdk.exceptions.InvalidAccessTokenException:
but i have my api key filled and its working in 420

[tobrun]

@josefkorbel
There are two types of markers within our SDK:

• gl based markers: these are sprites drawn in GL on a symbol layer as part of the map and don't jiggle. They scale great in numbers but are limited in functionality. If you use a classes extending from Marker/MarkerOptions you are using GL drawn markers.
• view based markers: these are Android SDK views synchronised with the map and have some lag. Latest switch as to SurfaceView has indeed the downsides mentioned by [Android] Custom Icon Drift When Map Is Moving and Unable to Change CustomIcon Size #6139 (comment). If you use classes extending from MarkerView/MarkerViewOptions/MarkerViewAdapter than you are using View based markers.

If you are just showing simple markers and don't require special interaction I would opt on using gl based markers. We continue to work on improving its functionality as well work on the view synchronisation of view based markers.

[josefkorbel]

Thanks for the tip.

I changed

mapboxMap.addMarker(new MarkerViewOptions()
                        .position(new LatLng(-33.85699436, 151.21510684))
                        .icon(icon));

to

mapboxMap.addMarker(new MarkerOptions()
                        .position(new LatLng(-33.85699436, 151.21510684))
                        .icon(icon));

And it is not jiggling anymore, but it is slower as mentioned.

We are doing big application during summer strv.com/academy for enablingthefuture.org as volunteers, both Android and iOS, and on iOS the map is working great.
Also on 30. Sep we have an DemoDay, which we will gladly use to release, is there any possibility there might be any change in the performance during that date?

Thanks )

[mayardb]

Hello Mapbox Team,

I have been thinking about this issue, and I have been wondering why markers were drawn so late.
I think, I just find the real issue: markers are not drawn too late, it the nativemapview that is drawn too soon.

Take the example of zoom method call.

private void zoom(boolean zoomIn, float x, float y) {
        // Cancel any animation
        nativeMapView.cancelTransitions();

        if (zoomIn) {
            nativeMapView.scaleBy(2.0, x / screenDensity, y / screenDensity, MapboxConstants.ANIMATION_DURATION);
        } else {
            nativeMapView.scaleBy(0.5, x / screenDensity, y / screenDensity, MapboxConstants.ANIMATION_DURATION);
        }

        // work around to invalidate camera position
        postDelayed(new ZoomInvalidator(mapboxMap), MapboxConstants.ANIMATION_DURATION);
    }

If think that nativeMapView.scaleBy draw the first frame immediately and call onMapChanged callback right after:

public void onMapChanged(@MapChange int change) {
                if (change == DID_FINISH_LOADING_STYLE && initialLoad) {
                    ...
                } else if (change == REGION_IS_CHANGING || change == REGION_DID_CHANGE || change == DID_FINISH_LOADING_MAP) {
                    mapboxMap.getMarkerViewManager().scheduleViewMarkerInvalidation();

                    compassView.update(getDirection());
                    myLocationView.update();
                    mapboxMap.getMarkerViewManager().update();

                    for (InfoWindow infoWindow : mapboxMap.getInfoWindows()) {
                        infoWindow.update();
                    }
                }
            }

which call MarkerView.invalidate().

According to the View.invalidate() javadoc

Invalidate the whole view. If the view is visible,
onDraw(android.graphics.Canvas) will be called at some point in the future.
This must be called from a UI thread. To call from a non-UI thread, call, postInvalidate().

MarkerView will not be draw in the current Frame.

Is this hypothesis valid ?

[cammace]

With the latest Android SDK release 4.2.1 you can make use of symbol layers to add icons directly within the map. This means the "wiggling" described above will no longer exist. An example doing this can be found in the demo application.

[johanlunds]

Hello,

We have this issue. What do you think of @mayardb's hypothesis? Is this an easy or difficult fix? Do you think this will be fixed soon?

[wbinarytree]

Apparently every view has this problem(ex: InfoWindow). I guess @mayardb 's hypothesis make sense. Has your team looked into it? Thanks a lot. Really appreciate the work.

[tobrun]

Thank you all for the input, I have written up an separate issue on this in #8224.
Going to close this in favor of that one.