Map styles

A Baato map style is just a URL. Swapping the look of your map means changing one string — the rest of the activity stays identical. See the Map Styles API for the full catalogue.

The styles

Monochrome map style on Android — Monochrome

Add the dependency

//mapbox sdk
  implementation('com.mapbox.mapboxsdk:mapbox-android-sdk:6.5.0') {
      exclude group: 'group_name', module: 'module_name'
  }
  implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-locationlayer:0.8.1'

If you use Mapbox as your map service, the Baato Java client currently supports only the versions pinned above.

Add a MapView to your layout

<com.mapbox.mapboxsdk.maps.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    mapbox:mapbox_cameraTargetLat="27.7084"
    mapbox:mapbox_cameraTargetLng="85.3206"
    mapbox:mapbox_cameraZoom="13" />

<TextView
    android:id="@+id/bottomInfoLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/colorAccent"
    android:gravity="center"
    android:padding="@dimen/general_margin"
    android:text="@string/nav_msg"
    android:textColor="@color/colorWhite"
    android:visibility="gone"
    app:layout_anchor="@id/mapView"
    app:layout_anchorGravity="bottom" />

Set the style URL in onCreate

Pick a tab for the style you want — only the URL changes.

Breeze
Monochrome
Retro
Your own style

mapboxMap.setStyle(
    "https://api.baato.io/api/v1/styles/breeze?key=" + getString(R.string.baato_access_token),
    style -> {
        bottomInfoLayout.setText(Html.fromHtml("<b>Breeze Map</b> from Baato.io"));
        bottomInfoLayout.setVisibility(View.VISIBLE);
    });

mapboxMap.setStyle(
    "https://api.baato.io/api/v1/styles/monochrome?key=" + getString(R.string.baato_access_token),
    style -> {
        bottomInfoLayout.setText(Html.fromHtml("<b>Monochrome Map</b> from Baato.io"));
        bottomInfoLayout.setVisibility(View.VISIBLE);
    });

mapboxMap.setStyle(
    "https://api.baato.io/api/v1/styles/retro?key=" + getString(R.string.baato_access_token),
    style -> {
        bottomInfoLayout.setText(Html.fromHtml("<b>Retro Map</b> from Baato.io"));
        bottomInfoLayout.setVisibility(View.VISIBLE);
    });

Custom styles you build in the My Styles section of your account dashboard work exactly the same way.

mapboxMap.setStyle(
    "https://api.baato.io/api/v1/styles/YOUR_STYLE_NAME?key=" + getString(R.string.baato_access_token),
    style -> {
        bottomInfoLayout.setVisibility(View.VISIBLE);
    });

Add attribution

Turn off the Mapbox branding and add the Baato logo. Download the logo into res/drawable first.

mapView = findViewById(R.id.mapView);
bottomInfoLayout = findViewById(R.id.bottomInfoLayout);

Mapbox.getInstance(this, getString(R.string.mapbox_token));
mapView.onCreate(savedInstanceState);
mapView.getMapAsync(mapboxMap -> {
    // remove the Mapbox attribution
    mapboxMap.getUiSettings().setAttributionEnabled(false);
    mapboxMap.getUiSettings().setLogoEnabled(false);

    // add the Baato logo
    final FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(250, 104);
    params.gravity = Gravity.BOTTOM | Gravity.LEFT;
    params.setMargins(12, 12, 12, 12);
    ImageView imageview = new ImageView(this);
    imageview.setImageResource(R.drawable.baato_logo);
    imageview.setLayoutParams(params);
    mapView.addView(imageview);

    // then set the style, as in the previous step
});

Displaying Baato and OpenStreetMap attribution is a condition of use. See Attribution requirements.

Forward the MapView lifecycle

A MapView leaks if you skip this — every lifecycle callback must be forwarded.

Lifecycle boilerplate

@Override
public void onResume() {
    super.onResume();
    mapView.onResume();
}

@Override
protected void onStart() {
    super.onStart();
    mapView.onStart();
}

@Override
protected void onStop() {
    super.onStop();
    mapView.onStop();
}

@Override
public void onPause() {
    super.onPause();
    mapView.onPause();
}

@Override
public void onLowMemory() {
    super.onLowMemory();
    mapView.onLowMemory();
}

@Override
protected void onDestroy() {
    super.onDestroy();
    mapView.onDestroy();
}

@Override
protected void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    mapView.onSaveInstanceState(outState);
}

Get started

Guides by platform

Server SDKs

Resources

The styles

Full source

BreezeMapStyleActivity

MonochromeMapStyleActivity

RetroMapStyleActivity

​The styles

​Full source

BreezeMapStyleActivity

MonochromeMapStyleActivity

RetroMapStyleActivity

The styles

Full source