Last updated:
0 purchases
flutter map location marker
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 version
copied to clipboard
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
],
);
}
copied to clipboard
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,
),
);
}
copied to clipboard
Consider using either
the AnimatedLocationMarkerLayer
or
the LocationMarkerLayer
if multiple location markers need to be displayed.
Examples #
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.
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.
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.