ViewportDataSourceProcessor following padding does not fit the map

[reaganscofield]

Android API: Mapbox Navigation SDK 2.10.2: also tried 2.11.0, 2.12.0, and 2.13.0

We having issues with Mapbox Navigation Drop-in UI when the app opens and goes to the navigation screen to start navigating the app does get automatically closes and we receive the following error:

E/Mapbox: [nav-sdk]: [ViewportDataSourceProcessor] Provided following padding does not fit the map size: mapSize: [width: 1080.0, height: 99.0] padding: [top: 138.0, left: 138.0, bottom: 41.0, right: 138.0] Using an empty fallback padding instead: [top: 138.0, left: 138.0, bottom: 41.0, right: 138.0] E/Mapbox: [nav-sdk]: [ViewportDataSourceProcessor] Provided following padding does not fit the map size: mapSize: [width: 1080.0, height: 99.0] padding: [top: 138.0, left: 138.0, bottom: 173.0, right: 138.0] Using an empty fallback padding instead: [top: 138.0, left: 138.0, bottom: 173.0, right: 138.0] A/libc: Fatal signal 11 (SIGSEGV), code 2 (SEGV_ACCERR), fault addr 0x7fde2cd5f8 in tid 3039 (nder.production), pid 3039 (nder.production)

Steps to trigger behavior

Expected behavior

We expect the app to start navigating to the given destination

Actual behavior

The close itself as soon the navigation map gets rendered on the screen.

Implementations:

<?xml version="1.0" encoding="utf-8"?>
<com.mapbox.navigation.dropin.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/navigationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:accessToken="@string/mapbox_access_token"
    xmlns:app="http://schemas.android.com/apk/res-auto">
</com.mapbox.navigation.dropin.NavigationView>

package com.responder.production.mapBox;

import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import androidx.annotation.DrawableRes;
import androidx.annotation.Nullable;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.mapbox.navigation.core.MapboxNavigation;
import com.mapbox.navigation.core.lifecycle.MapboxNavigationApp;
import com.mapbox.navigation.dropin.NavigationView;
import com.mapbox.geojson.Point;
import com.aura.responder.production.R;
import com.mapbox.navigation.dropin.actionbutton.ActionButtonDescription;
import java.util.Arrays;
import java.util.logging.Logger;
import com.mapbox.navigation.ui.base.view.MapboxExtendableButton;
import com.aura.responder.production.mapBox.MapBoxNavigationListener;
import com.aura.responder.production.mapBox.MapBoxRequestRoute;

public class MapBoxWidget extends LinearLayout {

    private View view;
    private NavigationView navigationView;
    private ReactContext objectContext;
    private MapBoxNavigationListener mapBoxNavigationListener;
    private Logger logger = Logger.getLogger(MapBoxWidget.class.getName());

    public MapBoxWidget(ReactContext context) {
        super(context);
        objectContext = context;
        view = inflate(getContext(), R.layout.mapbox_activity_navigation_view, null);
        addView(view, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

        navigationView = view.findViewById(R.id.navigationView);
        MapBoxNavigationListener mapBoxNavigationListener = new MapBoxNavigationListener(context);
        navigationView.addListener(mapBoxNavigationListener);

        // ViewStyleCustomization (Style UI Components)
        navigationView.customizeViewStyles(viewStyleCustomization -> {
            // viewStyleCustomization.
            return null;
        });

        // ViewOptionsCustomization (Customize options)
        navigationView.customizeViewOptions(viewOptionsCustomization -> {
            viewOptionsCustomization.setShowRecenterActionButton(true); // ToDo pass through props
            viewOptionsCustomization.setShowSpeedLimit(true); // ToDo pass through props
            return null;
        });
    }

    public void setMinimumHeight(Integer minimumHeight) {
        navigationView.setMinimumHeight(minimumHeight);
    }

    public void setNavigationProps(Point origin, Point destination, ReadableMap properties) {
        navigateUserResponder(origin, destination, properties);
    }

    private void navigateUserResponder(Point origin, Point destination, ReadableMap properties)  {

        Boolean shouldStartNavigating = properties.getBoolean("shouldStartNavigating");
        Boolean shouldReNavigate = properties.getBoolean("shouldReNavigate");
        Boolean shouldExitNavigating = properties.getBoolean("shouldExitNavigating");
        Boolean shouldHideNavigationButton = properties.hasKey("shouldHideNavigationButton") ? properties.getBoolean("shouldHideNavigationButton") : Boolean.TRUE;
        Boolean shouldSimulatorToDestination = properties.hasKey("shouldSimulatorToDestination") ? properties.getBoolean("shouldSimulatorToDestination") : Boolean.FALSE;
        Boolean shouldShowCancelButton = properties.hasKey("shouldShowCancelButton") ? properties.getBoolean("shouldShowCancelButton") : Boolean.FALSE;
        Boolean shouldShowCustomButtons = properties.hasKey("shouldShowCustomButtons") ? properties.getBoolean("shouldShowCustomButtons") : Boolean.FALSE;
        Boolean shouldMarkAsArrived = properties.hasKey("shouldMarkAsArrived") ? properties.getBoolean("shouldMarkAsArrived") : Boolean.FALSE;
        Boolean shouldStopTripSession = properties.hasKey("shouldStopTripSession") ? properties.getBoolean("shouldStopTripSession") : Boolean.FALSE;

        navigationView.customizeViewOptions(viewOptionsCustomization -> {
            viewOptionsCustomization.setShowEndNavigationButton(shouldShowCancelButton);
            return null;
        });

        // enabling automatic simulator for development use only
        navigationView.getApi().routeReplayEnabled(shouldSimulatorToDestination);

        if (shouldStartNavigating) {
            if (shouldHideNavigationButton && origin.coordinates() != null)  {
                MapBoxRequestRoute mapBoxRequestRoute = new MapBoxRequestRoute();
                mapBoxRequestRoute.requestRoutes(objectContext, navigationView, origin, destination);
            } else {
                navigationView.getApi().startDestinationPreview(destination);
                navigationView.getApi().isReplayEnabled();
                navigationView.getApi().startRoutePreview();
                navigationView.getApi().startActiveGuidance();
            }
        }

        MapboxNavigation currentMapboxNavigationApp = MapboxNavigationApp.current();
        if (shouldStopTripSession && currentMapboxNavigationApp != null) currentMapboxNavigationApp.stopTripSession();
        if (shouldExitNavigating || shouldMarkAsArrived) {
            navigationView.getApi().startFreeDrive();
            if (currentMapboxNavigationApp != null) {
                currentMapboxNavigationApp.stopTripSession();
            }
            if (mapBoxNavigationListener != null) navigationView.removeListener(mapBoxNavigationListener);
        }

        navigationView.customizeViewBinders(viewBinderCustomization -> {
            viewBinderCustomization.defaultSpeedInfoBinder();
            if (shouldShowCustomButtons) {
                viewBinderCustomization.setCustomActionButtons(Arrays.asList(
                        new ActionButtonDescription(
                                onCompleteClicked(R.drawable.ic_baseline_check_circle_outline_24),
                                ActionButtonDescription.Position.END
                        ),
                        new ActionButtonDescription(
                                onMoreClicked(R.drawable.ic_baseline_grid_view_24),
                                ActionButtonDescription.Position.END
                        )
                ));
            }
            return null;
        });
    }

    public View onCompleteClicked(@DrawableRes int image) {
        MapboxExtendableButton mapboxExtendableButton = new MapboxExtendableButton(objectContext);
        mapboxExtendableButton.setState(new MapboxExtendableButton.State(image, "", 0));
        mapboxExtendableButton.setOnClickListener(view -> {
            WritableMap params = Arguments.createMap();
            params.putBoolean("completeClicked", Boolean.TRUE);
            sendEvent(objectContext, "onCompleteClicked", params);
        });
        return mapboxExtendableButton;
    }

    public View onMoreClicked(@DrawableRes int image) {
        MapboxExtendableButton mapboxExtendableButton = new MapboxExtendableButton(objectContext);
        mapboxExtendableButton.setState(new MapboxExtendableButton.State(image, "", 0));
        mapboxExtendableButton.setOnClickListener(view -> {
            WritableMap params = Arguments.createMap();
            params.putBoolean("moreClicked", Boolean.TRUE);
            sendEvent(objectContext, "onMoreClicked", params);
        });
        return mapboxExtendableButton;
    }

    private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
    }
}

Any help will be much appreciated, please note that this is a native module which we actually want use in react native app

[jeremiahseun]

I am having the same issue:

E/Mapbox  (14722): Using an empty fallback padding instead: [top: 175.0, left: 175.0, bottom: 189.0, right: 175.0]
E/Mapbox  (14722): [nav-sdk]: [ViewportDataSourceProcessor] Provided following padding does not fit the map size:
E/Mapbox  (14722): mapSize: [width: 64.0, height: 64.0]
E/Mapbox  (14722): padding: [top: 175.0, left: 175.0, bottom: 189.0, right: 175.0]

I am using it for Flutter

[rocksman]

I am facing the same issue. Did you find the fix?

[amolgupta]

I was getting the same behavior and the same exception while using https://github.com/eopeter/flutter_mapbox_navigation in a flutter project. After some debugging, I figured it was because the frequent location updates were not getting processed properly. I was listening to the current location updates that were triggering a UI redraw, and once I converted it to a single read, it worked. The map/navigation still updates as it fetches the location updates.