flutter_map_location_marker

flutter_map_location_marker is a flutter_map plugin for displaying device's current location on a map. It provides a simple and flexible way to add a customizable location marker to your map.

Join flutter_map Discord server to talk about flutter_map_location_marker, get help and help others in the #plugins channel.

Features

• Simple: The only thing you need to do is to add a CurrentLocationLayer() in to your map because all parameters have good default values.

• Flexible: The default implementation receives the device's position from the geolocator package and the device's heading from the flutter_compass package, but with type conversion, streams from other sources are also supported.

• Auto-following: The map follows the new location when location is updated. This feature is disabled by default.

• Auto-rotating: The map can be rotated automatically as navigation mode. This feature is disabled by default.

• Customization: The location marker can be fully customized, including the colors of the accuracy circle and header.

Usage

Add flutter_map_location_marker to your pubspec.yaml:

dependencies:
  flutter_map_location_marker: any # or latest verion

Add permission by following the instructions from the geolocator package.

Add the layer widget into FlutterMap:

Widget build(BuildContext context) {
  return FlutterMap(
    children: [
      TileLayer(
        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c'],
        maxZoom: 19,
      ),
      CurrentLocationLayer(), // <-- add layer here
    ],
  );
}

Discover more parameters in CurrentLocationLayer .

Widget build() {
  return CurrentLocationLayer(
    followOnLocationUpdate: FollowOnLocationUpdate.always,
    turnOnHeadingUpdate: TurnOnHeadingUpdate.never,
    style: LocationMarkerStyle(
      marker: const DefaultLocationMarker(
        child: Icon(
          Icons.navigation,
          color: Colors.white,
        ),
      ),
      markerSize: const Size(40, 40),
      markerDirection: MarkerDirection.heading,
    ),
  );
}

Consider using either the AnimatedLocationMarkerLayer or the LocationMarkerLayer if multiple location markers need to be displayed.

Examples

1. Marker Customization : Change the marker to any widget you want.

2. Floating Action Button to Follow Current Location : Use a floating action button to move and zoom the map to the current location.

3. Change Geolocator Settings : Define Geolocator settings yourself.

4. Selectable Distance Filter : Change Geolocator settings at the runtime.

5. Custom Stream : Use your own stream, such as position stream from another library or predefined route, as the source.

6. No Stream : Use Flutter setState() to update position and heading.

7. Navigation Mode : Rotate the map to keep heading pointing upward.

8. Default Stream : Share the default streams between your app and this plugin.

FAQ

Q: How to get the positionStream , headingStream or their origin streams from a CurrentLocationLayer widget?

A: No, you should not get these streams from a CurrentLocationLayer widget. Instead, create you own streams with the the same types and also pass it to all the widgets which need them. CurrentLocationLayer doesn't own the streams; it just listens to them. You can use any implementation of position and heading streams, as long as the stream types are Stream and Stream, respectively. You may see this example to know about how to do this.