flutter_map_line_editor

Last updated:

0 purchases

flutter_map_line_editor Image
flutter_map_line_editor Images
Add to Cart

Description:

flutter map line editor

Line & Polygon Editor for flutter_map #



A basic line and polygon editor that works with
flutter_map, relying on
DragMarker from
flutter_map_dragmarker.


Getting started #
To use this package, first add flutter_map_line_editor as a
dependency in your pubspec.yaml file:
dependencies:
flutter_map_line_editor: <latest version>
copied to clipboard
See the example directory for a complete example app demonstrating the usage
of this package, here are the most important features:

Tap the map to add a marker, add as many as you want.
Drag the main points to move them.
Drag the intermediate points to create a new point there and drag to where you
want.
Long press to delete a point.

Usage #
Once the package is installed, make sure to import the package in the file that
you are going to need it, you may also need to import flutter_map_dragmarker:
import 'package:flutter_map_dragmarker/flutter_map_dragmarker.dart';
import 'package:flutter_map_line_editor/flutter_map_line_editor.dart';
copied to clipboard
Set up a new editor instance, tipically inside initState():
var polyEditor = PolyEditor(
points: testPolyline.points,
pointIcon: Icon(Icons.crop_square, size: 23),
intermediateIcon: Icon(Icons.lens, size: 15, color: Colors.grey),
callbackRefresh: () => { this.setState(() {})},
addClosePathMarker: false, // set to true if polygon
);
copied to clipboard
The PolyEditor takes a list of LatLng points that are used to put
DragMarker's over these locations. PolyEditor does not care if the given
list of points is a polyline, it could be something else. This list will be
edited in place so that when the build method is triggered it will use updated
points.
You must also pass a Widget (tipically an Icon) using the pointIcon
parameter that will be used to represent each DragMarker.
You may also pass the optional parameter intermediateIconto display another
DragMarker halfway between the main points. Dragging this marker will create
another main point and the line will be split.
The screen needs to be updated during a drag, so callbackRefresh takes a
function that will get called each drag frame.
For polygons or “closed paths” set the parameter addClosePathMarker to true
so that the end auto-returns to the start. Otherwise, if you just want a basic
polyline, set this to false.
You can add a point programmatically using the onTap callback in MapOptions:
onTap: (ll) {
polyEditor.add(testPolyline.points, ll);
},
copied to clipboard
Add the correspondent layers as FlutterMap childrens:
FlutterMap(
options: MapOptions(
onTap: (_, ll) {
polyEditor.add(testPolyline.points, ll);
},
),
children: [
// .....
PolylineLayer(polylines: polyLines),
DragMarkers(markers: polyEditor.edit()),
],
),
copied to clipboard

Report issues or feature requests in the GitHub repository,
Pull Requests are welcome!

License #
This package is licensed under the permissive MIT License.
See the LICENSE file in this repository to get a full copy.

License:

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Customer Reviews

There are no reviews.