livemap 0.6.0
livemap: ^0.6.0

Flutter Android iOS

A map widget with live position updates. Provides a controller to manage the map state.

Livemap #

pub package

A map widget with live position updates. Based on Flutter map and Geolocator. Provides a controller api to handle map state changes.

Screenshot

Example #

   import 'package:flutter/material.dart';
   import 'package:flutter_map/flutter_map.dart';
   import 'package:livemap/livemap.dart';
   import 'package:latlong/latlong.dart';
   
   class _LivemapMarkerPageState extends State<LivemapMarkerPage> {
     _LivemapMarkerPageState() {
       liveMapController =
           LiveMapController(mapController: MapController(), autoCenter: true);
     }
   
     LiveMapController liveMapController;
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
           body: LiveMap(
               controller: liveMapController,
               center: LatLng(51.0, 0.0),
               zoom: 13.0));
     }
   
     @override
     void dispose() {
       liveMapController.dispose();
       super.dispose();
     }
   }
   
   class LivemapMarkerPage extends StatefulWidget {
     LivemapMarkerPage();
   
     @override
     _LivemapMarkerPageState createState() => _LivemapMarkerPageState();
   }

Map controller #

Api for the LiveMapController class

Basic map controls #

For basic map controls like center, zoom, add an asset on the map see the Map controller documentation

Livemap controls #

Center

centerOnPosition(Position position ): center the map on a Position

centerOnLiveMarker(): recenter the map on the live position marker

toggleAutoCenter(): toggle the value of autocenter

autoCenter: get the current value of autocenter: used when the position updates are on

Rotation #

autoRotate: automatically rotate the map from bearing

rotate(double degrees): rotate the map

Position stream #

togglePositionStreamSubscription(): enable or disable the live position stream

Custom marker #

To use a custom live marker:

   Marker liveMarkerBuilder(Device device) {
     return Marker(
         point: device.position.point,
         builder: (BuildContext c) => Container(
                 child: Icon(
               Icons.location_on,
               size: 45.0,
               color: Colors.orange,
             )));
   }

   liveMapController = LiveMapController(
      liveMarkerBuilder: liveMarkerBuilder,
      mapController: MapController(),
      autoCenter: true);

On ready callback #

Execute code right after the map is ready:

   @override
   void initState() {
      liveMapController.onLiveMapReady.then((_) {
         liveMapController.togglePositionStreamSubscription();
      });
      super.initState();
   }

Use the LiveMapSideBar widget or compose your own sidebar:

   /// in a [Stack] widget
   Positioned(
      top: 35.0,
      right: 15.0,
      child: Column(children: <Widget>[
         MapCenterOnLiveMarker(liveMapController: liveMapController),
         MapToggleAutoCenter(liveMapController: liveMapController),
         MapTogglePositionStream(liveMapController: liveMapController),
         MapZoomIn(liveMapController: liveMapController),
         MapZoomOut(liveMapController: liveMapController),
      ])
   )

Tile layers #

Some open tile layers and a tile switcher bar are available:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: <Widget>[
        LiveMap(
          /// defaults the [tileLayer] property to [TileLayerType.normal]
          controller: liveMapController,
          center: LatLng(51.0, 0.0),
          zoom: 17.0),
        Positioned(
          top: 35.0,
          right: 20.0,
          child: TileLayersBar(controller: liveMapController)),
      ],
    ));
  }

Available layers:

   enum TileLayerType { normal, topography, monochrome, hike }

Custom tile layers bar:

   Positioned(
      top: 35.0,
      right: 15.0,
      child: Column(children: <Widget>[
         // .. other buttons
         MapTileLayerNormal(liveMapController: livemapController),
         MapTileLayerMonochrome(liveMapController: livemapController),
         MapTileLayerTopography(liveMapController: livemapController),
         MapTileLayerHike(liveMapController: livemapController),
      ])
   )

Changefeed #

A changefeed is available: it's a stream with all state changes from the map controller. Ex:

   import 'dart:async';

   StreamSubscription _changefeed;
   int _myzoom;

   liveMapController.onReady.then((_) {
       _myzoom = liveMapController.zoom;
       _changefeed = liveMapController.changeFeed.listen((change) {
        if (change.name == "zoom") {
          print("New zoom value: ${change.value}")
        }
      });
   }

   // dispose: _changefeed.cancel();
10
likes
90
pub points
65%
popularity

A map widget with live position updates. Provides a controller to manage the map state.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

ansterj@gmail.com

License

MIT (LICENSE)

Dependencies

cupertino_icons, device, extra_pedantic, flutter, flutter_map, fluttertoast, fluxmap, geopoint, geopoint_location, latlong, map_controller, pedantic

More

Packages that depend on livemap