Skip to content

tlserver/flutter_map_location_marker

Repository files navigation

flutter_map_location_marker

pub package github tag license

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.
Interface preview

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

  1. Add flutter_map_location_marker to your pubspec.yaml:

    dependencies:
      flutter_map_location_marker: any # or latest version
  2. Add permission by following the instructions from the geolocator package.

  3. Add the layer widget into FlutterMap:

    Widget build(BuildContext context) {
      return FlutterMap(
        children: [
          TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            maxZoom: 19,
          ),
          CurrentLocationLayer(), // <-- add layer here
        ],
      );
    }
  4. 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,
        ),
      );
    }
  5. 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<Position> and Stream<double>, respectively. You may see this example to know about how to do this.