flutter_map_location_marker 1.0.0-nullsafety.0 copy "flutter_map_location_marker: ^1.0.0-nullsafety.0" to clipboard
flutter_map_location_marker: ^1.0.0-nullsafety.0 copied to clipboard

outdated

A flutter map plugin for displaying device current location.

flutter_map_location_marker #

pub package github tag license

A flutter_map plugin for displaying device current location. Interface preview

Features #

  • Customization: The location marker can be fully customized. The colors of accuracy circle and header are also customizable.

  • Simple: Not depend on other layer. No MapController or MarkerLayer are needed.

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 geolocation 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.