In this page

Custom Map Style

This example shows how to Switch Runtime Map Style

  1. Location Permissions Handling

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

  3. Tracking Current Location Automatically when MapReady

    1. locationComponent.setLocationComponentEnabled(true);

    2. locationComponent.setRenderMode(RenderMode.COMPASS);

    3. locationComponent.setCameraMode(CameraMode.TRACKING);

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">
8
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" />
15
16    <com.google.android.material.floatingactionbutton.FloatingActionButton
17        android:id="@+id/fabStyles"
18        android:layout_width="wrap_content"
19        android:layout_height="wrap_content"
20        android:layout_gravity="end|bottom"
21        android:layout_marginBottom="16dp"
22        android:layout_marginEnd="16dp"
23        android:layout_marginRight="16dp"
24        android:src="@drawable/ic_layers"
25        android:tint="@android:color/white"
26        app:backgroundTint="@color/palette_mint_100"
27        app:layout_anchorGravity="top" />
28
29</androidx.coordinatorlayout.widget.CoordinatorLayout>

CustomMapStyleActivity view source

1package ai.nextbillion;
2
3import android.annotation.SuppressLint;
4import android.os.Bundle;
5import android.widget.Toast;
6
7import com.google.android.material.floatingactionbutton.FloatingActionButton;
8
9import java.util.List;
10
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;
19import ai.nextbillion.maps.location.LocationComponentActivationOptions;
20import ai.nextbillion.maps.location.LocationComponentOptions;
21import ai.nextbillion.maps.location.modes.CameraMode;
22import ai.nextbillion.maps.location.modes.RenderMode;
23import ai.nextbillion.maps.location.permissions.PermissionsListener;
24import ai.nextbillion.maps.location.permissions.PermissionsManager;
25import androidx.annotation.NonNull;
26import androidx.appcompat.app.AppCompatActivity;
27
28public class CustomMapStyleActivity extends AppCompatActivity implements OnMapReadyCallback {
29
30    private MapView mapView;
31    private NextbillionMap nextbillionMap;
32    private PermissionsManager permissionsManager;
33
34    @Override
35    protected void onCreate(Bundle savedInstanceState) {
36        super.onCreate(savedInstanceState);
37        setContentView(R.layout.activity_location_layer_map_change);
38
39        mapView = findViewById(R.id.mapView);
40        FloatingActionButton stylesFab = findViewById(R.id.fabStyles);
41
42        stylesFab.setOnClickListener(v -> {
43            if (nextbillionMap != null) {
44                toggleMapStyle();
45            }
46        });
47
48        mapView.onCreate(savedInstanceState);
49
50        if (PermissionsManager.areLocationPermissionsGranted(this)) {
51            mapView.getMapAsync(this);
52        } else {
53            permissionsManager = new PermissionsManager(new PermissionsListener() {
54                @Override
55                public void onExplanationNeeded(List<String> permissionsToExplain) {
56                    Toast.makeText(CustomMapStyleActivity.this, "You need to accept location permissions.",
57                            Toast.LENGTH_SHORT).show();
58                }
59
60                @Override
61                public void onPermissionResult(boolean granted) {
62                    if (granted) {
63                        mapView.getMapAsync(CustomMapStyleActivity.this);
64                    } else {
65                        finish();
66                    }
67                }
68            });
69            permissionsManager.requestLocationPermissions(this);
70        }
71    }
72
73    private void toggleMapStyle() {
74        nextbillionMap.getStyle(style -> {
75            String styleUrl = StyleConstants.DARK.equals(style.getUri()) ? StyleConstants.LIGHT : StyleConstants.DARK;
76            nextbillionMap.setStyle(new Style.Builder().fromUri(styleUrl));
77        });
78    }
79
80    @Override
81    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
82        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
83        permissionsManager.onRequestPermissionsResult(requestCode, permissions, grantResults);
84    }
85
86    @Override
87    public void onMapReady(@NonNull NextbillionMap nextbillionMap) {
88        this.nextbillionMap = nextbillionMap;
89        CameraPosition cameraPosition = new CameraPosition.Builder()
90                .target(new LatLng(22.70418008712976, 78.66264025041812))
91                .zoom(6)
92                .tilt(30)
93                .tilt(0)
94                .build();
95        nextbillionMap.moveCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
96        nextbillionMap.setStyle(new Style.Builder().fromUri(StyleConstants.LIGHT),
97                style -> activateLocationComponent(style));
98    }
99
100    @SuppressLint("MissingPermission")
101    private void activateLocationComponent(@NonNull Style style) {
102        LocationComponent locationComponent = nextbillionMap.getLocationComponent();
103
104        locationComponent.activateLocationComponent(
105                LocationComponentActivationOptions
106                        .builder(this, style)
107                        .useDefaultLocationEngine(true)
108                        .locationComponentOptions(LocationComponentOptions.builder(this)
109                                .pulseEnabled(true)
110                                .build())
111                        .build());
112
113        locationComponent.setLocationComponentEnabled(true);
114        locationComponent.setRenderMode(RenderMode.COMPASS);
115        locationComponent.setCameraMode(CameraMode.TRACKING);
116
117        locationComponent.addOnLocationClickListener(
118                () -> Toast.makeText(this, "Location clicked", Toast.LENGTH_SHORT).show());
119
120        locationComponent.addOnLocationLongClickListener(
121                () -> Toast.makeText(this, "Location long clicked", Toast.LENGTH_SHORT).show());
122    }
123
124    @Override
125    protected void onStart() {
126        super.onStart();
127        mapView.onStart();
128    }
129
130    @Override
131    protected void onResume() {
132        super.onResume();
133        mapView.onResume();
134    }
135
136    @Override
137    protected void onPause() {
138        super.onPause();
139        mapView.onPause();
140    }
141
142    @Override
143    protected void onStop() {
144        super.onStop();
145        mapView.onStop();
146    }
147
148    @Override
149    protected void onSaveInstanceState(Bundle outState) {
150        super.onSaveInstanceState(outState);
151        mapView.onSaveInstanceState(outState);
152    }
153
154    @Override
155    protected void onDestroy() {
156        super.onDestroy();
157        mapView.onDestroy();
158    }
159
160    @Override
161    public void onLowMemory() {
162        super.onLowMemory();
163        mapView.onLowMemory();
164    }
165}

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:

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

Location Permissions Handling:

  1. 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:

  1. 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
    1. nextbillionMap.setStyle(new Style.Builder().fromUri(styleUrl)).

Tracking Current Location Automatically:

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

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

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

  4. 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.

    1. locationComponent.setLocationComponentEnabled(true);
    2. locationComponent.setRenderMode(RenderMode.COMPASS);
    3. locationComponent.setCameraMode(CameraMode.TRACKING);

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

DIDN'T FIND WHAT YOU LOOKING FOR?

© 2022 NextBillion.ai all rights reserved.

Privacy Policy Terms of Service