Mapbox-gl-native: MapBox Android SDK Marker anchor

[enes-sakut]

I added custom Marker icon and Icon anchor does not to same default Mapbox Marker.My marker without the anchoring, the marker will just centering the location, instead of hovering above it.

First off all I want to add maker only start and finish coordinates,so I added GeoJson source in onStyleLoaded() methods

style.addSource(new GeoJsonSource("line-source",
                                FeatureCollection.fromFeatures(new Feature[]{Feature.fromGeometry(
                                        LineString.fromLngLats(routeCoordinates)
                                )})));

than I added LineLayer this style

style.addLayer(new LineLayer("linelayer", "line-source").withProperties(
                                PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
                                PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
                                lineWidth(5f),
                                lineColor(context.getResources().getColor(R.color.red))
                        ));

Finally I customize my Icon like this
custom icon :

Icon finish_icon = drawableToIcon(context,R.drawable.finish_icon,context.getResources().getColor(R.color.black));

this is the drawableToIcon methods

 public static Icon drawableToIcon(@NonNull Context context, @DrawableRes int id, @ColorInt int colorRes) {
        Drawable vectorDrawable = ResourcesCompat.getDrawable(context.getResources(), id, context.getTheme());
        Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(),
                vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        DrawableCompat.setTint(vectorDrawable, colorRes);
        vectorDrawable.draw(canvas);
        return IconFactory.getInstance(context).fromBitmap(bitmap);
    }

Than I set the marker

mapBoxMap.addMarker(new MarkerOptions()
                                .setIcon(finish_icon)
                                .position(locationLast));

Everything is clear but I run the program the marker will just centering the location.How can I add Marker anchor ?

Platform: Android
-min sdk: 21
-target sdk: 26
Mapbox SDK version: 8.2.0

[tobrun]

the deprecated Marker API doesn't support anchoring. You will have to use SymbolLayer instead that is backed up by points in a geojson source. We support icon-anchor for this use-case.

Alternatively, you can also use our annotations plugin. This plugin tries to have the same UX as with our deprecated annotations API but with using Layers/Sources under the hood. We support using anchoring for that API.

Thank you for reaching out and using our products!

[enes-sakut]

Thanks your quick answer @tobrun I solved a quick hack like this

Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(),
                2*vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()/2);

I multipled bitmap height and divided Canvas height to 2 it works ) But I wonder to use your advice.Do you have some code example about icon-anchor? Mapbox documentation a little bit confused )

[tobrun]

here is an example:
https://github.com/mapbox/mapbox-plugins-android/blob/master/app/src/main/java/com/mapbox/mapboxsdk/plugins/testapp/activity/annotation/SymbolActivity.java#L187

[enes-sakut]

Thank you

[kiskunk]

Thanks your quick answer @tobrun I solved a quick hack like this

Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(),
                2*vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()/2);

I multipled bitmap height and divided Canvas height to 2 it works ) But I wonder to use your advice.Do you have some code example about icon-anchor? Mapbox documentation a little bit confused )

You are a life saver!

[Odyssey-Maps]

Thanks your quick answer @tobrun I solved a quick hack like this

Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(),
                2*vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()/2);

I multipled bitmap height and divided Canvas height to 2 it works ) But I wonder to use your advice.Do you have some code example about icon-anchor? Mapbox documentation a little bit confused )

You are a life saver!

Absolutely true❤