• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Custom Map Style

This example shows how to Switch Runtime Map Style

  • Location Permissions Handling

  • Switch Map Style using nextbillionMap.setStyle(new Style.Builder().fromUri(styleUrl))

  • Tracking Current Location Automatically when MapReady

    • locationComponent.setLocationComponentEnabled(true);

    • locationComponent.setRenderMode(RenderMode.COMPASS);

    • locationComponent.setCameraMode(CameraMode.TRACKING);

Custom Map Style

For all code examples, refer to Android Maps SDK Code Examples

activity_location_layer_map_change.xml view source

1<?xml version="1.0" encoding="utf-8"?>
2<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:app="http://schemas.android.com/apk/res-auto"
4 android:id="@+id/coordinator_layout"
5 android:layout_width="match_parent"
6 android:layout_height="match_parent"
7 android:orientation="vertical">
9 <ai.nextbillion.maps.core.MapView
10 android:id="@+id/mapView"
11 android:layout_width="match_parent"
12 android:layout_height="match_parent"
13 android:layout_marginBottom="0dp"
14 app:nbmap_uiAttribution="false" />
16 <com.google.android.material.floatingactionbutton.FloatingActionButton
17 android:id="@+id/fabStyles"
18 android:layout_width="wrap_content"

CustomMapStyleActivity view source

1package ai.nextbillion;
3import android.annotation.SuppressLint;
4import android.os.Bundle;
5import android.widget.Toast;
7import com.google.android.material.floatingactionbutton.FloatingActionButton;
9import java.util.List;
11import ai.nextbillion.maps.camera.CameraPosition;
12import ai.nextbillion.maps.camera.CameraUpdateFactory;
13import ai.nextbillion.maps.core.MapView;
14import ai.nextbillion.maps.core.NextbillionMap;
15import ai.nextbillion.maps.core.OnMapReadyCallback;
16import ai.nextbillion.maps.core.Style;
17import ai.nextbillion.maps.geometry.LatLng;
18import ai.nextbillion.maps.location.LocationComponent;

This code is an Android application that demonstrates how to customize the map style and handle location permissions using the Nextbillion Maps SDK. Here's a summary of the code:

Initializing MapView:

  • The MapView is initialized by calling mapView.onCreate(savedInstanceState).

Location Permissions Handling:

  • The app checks if location permissions are granted using PermissionsManager.areLocationPermissionsGranted(this). If permissions are granted, the map is asynchronously loaded. Otherwise, the app requests location permissions using the PermissionsManager and handles the permission result in the onPermissionResult callback.

Switch Map Style:

  • The app provides a floating action button (FAB) to toggle the map style. When the FAB is clicked, the toggleMapStyle() method is called. It gets the current map style using nextbillionMap.getStyle() and switches between a dark and light style by setting the new style using
    • nextbillionMap.setStyle(new Style.Builder().fromUri(styleUrl)).

Tracking Current Location Automatically:

  • When the map is ready (onMapReady callback), the camera is positioned to a specific location and zoom level.

  • The map style is set to the light style, and the location component is activated using nextbillionMap.getLocationComponent().activateLocationComponent().

  • The location component is configured to use the default location engine and display a pulsing animation.

  • It is enabled and set to render mode COMPASS and camera mode TRACKING. The location component also listens for click and long-click events on the user's location.

    • locationComponent.setLocationComponentEnabled(true);
    • locationComponent.setRenderMode(RenderMode.COMPASS);
    • locationComponent.setCameraMode(CameraMode.TRACKING);

Additional lifecycle methods are implemented to manage the MapView, including onStart, onResume, onPause, onStop, onSaveInstanceState, onDestroy, and onLowMemory.

Have Questions ?