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.
-
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.
-
Add
flutter_map_location_marker
to yourpubspec.yaml
:dependencies: flutter_map_location_marker: any # or latest version
-
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://tile.openstreetmap.org/{z}/{x}/{y}.png', 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.
-
Marker Customization : Change the marker to any widget you want.
-
Floating Action Button to Follow Current Location : Use a floating action button to move and zoom the map to the current location.
-
Change Geolocator Settings : Define Geolocator settings yourself.
-
Selectable Distance Filter : Change Geolocator settings at the runtime.
-
Custom Stream : Use your own stream, such as position stream from another library or predefined route, as the source.
-
No Stream : Use Flutter
setState()
to update position and heading. -
Navigation Mode : Rotate the map to keep heading pointing upward.
-
Default Stream : Share the default streams between your app and this plugin.
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<LocationMarkerPosition?> and Stream<LocationMarkerHeading?>, respectively. You may see this example to know about how to do this.