• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Simple User Interface


This Example shows how to display simple mapview and perform basic map actions:

  • Display MapView Widget
  • User Interface on MapView
    • Customize MapView Size
    • MapView UI Settings
    • MapView GestureDetector
Android snapshotiOS snapshot

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

MapUiPage view source

1import 'dart:math';
3import 'package:flutter/material.dart';
4import 'package:collection/collection.dart';
5import 'package:nb_maps_flutter/nb_maps_flutter.dart';
7import 'main.dart';
8import 'page.dart';
10final LatLngBounds sydneyBounds = LatLngBounds(
11 southwest: const LatLng(-34.022631, 150.620685),
12 northeast: const LatLng(-33.571835, 151.325952),
15class MapUiPage extends ExamplePage {
16 MapUiPage() : super(const Icon(Icons.map), 'User interface');

Code summary

The above code snippet defines a MapUiBody widget that displays a map using the NBMap widget from the nb_maps_flutter package. The widget allows users to interact with the map and control various aspects of its user interface.

  1. Display MapView Widget:

    • The NBMap widget is used to display the map on the screen.
    • The onMapCreated callback is used to get access to the NextbillionMapController, which allows interaction with the map.
    • The initialCameraPosition property sets the initial position of the camera when the map is first displayed.
  2. User Interface on MapView: The MapUiBody widget provides several buttons and toggles that allow users to interact with the map and customize its behavior:

    • Camera Information: Displays the current camera bearing, target latitude and longitude, zoom level, and tilt. Also shows whether the camera is moving or idle.
    • Map Size Toggler: Toggles between expanding and shrinking the map view.
    • Query Filter Toggler: Toggles the filter for querying features on the map.
    • Compass Toggler: Toggles the compass display on the map.
    • My Location Tracking Mode Cycler: Cycles through different tracking modes for user location.
    • Camera Target Bounds Toggler: Toggles between bounding and releasing the camera target within specific bounds.
    • Set Style To Satellite: Cycles through different map styles (NBMAP_STREETS, SATELLITE, LOCAL_ASSET).
    • Zoom Bounds Toggler: Toggles between bounding and releasing the zoom level within specific bounds.
    • Rotate Toggler: Toggles the rotate gesture on the map.
    • Scroll Toggler: Toggles the scroll gesture on the map.
    • Double Click To Zoom Toggler: Toggles the double click to zoom gesture on the map.
    • Tilt Toggler: Toggles the tilt gesture on the map.
    • Zoom Toggler: Toggles the zoom gesture on the map.
    • My Location Toggler: Toggles the display of the user's location on the map.
    • Telemetry Toggler: Toggles the telemetry tracking on the map.
    • Visible Region Getter: Retrieves the currently visible region on the map and displays it in a snackbar.

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 provides a comprehensive example of how to use the NBMap widget and interact with the map's user interface in a Flutter app using the NextbillionMap SDK.

Have Questions ?