maplibre / maplibre-native

MapLibre Native - Interactive vector tile maps for iOS, Android and other platforms.
https://maplibre.org
BSD 2-Clause "Simplified" License
1.03k stars 299 forks source link

setZIndex, Draggable methode for Marker #496

Closed hmtriit closed 1 year ago

hmtriit commented 2 years ago

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 commented 2 years ago

Hi @hmtriit ,

https://user-images.githubusercontent.com/74932975/191716433-d48fef0f-8066-4872-b0d1-8d64a77e14a9.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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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
        }
    });
}