Skip to content

ahaaje/flutter_map_location_marker

 
 

Repository files navigation

flutter_map_location_marker

pub package github tag license

A flutter_map plugin for displaying device current location. Interface preview

Features

  • Simple: The only thing to do is adding a LocationMarkerLayerWidget() in to your map because all parameters have good default values.

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

  • Auto-centering: The map center on the new location when location is updated.

  • Auto-rotating: The map can be rotated automatically as navigation mode.

  • Customization: The location marker can be fully customized, even the colors of 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, please follow the instruction from geolocator package.

Add the layer widget into FlutterMap:

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

Alternatively, you can use the old style to create the layer:

Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(
      plugins: [
        LocationMarkerPlugin(), // <-- add plugin here
      ],
    ),
    layers: [
      TileLayerOptions(
        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c'],
      ),
      LocationMarkerLayerOptions(), // <-- add layer options here
    ],
  );
}

Examples

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

  2. Floating Action Button for Centering Current Location Use a floating action button to move and zoom the map to 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 other library or predefined route, as the source.

About

A flutter map plugin for displaying device current location.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Dart 64.0%
  • C++ 24.2%
  • CMake 9.0%
  • Ruby 1.6%
  • C 0.5%
  • Swift 0.5%
  • Other 0.2%