Crossplatform Flutter map widget, powered with Leaflet(that used OSM)

This package in early development

Insert the user's personal data at your own risk, as on the WEB version this may lead to data theft. Be cautious when using such data and do so at your own risk. We are not responsible for data loss.

Supported WASM

Usage map

If you need only a blank map create a widget

NtkMapViewInterface();

You may a configure Html file you used to map

NtkMapViewInterface(
  mapPath: 'assets/map.html'
);

If you need to full control with map, then you need to create a map controller in you initState()
Param is viewId, you may set null if you dont need customize it

  NtkMapControllerInterface ntkMapController = NtkMapControllerInterface.init(null);

Then add you controller to you map widget

NtkMapViewInterface(
  mapPath: 'assets/map.html',
  mapController: ntkMapController,
);

Also you may configure callbacks for map

Map callbacks

You may get callback on map create start

NtkMapViewInterface(
  onCreateStart: (){

  },
);

You may get callback on map create end, this callback return used controller

NtkMapViewInterface(
  onCreateEnd: (controller){
    
  },
);

You may get callback on user tap on map, this callback returned a point on map (LatLng)

NtkMapViewInterface(
  onMapClick: (point) async {
    
  },
);

Work with controller

for now moment controller have a next method:

addMarker(LatLng point, Function(LatLng point)? callback)
add a marker on the map and returned callback when you clicked on it

goToPoint(LatLng point)
move center camera on point(like panTo in leaflet)

goToPointThenZoom(LatLng point, double zoom)
move camera and zoom to point(like flyTo in leaflet)

addPolyline(List points)
create polyline on List of points(also clear all previous polyline)

updateCurrentPosition(LatLng point, double accuracy);
Update current position on map. This create a circle and marker with center in point. Radius of circle is accuracy FOR NOW NOT IMPLEMENTED ON MOBILE

addCustomMarker(LatLng point, String title, List
create marker on point with title, in this marker you may configure a button and its callback

ntkMapController.addCustomMarker(
  latLng, addressName,
  ["from",  "to"],
  [(){
    this "from" callback
  },
  (){
    this "to" callback
  },
])

Map filter

Use in you controller method applyNewFilter(MapFilter filter);

MapFilter fields (above a default value):

  int blur = 0;
  double invert = 0;
  double grayscale = 0;
  double bright = 1;
  double contrast = 1;
  int hue = 0;
  double opacity = 1;
  double saturate = 1;
  double sepia = 0;

In future

In next version we may add:

1. Add a method to choose a tile url
2. Separate method to clear polyline
3. Create a method to clear markers

Additional information

I'm not very good at English, but I hope the provided description will help you understand how to use the plugin