Rotate and change position for markers in latest MapBox SDK 6.7

Question

Mapbox Android SDK: 6.7.0

The requirement in the application we are developing is that we have to add multiple markers in different LatLng positions and also rotate them with some bearing. In the old mapbox version(4.2.1), we could do it without any issues.

////Working code with MapBox SDK 4.2.1////
MarkerViewOptions markerViewOptions = new MarkerViewOptions();
        IconFactory iconFactory = IconFactory.getInstance(this);
        Icon arrowIcon = iconFactory.fromResource(R.drawable.compass_needle);
        markerViewOptions.icon(arrowIcon);
        markerViewOptions.position(new LatLng(position)).rotation((float) headDirection);
        marker = mapboxMap.addMarker(markerViewOptions);

    ////For updating////

        marker.setPosition(new LatLng(aircraftLocation));
        marker.setRotation((float) headDirection);
        mapboxMap.updateMarker(marker);

In the latest Mapbox update, MarkerView and MarkerViewOptions is deprecated. We are trying to achieve the same functionality with Marker and MarkerOptions. But we are unable to rotate the markers.

We also tried using the SymbolLayer. Rotate function is available here but we are unable to set a LatLng position for a marker.

How to proceed with the latest SDK to achieve this?

abhishek maharajpet abhishek maharajpet · Accepted Answer · 2019-01-10T07:54:43

This can be achieved by symbol layer in the latest SDK 6.7.0.

To add a marker:

       Bitmap compassNeedleSymbolLayerIcon = BitmapFactory.decodeResource(
                getResources(), R.drawable.compass_needle);
        mapboxMap.addImage(AIRCRAFT_MARKER_ICON_ID, compassNeedleSymbolLayerIcon);

       GeoJsonSource geoJsonSource = new GeoJsonSource(GEOJSON_SOURCE_ID, Feature.fromGeometry(
                Point.fromLngLat(longitude, latitude)));
        mapboxMap.addSource(geoJsonSource);

        SymbolLayer Layer = new SymbolLayer(AIRCRAFT_LAYER_ID, GEOJSON_SOURCE_ID)
                .withProperties(
                        PropertyFactory.iconImage(AIRCRAFT_MARKER_ICON_ID),
                        PropertyFactory.iconRotate((float) headDirection),
                        PropertyFactory.iconIgnorePlacement(true),
                        PropertyFactory.iconAllowOverlap(true)
                );
        mapboxMap.addLayer(layer);

To rotate or changing the position of the marker:

GeoJsonSource source = mapboxMap.getSourceAs(GEOJSON_SOURCE_ID);
            if (source != null) {
                source.setGeoJson(Feature.
                        fromGeometry(Point.fromLngLat(longitude, latitude)));
                layer.setProperties(
                        PropertyFactory.iconRotate((float) headDirection)
                );
            }

This above code may not work sometimes when you add the marker in the onMapReady() callback. Because onMapReady() is called before all styles are loaded. Hence add the marker in addOnDidFinishLoadingStyleListener() callback.

mapView.addOnDidFinishLoadingStyleListener(new MapView.OnDidFinishLoadingStyleListener() {
        @Override
        public void onDidFinishLoadingStyle() {
            //add marker here
        }
    });

Rotate and change position for markers in latest MapBox SDK 6.7

1 Answers