Customize the NavNextbillionMap style at runtime

This example shows how to change the NavNextbillionMap style after the map is already loaded. In the following code example:

A list of the available map-style strings is provided in the code
A floating button is provided on the screen, each time user clicks on the button, the index will be changed and the map style will be updated accordingly

For all code examples, refer to Navigation Code Examples

activity_custom_navigation_style.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
    xmlns:tools="http://schemas.android.com/tools"
5
    android:layout_width="match_parent"
6
    android:layout_height="match_parent"
7
    tools:context=".activity.CustomNavigationStyleActivity">
8

9
    <ai.nextbillion.maps.core.MapView
10
        android:id="@+id/mapView_customize_style"
11
        android:layout_width="match_parent"
12
        android:layout_height="match_parent"
13
        app:nbmap_uiAttribution="false" />
14

15
    <com.google.android.material.floatingactionbutton.FloatingActionButton
16
        android:id="@+id/fab"
17
        android:layout_width="wrap_content"
18
        android:layout_height="wrap_content"
19
        android:layout_gravity="end|bottom"
20
        android:layout_margin="16dp"
21
        app:srcCompat="@drawable/ic_simulation_restart"
22
        tools:ignore="ContentDescription" />
23

24
</androidx.coordinatorlayout.widget.CoordinatorLayout>

CustomNavigationStyleActivity view source

1
package ai.nextbillion.navigation.demo.activity;
2

3
import android.location.Location;
4
import android.os.Bundle;
5

6
import ai.nextbillion.kits.geojson.Point;
7
import ai.nextbillion.maps.Nextbillion;
8
import ai.nextbillion.maps.camera.CameraUpdate;
9
import ai.nextbillion.maps.camera.CameraUpdateFactory;
10
import ai.nextbillion.maps.core.MapView;
11
import ai.nextbillion.maps.core.NextbillionMap;
12
import ai.nextbillion.maps.core.OnMapReadyCallback;
13
import ai.nextbillion.maps.core.Style;
14
import ai.nextbillion.maps.geometry.LatLng;
15
import ai.nextbillion.maps.location.modes.RenderMode;
16
import ai.nextbillion.navigation.demo.R;
17
import ai.nextbillion.navigation.ui.camera.CameraUpdateMode;
18
import ai.nextbillion.navigation.ui.camera.NavigationCameraUpdate;
19
import ai.nextbillion.navigation.ui.map.NavNextbillionMap;
20

21
import androidx.annotation.NonNull;
22
import androidx.annotation.Nullable;
23
import androidx.appcompat.app.AppCompatActivity;
24

25
import com.google.android.material.floatingactionbutton.FloatingActionButton;
26

27
import java.util.ArrayList;
28

29
/***
30
 * This example shows how to change the map style of NavNextbillionMap dynamically
31
 * You can also use style from other sources if available
32
 */
33
public class CustomNavigationStyleActivity extends AppCompatActivity implements OnMapReadyCallback {
34
    private static final int CAMERA_ANIMATION_DURATION = 1000;
35
    private static final int DEFAULT_CAMERA_ZOOM = 16;
36

37
    private MapView mapView;
38
    private FloatingActionButton floatingActionButton;
39
    private NavNextbillionMap nbMap;
40
    // a fake point in Singapore
41
    private final Point fakePoint = Point.fromLngLat(103.852408, 1.276411);
42
    private ArrayList<String> styleList = new ArrayList<>();
43
    private int floatingButtonClickCount = 0;
44

45
    @Override
46
    protected void onCreate(@Nullable Bundle savedInstanceState) {
47
        super.onCreate(savedInstanceState);
48
        setContentView(R.layout.activity_custom_navigation_style);
49

50
        setUpStyleList();
51
        setUpFloatingActionButton();
52

53
        mapView = findViewById(R.id.mapView_customize_style);
54
        mapView.onCreate(savedInstanceState);
55
        mapView.getMapAsync(this);
56
    }
57

58
    // a set of map styles provided by NextBillion.ai
59
    private void setUpStyleList() {
60
        styleList.add("https://api.nextbillion.io/maps/streets/style.json");
61
        styleList.add("https://api.nextbillion.io/maps/hybrid/style.json");
62
        styleList.add("https://api.nextbillion.io/maps/dark/style.json");
63
    }
64

65
    // here we use a counter to decide which map style should be set to the map
66
    private void setUpFloatingActionButton() {
67
        floatingActionButton = findViewById(R.id.fab);
68
        floatingActionButton.setOnClickListener(view -> {
69
            floatingButtonClickCount = (floatingButtonClickCount + 1) % styleList.size();
70
            nbMap.retrieveMap().setStyle(new Style.Builder().fromUri(styleList.get(floatingButtonClickCount)));
71
        });
72
    }
73

74
    @Override
75
    public void onMapReady(@NonNull NextbillionMap nextbillionMap) {
76
        nextbillionMap.setStyle(new Style.Builder().fromUri(styleList.get(floatingButtonClickCount)));
77
        nextbillionMap.getStyle(style -> {
78
            nbMap = new NavNextbillionMap(mapView, nextbillionMap);
79
            nbMap.updateLocationLayerRenderMode(RenderMode.COMPASS);
80
            animateCamera();
81
        });
82
    }
83

84
    private void animateCamera() {
85
        CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngZoom(new LatLng(fakePoint.latitude(), fakePoint.longitude()), DEFAULT_CAMERA_ZOOM);
86
        NavigationCameraUpdate navigationCameraUpdate = new NavigationCameraUpdate(cameraUpdate);
87
        navigationCameraUpdate.setMode(CameraUpdateMode.OVERRIDE);
88
        nbMap.retrieveCamera().update(navigationCameraUpdate, CAMERA_ANIMATION_DURATION);
89
    }
90

91
    @Override
92
    public void onStart() {
93
        super.onStart();
94
        mapView.onStart();
95
    }
96

97
    @Override
98
    public void onResume() {
99
        super.onResume();
100
        mapView.onResume();
101
    }
102

103
    @Override
104
    public void onLowMemory() {
105
        super.onLowMemory();
106
        mapView.onLowMemory();
107
    }
108

109
    @Override
110
    public void onPause() {
111
        super.onPause();
112
        mapView.onPause();
113
    }
114

115
    @Override
116
    public void onStop() {
117
        super.onStop();
118
        mapView.onStop();
119
    }
120

121
    @Override
122
    protected void onDestroy() {
123
        super.onDestroy();
124
        mapView.onDestroy();
125
    }
126
}

Code Highlights

The key of update map style is MapView’s setStyle() method:

1
nbMap.retrieveMap().setStyle(new Style.Builder().fromUri(styleList.get(floatingButtonClickCount)));

Code summary

This example provides an Android activity that shows how to change the style of a NavNextbillionMap after the map is already loaded. The activity has the following features:

A list of available map styles is provided in the code.
A floating button is provided on the screen. Each time the user clicks on the button, the index of the map style in the list is changed and the map style is updated accordingly.

The activity works as follows:

The activity creates a list of available map styles.
The activity creates a floating button and sets an onClick listener for the button.
The activity creates a NavNextbillionMap and sets the map style to the first style in the list.
The activity adds the NavNextbillionMap to the view hierarchy.
The activity sets the onClick listener for the floating button to a function that changes the map style.

The function (anonymous function inside floatingActionButton.setOnClickListener()) that changes the map style works as follows:

The function gets the current index of the map style in the list.
The function increments the current index by 1.
The function checks if the current index is greater than or equal to the length of the list.
If the current index is greater than or equal to the length of the list, the function sets the current index to 0.
The function gets the map style at the current index in the list.
The function sets the map style of the NavNextbillionMap to the map style that was retrieved.