MapViewerWidget

MapViewerWidget is a FlutterMap display widget. It will be the base of the map application.

Screenshot

Features

MapViewerWidget has the following features

  • Map display
  • Map rotation
  • Current location display using GPS
  • Map rotation using compass
    • North up
    • Heads up

Getting started

Add the package with the following command

flutter pub add map_viewer_widget

Usage

refer to the following. See /example folder for details

MapViewerWidget(
            options: MapOptions(
              center: LatLng(39.640278, 141.946572),
              zoom: 14,
              maxZoom: 14,
              plugins: [VectorMapTilesPlugin()],
            ),
            children: [
              VectorTileLayerWidget(
                  options: VectorTileLayerOptions(
                      theme: _mapTheme(context),
                      tileProviders: TileProviders({
                        'openmaptiles': _cachingTileProvider(_urlTemplate())
                      })))
            ] // Specify the visible layer as children
            ),
        Positioned(
            right: 20,
            bottom: 120,
            child: FloatingActionButton(
              child: StreamBuilder(
                builder: (BuildContext context,
                    AsyncSnapshot<NavigationStatus> snapShot) {
                  String text = "none";
                  NavigationStatus navigationStatus = NavigationStatus.northUp;
                  if (snapShot.hasData) {
                    navigationStatus =
                        snapShot.data ?? NavigationStatus.northUp;
                  }
                  switch (navigationStatus) {
                    case NavigationStatus.headUp:
                      text = "headUp";
                      break;
                    case NavigationStatus.northUp:
                      text = "northUp";
                      break;
                    case NavigationStatus.none:
                    default:
                      text = "none";
                      break;
                  }

                  return Text(
                    text,
                    style: const TextStyle(
                      fontSize: 10,
                    ),
                  );
                },
                stream: NavigationStatatusStreamController.stream,
              ),
              onPressed: () {
                sc.sink.add(NavigationStatus.northUp);
              },
            ))```

Libraries

map_viewer_widget