Location Component

Introduction

This example shows

Configuration Location permissions for Android and iOS
Enable Current Location Tracking with setting following params in NBMap
- trackCameraPosition: true
- myLocationEnabled: true
- myLocationTrackingMode: MyLocationTrackingMode.Tracking
Observe User Location Updating
- add the callback onUserLocationUpdated(UserLocation location)


Android snapshot	iOS snapshot

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

Android: Add the following permissions to the manifest:

1
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
2
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

iOS: Add the following to the Runner/Info.plist to explain why you need access to the location data:

1
<key>NSLocationWhenInUseUsageDescription</key>
2
    <string>[Your explanation here]</string>

TrackCurrentLocationPage view source

1
import 'package:flutter/cupertino.dart';
2
import 'package:flutter/material.dart';
3
import 'package:nb_maps_flutter/nb_maps_flutter.dart';
4

5
import 'page.dart';
6

7
class TrackCurrentLocationPage extends ExamplePage {
8
 TrackCurrentLocationPage()
9
     : super(const Icon(Icons.place), 'TrackCurrentLocation');
10

11
 @override
12
 Widget build(BuildContext context) {
13
   return TrackCurrentLocation();
14
 }
15
}
16

17
class TrackCurrentLocation extends StatefulWidget {
18
 @override
19
 TrackCurrentLocationState createState() => TrackCurrentLocationState();
20
}
21

22
class TrackCurrentLocationState extends State<TableRowackCurrentLocation> {
23
 NextbillionMapController? controller;
24

25
 String locationTrackImage = "assets/symbols/location_on.png";
26

27
 void _onMapCreated(NextbillionMapController controller) {
28
   this.controller = controller;
29
 }
30

31
 _onStyleLoadedCallback() async {
32
   Future.delayed(const Duration(milliseconds: 80), () {
33
     controller?.updateMyLocationTrackingMode(MyLocationTrackingMode.Tracking);
34
   });
35
 }
36

37
 _onUserLocationUpdate(UserLocation location) {
38
   print('${location.position.longitude}, ${location.position.latitude}');
39
 }
40

41
 _onCameraTrackingChanged() {
42
   setState(() {
43
     locationTrackImage = 'assets/symbols/location_off.png';
44
   });
45
 }
46

47
 @override
48
 Widget build(BuildContext context) {
49
   return Scaffold(
50
     body: Stack(
51
       children: [
52
         NBMap(
53
           onMapCreated: _onMapCreated,
54
           onStyleLoadedCallback: _onStyleLoadedCallback,
55
           initialCameraPosition: const CameraPosition(
56
             target: LatLng(0, 0),
57
             zoom: 14.0,
58
           ),
59
           trackCameraPosition: true,
60
           myLocationEnabled: true,
61
           myLocationTrackingMode: MyLocationTrackingMode.Tracking,
62
           onUserLocationUpdated: _onUserLocationUpdate,
63
           onCameraTrackingDismissed: _onCameraTrackingChanged,
64
         ),
65
         Column(
66
           mainAxisAlignment: MainAxisAlignment.end,
67
           crossAxisAlignment: CrossAxisAlignment.start,
68
           children: [
69
             Padding(
70
               padding: const EdgeInsets.only(left: 10.0, bottom: 100),
71
               child: GestureDetector(
72
                   child: Image(
73
                     image: AssetImage(locationTrackImage),
74
                     width: 28,
75
                     height: 28,
76
                   ),
77
                   onTap: () {
78
                     controller?.updateMyLocationTrackingMode(
79
                         MyLocationTrackingMode.Tracking);
80
                     setState(() {
81
                       locationTrackImage = 'assets/symbols/location_on.png';
82
                     });
83
                   }),
84
             ),
85
           ],
86
         )
87
       ],
88
     ),
89
   );
90
 }
91

92
 @override
93
 void initState() {
94
   super.initState();
95
 }
96

97
 @override
98
 void dispose() {
99
   super.dispose();
100
 }
101
}

Code summary

This Flutter code provides an example of how to use the NBMap widget from the nb_maps_flutter package to display a map and enable current location tracking. The code also observes user location updates and changes the tracking mode when the camera tracking is dismissed.

Display MapView Widget:
- The NBMap widget is used to display the map on the screen. It is added to the Stack widget to overlay other UI elements on top of the map.
Enable Current Location Tracking: The following parameters are set in the NBMap widget to enable current location tracking: - myLocationEnabled: true enables the display of the user's location on the map. - myLocationTrackingMode: MyLocationTrackingMode.Tracking sets the tracking mode for the user's location, which follows the user's movement on the map. - onUserLocationUpdated: _onUserLocationUpdate is a callback function that observes updates to the user's location.
Observe User Location Updating:
- The _onUserLocationUpdate function is called when the user's location is updated. In this code, it prints the updated longitude and latitude to the console.

The code also has a gesture detector with an image button to toggle the location tracking mode. When the image button is tapped, the tracking mode is set to MyLocationTrackingMode.Tracking, and the image changes accordingly.

To use this widget in your Flutter app, make sure you have installed the nb_maps_flutter package and added the necessary dependencies to your pubspec.yaml file.

Overall, this code demonstrates how to display a map, enable current location tracking, and observe user location updates using the NBMap widget and the NextbillionMap SDK in a Flutter app.

Location Component

Introduction

Code summary

PRODUCTS

SOLUTIONS

COMPARE

DEVELOPERS

GUIDES

RESOURCES

COMPANY

UNITED STATES

SINGAPORE