Map Widget Branding¶

In this guide we will show how to configure Map Widget Branding using MapWidgetConfiguration on code.

To learn about Map Widget Branding please check this page.

To also learn about how to configure Map Widget Branding from PC dashboard, please check this guide.

Map Widget Theme¶

Setting the theme on the Map Widget configuration is not strictly required for the Map Widget to function, but it is highly recommended to ensure visual consistency across sessions. The theme is configured from the dashboard, saved in the backend, and then fetched by the Mobile SDK. On the initial run, it is possible that the SDK may be running, but the configuration has not yet been fetched and parsed. During this time, the theme may not be available, and default values will be used instead.

To avoid discrepancies where the Map Widget might initially display with default colors and then switch to configured theme colors, different approaches are taken for iOS and Android.

iOS¶

On iOS, a Listener logic has been implemented to ensure that the theme is ready (i.e., the configuration from the server has been fully parsed). This logic must be handled on the app side. The PTRMapWidgetThemeManager should add a listener to check if the theme configuration is ready before presenting the Map Widget. Only after the theme is confirmed to be ready should the Map Widget be launched.

How to Set a Theme on Code for iOS¶

        let config = PTRMapWidgetConfiguration()
        let theme = PTRTheme(accent: "346DF1", background: "FFFFFF", foreground: "17191C", success: "28CC7A", alert: "FAB735", danger: "E43458", info: "42A5D7")
        config.theme = theme

Present Map Widget with Theme Configured on Dashboard for iOS¶

        let themeManager = PTRMapWidgetThemeManager()

        func presentMapWidget() {

            themeManager.addListener(self)

            if strongSelf.themeManager.isConfigurationReady {
                // present Map Widget
            }
        }

        func themeManagerConfigurationReady() {
            // Theme ready
        }

Android¶

On Android, the PTRMapWidgetFragment.newInstance method ensures that the theme is ready before the Map Widget is initialized. This method includes an onComplete callback, which should be used to ensure that the theme is fully configured from the server before the widget is presented. The old method has been deprecated and should not be used, as it might result in inconsistent theming.

How to Set a Theme on Code for Android¶

    PTRMapWidgetFragment.theme = PTRTheme(
        themeColor = "346DF1",
        backgroundColor = "FF0000",
        foregroundColor = "0000FF",
        successColor = "28CC7A",
        alertColor = "FAB735",
        dangerColor = "E43458",
        infoColor = "42A5D7"
    )

Present Map Widget with Theme Configured on Dashboard for Android¶

PTRMapWidgetFragment.newInstance(widgetConfiguration) { mapWidget: PTRMapWidgetFragment ->
    // you can work with map widget here.
    ...
}

Map Widget Onboarding¶

You can enable/disable onboarding and configure it using the PTRMapWidgetConfiguration. When setting these values on code, it will override any configuration added to PC dashboard.

When enabled, onboarding will be displayed every time the Map Widget is presented until location, bluetooth and motion permission states are determined by the user.

let onboardingConfig = PTRMapWidgetOnboardingConfiguration(appTitle: "AppName", privacyPolicyUrlString: "https://www.your-company.com/privacy-and-security", topImage: UIImage(named: "image"))

let config = PTRMapWidgetConfiguration()
config.isOnboardingEnabled = true
config.onboardingConfiguration = onboardingConfig

val widgetConfiguration = PTRMapWidgetConfiguration.defaultConfiguration()

widgetConfiguration.isOnboardingEnabled = true
widgetConfiguration.onBoardingConfiguration = PTRMapOnBoardingConfiguration(
    "AppName",
    "https://www.your-company.com/privacy-and-security",
    R.drawable.image
    )

Disabling SDK’s default permission requests¶

On iOS, the permissions’ requests are triggered automatically as soon as Pointr SDK state changes to RUNNING. To avoid that and make sure permissions are requested only during onboarding, you should block through Permission Manager as follows:

iOS:

extension ViewController: PTRPermissionManagerDelegate {

    func permissionManagerShouldRequestBluetoothServicesPermission(_ permissionManager: PTRPermissionManager) -> Bool {
        return false
    }

    func permissionManagerShouldRequestBluetoothAuthorizationPermission(_ permissionManager: PTRPermissionManager) -> Bool {
        return false
    }

    func permissionManagerShouldRequestUserNotificationAuthorizationPermission(_ permissionManager: PTRPermissionManager) -> Bool {
        return false
    }

    func permissionManagerShouldRequestLocationAuthorizationPermissionForWhenInUse(_ permissionManager: PTRPermissionManager) -> Bool {
        return false
    }

    func permissionManagerShouldRequestLocationAuthorizationPermissionForAlways(_ permissionManager: PTRPermissionManager) -> Bool {
        return false
    }

    func permissionManagerShouldRequestCoreMotionAuthorizationPermission(_ permissionManager: PTRPermissionManager) -> Bool {
        return false
    }
}

Map Widget Splash Screen¶

You can enable/disable the splash screen using the PTRMapWidgetConfiguration. When doing so on code, it will override any configuration added to PC dashboard.

When enabled, the splash screen will be displayed every time the Map Widget is presented.

let config = PTRMapWidgetConfiguration()
config.isSplashScreenEnabled = true

val widgetConfiguration = PTRMapWidgetConfiguration.defaultConfiguration()
widgetConfiguration.isSplashScreenEnabled = true

Map Widget Info Button¶

You can enable/disable the info button using the PTRMapWidgetConfiguration. When doing so on code, it will override any configuration added to PC dashboard.

let config = PTRMapWidgetConfiguration()
config.isInfoButtonEnabled = true

val widgetConfiguration = PTRMapWidgetConfiguration.defaultConfiguration()
widgetConfiguration.isInfoButtonEnabled = true