nav_marker
nav_marker
is a Flutter package that allows you to add navigation markers on flutter_map
Previews
Features
- Define dynamic markers with the
NavigationOverlay
via theMapOrNavMarkerLayer
- Display a navigator that directs users towards the marker position.
- Customize the appearance of the navigator to match the marker.
Getting started
Before using the nav_marker
package, make sure you have installed and set up flutter_map
in your Flutter project. If you haven't done so, please refer to the official flutter_map documentation for installation instructions.
Usage
Import the necessary packages in your Dart file:
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:nav_marker/map_or_nav_marker.dart';
Set up your map view using FlutterMap and specify the initial map options, following the instructions provided in the flutter_map documentation.
Then add the MapOrNavMarkerLayer
to the children
property of FlutterMap
FlutterMap(
options: MapOptions( ... ),
children: [
TileLayer( ... ),
MapOrNavMarkerLayer(
mapOrNavMarkers: [
...
]
),
],
),
Caution: Make sure to place the
MapOrNavMarkerLayer
below theTileLayer
.
Add MapOrNavMarker
s in mapOrNavMarkers
property within the MapOrNavMarkerLayer
like so
MapOrNavMarkerLayer(
mapOrNavMarkers: [
MapOrNavMarker(
navMarkerEnabled: true,
builder: (_) => builder,
point: point,
),
MapOrNavMarker(
navMarkerEnabled: true,
builder: (_) => builder,
point: point,
),
]
),
Note: The
navMarkerEnabled
property must be true in order for theMapOrNavMarker
to be displayed, similar to a regularMarker
.
Furthermore, you can customize the appearance of the Nav Marker by defining the navMarkerSettings
property including an onTap
function.
MapOrNavMarker(
navMarkerEnabled: true,
navMarkerSettings: NavMarkerSettings(
onTap: (targetPoint) => onTap,
arrowColor: arrowColor,
backgroundColor: backgroundColor,
surfaceColor: surfaceColor,
size: size,
child: child,
),
builder: (context) => builder,
point: point,
)
Todo-list
Special Thanks to Bryan Cancel for
- Adding support for map rotation in flutter_map.
- Enhancing the precision of the direction arrows.