setZIndex, Draggable methode for Marker

[hmtriit]

There may be some markers on the same position, We want to change the zIndex of markers.
We want to change the position of the marker, like Draggable the marker.

Thanks

[birkskyum]

Hi @hmtriit ,

Screen.Recording.2022-09-22.at.11.50.31.mov

An example of such functionality can be found in the Android test app in the "DraggableMarker" example. Here is the code behind it.

https://github.com/maplibre/maplibre-gl-native/blob/ea234edf67bb3aec75f077e15c1c30c99756b926/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/DraggableMarkerActivity.kt

Let me know if that answers your question.

[hmtriit]

Thanks @birkskyum help
There may be some markers on the same position, I want to change the zIndex of markers.
i.e zIndex: The marker with a larger zIndex will be drawn later

For example with Marker Class:
Marker marker = mapboxMap.addMarker(new MarkerOptions()
.position(new LatLng(lat, lng))
.title("Marker")
.snippet("Description")
.zIndex(1f));

I have modify class Marker, MarkerOptions ( add field zIndex), but it can't effect. Please help suggest for me about this.

Thanks

[ihgoo]

i have the same problem as yours, have you solved it yet?

noticed that the marker of google map sdk has an attribute called zindex, but maplibre Android sdk does not have this feature. @hmtriit

[hmtriit]

i have the same problem as yours, have you solved it yet?

I Have a suggestion for you:
Here is the code: Icon marker size change when user onMapClick

public void onMapReady(@nonnull MapboxMap mapboxMap) {
mapboxMap.setStyle(STYLE_URL, new Style.OnStyleLoaded() {
@OverRide
public void onStyleLoaded(@nonnull Style style) {
List markerCoordinates = new ArrayList<>();
// Add a marker at the location
markerCoordinates.add(Feature.fromGeometry(
Point.fromLngLat(lng, lat)));

            style.addSource(new GeoJsonSource("marker-source",
                    FeatureCollection.fromFeatures(markerCoordinates)));

            // Add the marker image to map
            style.addImage("my-marker-image", BitmapFactory.decodeResource(
                    this.getResources(), R.drawable.ic_marker));

            // Adding an offset so that the bottom of the blue icon gets fixed to the coordinate, rather than the
            // middle of the icon being fixed to the coordinate point.
            style.addLayer(new SymbolLayer("marker-layer", "marker-source")
                    .withProperties(PropertyFactory.iconImage("my-marker-image"),
                            iconAllowOverlap(false), // change to true to allow overlap

                            iconOffset(new Float[]{0f, -9f})));

            // Add the selected marker source and layer
            style.addSource(new GeoJsonSource("selected-marker"));

            // Adding an offset so that the bottom of the blue icon gets fixed to the coordinate, rather than the
            // middle of the icon being fixed to the coordinate point.
            style.addLayer(new SymbolLayer("selected-marker-layer", "selected-marker")
                    .withProperties(PropertyFactory.iconImage("my-marker-image"),
                            iconAllowOverlap(true),
                            iconOffset(new Float[]{0f, -9f})));
           // Add event Click map on this
        }
    });
}