Simple User Interface

1
import 'dart:math';
2

3
import 'package:flutter/material.dart';
4
import 'package:collection/collection.dart';
5
import 'package:nb_maps_flutter/nb_maps_flutter.dart';
6

7
import 'main.dart';
8
import 'page.dart';
9

10
final LatLngBounds sydneyBounds = LatLngBounds(
11
  southwest: const LatLng(-34.022631, 150.620685),
12
  northeast: const LatLng(-33.571835, 151.325952),
13
);
14

15
class MapUiPage extends ExamplePage {
16
  MapUiPage() : super(const Icon(Icons.map), 'User interface');
17

18
  @override
19
  Widget build(BuildContext context) {
20
    return const MapUiBody();
21
  }
22
}
23

24
class MapUiBody extends StatefulWidget {
25
  const MapUiBody();
26

27
  @override
28
  State<StatefulWidget> createState() => MapUiBodyState();
29
}
30

31
class MapUiBodyState extends State<MapUiBody> {
32
  MapUiBodyState();
33

34
  static final CameraPosition _kInitialPosition = const CameraPosition(
35
    target: LatLng(-33.852, 151.211),
36
    zoom: 11.0,
37
  );
38

39
  NextbillionMapController? mapController;
40
  CameraPosition _position = _kInitialPosition;
41
  bool _isMoving = false;
42
  bool _compassEnabled = true;
43
  bool _mapExpanded = true;
44
  CameraTargetBounds _cameraTargetBounds = CameraTargetBounds.unbounded;
45
  MinMaxZoomPreference _minMaxZoomPreference = MinMaxZoomPreference.unbounded;
46
  int _styleStringIndex = 0;
47
  // Style string can a reference to a local or remote resources.
48
  // On Android the raw JSON can also be passed via a styleString, on iOS this is not supported.
49
  List<String> _styleStrings = [
50
    "https://api.nextbillion.io/maps/streets/style.json",
51
    "https://api.nextbillion.io/maps/streets/style.json",
52
    "https://api.nextbillion.io/maps/streets/style.json"
53
  ];
54
  List<String> _styleStringLabels = [
55
    "NBMAP_STREETS",
56
    "SATELLITE",
57
    "LOCAL_ASSET"
58
  ];
59
  bool _rotateGesturesEnabled = true;
60
  bool _scrollGesturesEnabled = true;
61
  bool? _doubleClickToZoomEnabled;
62
  bool _tiltGesturesEnabled = true;
63
  bool _zoomGesturesEnabled = true;
64
  bool _myLocationEnabled = true;
65
  bool _telemetryEnabled = true;
66
  MyLocationTrackingMode _myLocationTrackingMode = MyLocationTrackingMode.None;
67
  List<Object>? _featureQueryFilter;
68
  Fill? _selectedFill;
69

70
  @override
71
  void initState() {
72
    super.initState();
73
  }
74

75
  void _onMapChanged() {
76
    setState(() {
77
      _extractMapInfo();
78
    });
79
  }
80

81
  void _extractMapInfo() {
82
    final position = mapController!.cameraPosition;
83
    if (position != null) _position = position;
84
    _isMoving = mapController!.isCameraMoving;
85
  }
86

87
  @override
88
  void dispose() {
89
    mapController?.removeListener(_onMapChanged);
90
    super.dispose();
91
  }
92

93
  Widget _myLocationTrackingModeCycler() {
94
    final MyLocationTrackingMode nextType = MyLocationTrackingMode.values[
95
        (_myLocationTrackingMode.index + 1) %
96
            MyLocationTrackingMode.values.length];
97
    return TextButton(
98
      child: Text('change to $nextType'),
99
      onPressed: () {
100
        setState(() {
101
          _myLocationTrackingMode = nextType;
102
        });
103
      },
104
    );
105
  }
106

107
  Widget _queryFilterToggler() {
108
    return TextButton(
109
      child: Text(
110
          'filter zoo on click ${_featureQueryFilter == null ? 'disabled' : 'enabled'}'),
111
      onPressed: () {
112
        setState(() {
113
          if (_featureQueryFilter == null) {
114
            _featureQueryFilter = [
115
              "==",
116
              ["get", "type"],
117
              "zoo"
118
            ];
119
          } else {
120
            _featureQueryFilter = null;
121
          }
122
        });
123
      },
124
    );
125
  }
126

127
  Widget _mapSizeToggler() {
128
    return TextButton(
129
      child: Text('${_mapExpanded ? 'shrink' : 'expand'} map'),
130
      onPressed: () {
131
        setState(() {
132
          _mapExpanded = !_mapExpanded;
133
        });
134
      },
135
    );
136
  }
137

138
  Widget _compassToggler() {
139
    return TextButton(
140
      child: Text('${_compassEnabled ? 'disable' : 'enable'} compasss'),
141
      onPressed: () {
142
        setState(() {
143
          _compassEnabled = !_compassEnabled;
144
        });
145
      },
146
    );
147
  }
148

149
  Widget _latLngBoundsToggler() {
150
    return TextButton(
151
      child: Text(
152
        _cameraTargetBounds.bounds == null
153
            ? 'bound camera target'
154
            : 'release camera target',
155
      ),
156
      onPressed: () {
157
        setState(() {
158
          _cameraTargetBounds = _cameraTargetBounds.bounds == null
159
              ? CameraTargetBounds(sydneyBounds)
160
              : CameraTargetBounds.unbounded;
161
        });
162
      },
163
    );
164
  }
165

166
  Widget _zoomBoundsToggler() {
167
    return TextButton(
168
      child: Text(_minMaxZoomPreference.minZoom == null
169
          ? 'bound zoom'
170
          : 'release zoom'),
171
      onPressed: () {
172
        setState(() {
173
          _minMaxZoomPreference = _minMaxZoomPreference.minZoom == null
174
              ? const MinMaxZoomPreference(12.0, 16.0)
175
              : MinMaxZoomPreference.unbounded;
176
        });
177
      },
178
    );
179
  }
180

181
  Widget _setStyleToSatellite() {
182
    return TextButton(
183
      child: Text(
184
          'change map style to ${_styleStringLabels[(_styleStringIndex + 1) % _styleStringLabels.length]}'),
185
      onPressed: () {
186
        setState(() {
187
          _styleStringIndex = (_styleStringIndex + 1) % _styleStrings.length;
188
        });
189
      },
190
    );
191
  }
192

193
  Widget _rotateToggler() {
194
    return TextButton(
195
      child: Text('${_rotateGesturesEnabled ? 'disable' : 'enable'} rotate'),
196
      onPressed: () {
197
        setState(() {
198
          _rotateGesturesEnabled = !_rotateGesturesEnabled;
199
        });
200
      },
201
    );
202
  }
203

204
  Widget _scrollToggler() {
205
    return TextButton(
206
      child: Text('${_scrollGesturesEnabled ? 'disable' : 'enable'} scroll'),
207
      onPressed: () {
208
        setState(() {
209
          _scrollGesturesEnabled = !_scrollGesturesEnabled;
210
        });
211
      },
212
    );
213
  }
214

215
  Widget _doubleClickToZoomToggler() {
216
    final stateInfo = _doubleClickToZoomEnabled == null
217
        ? "disable"
218
        : _doubleClickToZoomEnabled!
219
            ? 'unset'
220
            : 'enable';
221
    return TextButton(
222
      child: Text('$stateInfo double click to zoom'),
223
      onPressed: () {
224
        setState(() {
225
          if (_doubleClickToZoomEnabled == null) {
226
            _doubleClickToZoomEnabled = false;
227
          } else if (!_doubleClickToZoomEnabled!) {
228
            _doubleClickToZoomEnabled = true;
229
          } else {
230
            _doubleClickToZoomEnabled = null;
231
          }
232
        });
233
      },
234
    );
235
  }
236

237
  Widget _tiltToggler() {
238
    return TextButton(
239
      child: Text('${_tiltGesturesEnabled ? 'disable' : 'enable'} tilt'),
240
      onPressed: () {
241
        setState(() {
242
          _tiltGesturesEnabled = !_tiltGesturesEnabled;
243
        });
244
      },
245
    );
246
  }
247

248
  Widget _zoomToggler() {
249
    return TextButton(
250
      child: Text('${_zoomGesturesEnabled ? 'disable' : 'enable'} zoom'),
251
      onPressed: () {
252
        setState(() {
253
          _zoomGesturesEnabled = !_zoomGesturesEnabled;
254
        });
255
      },
256
    );
257
  }
258

259
  Widget _myLocationToggler() {
260
    return TextButton(
261
      child: Text('${_myLocationEnabled ? 'disable' : 'enable'} my location'),
262
      onPressed: () {
263
        setState(() {
264
          _myLocationEnabled = !_myLocationEnabled;
265
        });
266
      },
267
    );
268
  }
269

270
  Widget _telemetryToggler() {
271
    return TextButton(
272
      child: Text('${_telemetryEnabled ? 'disable' : 'enable'} telemetry'),
273
      onPressed: () {
274
        setState(() {
275
          _telemetryEnabled = !_telemetryEnabled;
276
        });
277
        mapController?.setTelemetryEnabled(_telemetryEnabled);
278
      },
279
    );
280
  }
281

282
  Widget _visibleRegionGetter() {
283
    return TextButton(
284
      child: Text('get currently visible region'),
285
      onPressed: () async {
286
        var result = await mapController!.getVisibleRegion();
287
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
288
          content: Text(
289
              "SW: ${result.southwest.toString()} NE: ${result.northeast.toString()}"),
290
        ));
291
      },
292
    );
293
  }
294

295
  _clearFill() {
296
    if (_selectedFill != null) {
297
      mapController!.removeFill(_selectedFill!);
298
      setState(() {
299
        _selectedFill = null;
300
      });
301
    }
302
  }
303

304
  _drawFill(List<dynamic> features) async {
305
    Map<String, dynamic>? feature =
306
        features.firstWhereOrNull((f) => f['geometry']['type'] == 'Polygon');
307

308
    if (feature != null) {
309
      List<List<LatLng>> geometry = feature['geometry']['coordinates']
310
          .map(
311
              (ll) => ll.map((l) => LatLng(l[1], l[0])).toList().cast<LatLng>())
312
          .toList()
313
          .cast<List<LatLng>>();
314
      Fill fill = await mapController!.addFill(FillOptions(
315
        geometry: geometry,
316
        fillColor: "#FF0000",
317
        fillOutlineColor: "#FF0000",
318
        fillOpacity: 0.6,
319
      ));
320
      setState(() {
321
        _selectedFill = fill;
322
      });
323
    }
324
  }
325

326
  @override
327
  Widget build(BuildContext context) {
328
    final NBMap nbMap = NBMap(
329
      onMapCreated: onMapCreated,
330
      initialCameraPosition: _kInitialPosition,
331
      trackCameraPosition: true,
332
      compassEnabled: _compassEnabled,
333
      cameraTargetBounds: _cameraTargetBounds,
334
      minMaxZoomPreference: _minMaxZoomPreference,
335
      styleString: _styleStrings[_styleStringIndex],
336
      rotateGesturesEnabled: _rotateGesturesEnabled,
337
      scrollGesturesEnabled: _scrollGesturesEnabled,
338
      tiltGesturesEnabled: _tiltGesturesEnabled,
339
      zoomGesturesEnabled: _zoomGesturesEnabled,
340
      doubleClickZoomEnabled: _doubleClickToZoomEnabled,
341
      myLocationEnabled: _myLocationEnabled,
342
      myLocationTrackingMode: _myLocationTrackingMode,
343
      myLocationRenderMode: MyLocationRenderMode.GPS,
344
      onMapClick: (point, latLng) async {
345
        print(
346
            "Map click: ${point.x},${point.y}   ${latLng.latitude}/${latLng.longitude}");
347
        print("Filter $_featureQueryFilter");
348
        List features = await mapController!
349
            .queryRenderedFeatures(point, ["landuse"], _featureQueryFilter);
350
        print('# features: ${features.length}');
351
        _clearFill();
352
        if (features.isEmpty && _featureQueryFilter != null) {
353
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
354
              content: Text('QueryRenderedFeatures: No features found!')));
355
        } else if (features.isNotEmpty) {
356
          _drawFill(features);
357
        }
358
      },
359
      onMapLongClick: (point, latLng) async {
360
        print(
361
            "Map long press: ${point.x},${point.y}   ${latLng.latitude}/${latLng.longitude}");
362
        Point convertedPoint = await mapController!.toScreenLocation(latLng);
363
        LatLng convertedLatLng = await mapController!.toLatLng(point);
364
        print(
365
            "Map long press converted: ${convertedPoint.x},${convertedPoint.y}   ${convertedLatLng.latitude}/${convertedLatLng.longitude}");
366
        double metersPerPixel =
367
            await mapController!.getMetersPerPixelAtLatitude(latLng.latitude);
368

369
        print(
370
            "Map long press The distance measured in meters at latitude ${latLng.latitude} is $metersPerPixel m");
371

372
        List features =
373
            await mapController!.queryRenderedFeatures(point, [], null);
374
        if (features.length > 0) {
375
          print(features[0]);
376
        }
377
      },
378
      onCameraTrackingDismissed: () {
379
        this.setState(() {
380
          _myLocationTrackingMode = MyLocationTrackingMode.None;
381
        });
382
      },
383
      onUserLocationUpdated: (location) {
384
        print(
385
            "new location: ${location.position}, alt.: ${location.altitude}, bearing: ${location.bearing}, speed: ${location.speed}, horiz. accuracy: ${location.horizontalAccuracy}, vert. accuracy: ${location.verticalAccuracy}");
386
      },
387
    );
388

389
    final List<Widget> listViewChildren = <Widget>[];
390

391
    if (mapController != null) {
392
      listViewChildren.addAll(
393
        <Widget>[
394
          Text('camera bearing: ${_position.bearing}'),
395
          Text('camera target: ${_position.target.latitude.toStringAsFixed(4)},'
396
              '${_position.target.longitude.toStringAsFixed(4)}'),
397
          Text('camera zoom: ${_position.zoom}'),
398
          Text('camera tilt: ${_position.tilt}'),
399
          Text(_isMoving ? '(Camera moving)' : '(Camera idle)'),
400
          _mapSizeToggler(),
401
          _queryFilterToggler(),
402
          _compassToggler(),
403
          _myLocationTrackingModeCycler(),
404
          _latLngBoundsToggler(),
405
          _setStyleToSatellite(),
406
          _zoomBoundsToggler(),
407
          _rotateToggler(),
408
          _scrollToggler(),
409
          _doubleClickToZoomToggler(),
410
          _tiltToggler(),
411
          _zoomToggler(),
412
          _myLocationToggler(),
413
          _telemetryToggler(),
414
          _visibleRegionGetter(),
415
        ],
416
      );
417
    }
418
    return Column(
419
      mainAxisSize: MainAxisSize.min,
420
      children: [
421
        Center(
422
          child: SizedBox(
423
            width: _mapExpanded ? null : 300.0,
424
            height: 200.0,
425
            child: nbMap,
426
          ),
427
        ),
428
        Expanded(
429
          child: ListView(
430
            children: listViewChildren,
431
          ),
432
        )
433
      ],
434
    );
435
  }
436

437
  void onMapCreated(NextbillionMapController controller) {
438
    mapController = controller;
439
    mapController!.addListener(_onMapChanged);
440
    _extractMapInfo();
441

442
    mapController!.getTelemetryEnabled().then((isEnabled) => setState(() {
443
          _telemetryEnabled = isEnabled;
444
        }));
445
  }
446
}