How To Move Marker On Map To New Coordinates?

Question

What I'd like to do: In this code I've instantiated a symbol with a camera position. All I'd like to do is animate the symbol on the map to another set of coordinates that I would hardcode in, for now. I've tried many things but can't figure out how to get this to work.

What I've Tried: I've seen two examples for the Mapbox Android SDK and have tried variations of these just to get the marker moving to another point but I'm very lost:

This example uses Object Animator: https://docs.mapbox.com/android/maps/examples/animate-marker-position/

This example doesn't use any Animators and just updates the symbol based on coordinates: https://docs.mapbox.com/android/maps/examples/api-response-icon-update/

Where I'm at Now: I finally decided to just update the symbol and the documentation pointed me to use this:

AnnotationManager.update(Annotation).

but I'm not sure how. Please help I've been stuck for a very long time and I'm feeling lost. Thanks.

Symbol Reference Saying To Use This: https://docs.mapbox.com/android/api/plugins/annotation/0.4.0/com/mapbox/mapboxsdk/plugins/annotation/Symbol.html#setLatLng-LatLng-

Image of what I'd like to Happen: Animate Symbol To Point

P.S. Should I just try the Object Animator?

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Mapbox.getInstance(this, getString(R.string.access_token));

        setContentView(R.layout.activity_main);

        mapView = findViewById(R.id.mapView);
        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(@NonNull final MapboxMap mapboxMap) {
                mapboxMap.setStyle(Style.LIGHT, new Style.OnStyleLoaded(){
                    @Override
                    public void onStyleLoaded(@NonNull Style style){

                        //Import Icon
                        Bitmap icon = BitmapFactory.decodeResource(getResources(),
                                R.drawable.blue_icon);

                        style.addImage(ID_IMAGE_SOURCE, icon);
                        style.addSource(new GeoJsonSource("source-id"));

                        //Create Symbol
                        SymbolManager symbolManager = new SymbolManager(mapView, mapboxMap, style);

                        symbolManager.setIconAllowOverlap(true);
                        symbolManager.setIconIgnorePlacement(true);


                        Symbol symbol = symbolManager.create(new SymbolOptions()
                                .withLatLng(new LatLng(33.718492, -117.796390))
                                .withIconImage(ID_IMAGE_SOURCE)
                                .withIconSize(.25f));

                        //Camera Position and Bounds
                        LatLngBounds latLngBounds = new LatLngBounds.Builder()
                                .include(new LatLng(33.717872, -117.796296))
                                .include(new LatLng(33.718342, -117.797975))
                                .build();

                        mapboxMap.animateCamera(CameraUpdateFactory.newLatLngBounds(latLngBounds,
                                        30));

score 0 · Accepted Answer · answered Dec 04 '19 at 13:24

0

This is solved. Animator from Android SDK is needed. Too much was changed from my original code to post it all here. If you come across the same problem let me know and I'll help out.

answered Dec 04 '19 at 13:24

A4_TS

130
1
14

I encountered with the same problem. I could not animate SymbolOptions to new position, all I can do is remove annotations from SymbolManager and create new SymbolOptions with the new position. Is there any chance you can provide your solution ? – Thracian Jan 22 '20 at 05:37
Use this example: https://docs.mapbox.com/android/maps/examples/animate-marker-position/ . Instead of using the touch listener for this code, input where you want the marker to go. Try that out first and then get back to me if needed. – A4_TS Jan 22 '20 at 07:54

score 0 · Answer 2 · answered Sep 10 '20 at 15:35

I found that using symbol manager is easy use to update the marker's positions

 //ADD VARIABLES 
 private SymbolManager symbolManager;
 private Symbol originIcon;

Initialize your images and the symbol manager when setting your mapbox styles

mapboxMap.setStyle(
            new Style.Builder()
                    .fromUri(styleUrl)
                    
                    // Add the SymbolLayer icon image to the map style
                    .withImage(ICON_ORIGIN, BitmapFactory.decodeResource(
                            this.getResources(), R.drawable.searchorigin)),
            style -> {


                // create symbol manager object
                symbolManager = new SymbolManager(mapView, mapboxMap, style);
                // set non-data-driven properties, such as:
                symbolManager.setIconAllowOverlap(true);
                symbolManager.setIconTranslate(new Float[]{-4f, 5f});
                symbolManager.setIconRotationAlignment(ICON_ROTATION_ALIGNMENT_VIEWPORT);

            });

Then use the symbol manager to create the icon and update the positions

//CHECK IF THE MARKER IS INITIALIZE
        if (originIcon == null) {
            // Add symbol at specified lat/lon
            originIcon = symbolManager.create(new SymbolOptions()
                    .withLatLng(new LatLng(location.latitude(), location.longitude()))
                    .withIconImage(ICON_ORIGIN)
                    .withIconSize(0.5f));
        }else{
            //UPDATE THE ICON BY USING SYMBOLMANAGER
            originIcon.setLatLng(new LatLng(location.latitude(), location.longitude()));
            symbolManager.update(originIcon);
        }

How To Move Marker On Map To New Coordinates?

2 Answers2