ibrierley / flutter_map_line_editor

A basic line/poly editor that works with flutter_map and dragmarkers.
MIT License
46 stars 27 forks source link

support multiple polygon ? #6

Closed zozeei closed 3 years ago

zozeei commented 3 years ago

1602149718359

ibrierley commented 3 years ago

Have you tried it? What problems did you get ?

moovida commented 3 years ago

@ibrierley , I was investigating multi-geometries and polygons with holes. This might be related for the first. First off, would I have to create a polyEditor for each Geometry? And then when it comes to create:

DragMarkerPluginOptions(markers: polyEditor.edit()),

would I collect the markers from each? They should not suffer from mixups, right?

ibrierley commented 3 years ago

Yes, you would need to create a polyeditor for each currently.

I don't think there should be mixups, assuming the lists of points are separate and not reused between geometries.

I haven't tested this scenario, but I can't think of any caveats, but do let me know if you find any.

zozeei commented 3 years ago

I have tried already but I'm still confusing with it. Could you please advise me about this?

Thank you for your kindness and support, Weerayut Prapamontol

On Thu, Oct 8, 2020, 19:25 Ian notifications@github.com wrote:

Yes, you would need to create a polyeditor for each currently.

I don't think there should be mixups, assuming the lists of points are separate and not reused between geometries.

I haven't tested this scenario, but I can't think of any caveats, but do let me know if you find any.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ibrierley/flutter_map_line_editor/issues/6#issuecomment-705533189, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL3GXI4LBSSINIAED5NXSYTSJWVUZANCNFSM4SIPTCJQ .

ibrierley commented 3 years ago

Let me know your code for a minimal testing example, and I shall take a look.

zozeei commented 3 years ago

if i add multipolygon, would I have to create a DragMarkerPluginOptions(markers: polyEditor.edit()) before, right? Can I add that after the second drawing polygon ?

zozeei commented 3 years ago
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_map_dragmarker/dragmarker.dart';
import 'polyeditor.dart';

void main() {
  runApp(TestApp());
}

class TestApp extends StatefulWidget {
  @override
  _TestAppState createState() => _TestAppState();
}

class _TestAppState extends State<TestApp> {
  PolyEditor polyEditor, polyEditor2;
  final MapController mapController = MapController();
  List<Polygon> polygons = [];

  List dragMarkerEditor = List();

  var testPolygon = new Polygon(
    color: Colors.deepOrange.withOpacity(0.2),
    points: [],
    borderColor: Colors.deepOrange,
    borderStrokeWidth: 2,
  );
  var testPolygon2 = new Polygon(
    color: Colors.blue.withOpacity(0.2),
    points: [],
    borderColor: Colors.blue,
    borderStrokeWidth: 2,
  );

  @override
  void initState() {
    super.initState();

    polyEditor = new PolyEditor(
      addClosePathMarker: true,
      points: testPolygon.points,
      pointIcon: Icon(Icons.crop_square, size: 23),
      intermediateIcon: Icon(Icons.lens, size: 15, color: Colors.grey),
      callbackRefresh: () => {this.setState(() {})},
    );
    polyEditor2 = new PolyEditor(
      addClosePathMarker: true,
      points: testPolygon2.points,
      pointIcon: Icon(Icons.crop_square, size: 23),
      intermediateIcon: Icon(Icons.lens, size: 15, color: Colors.grey),
      callbackRefresh: () => {this.setState(() {})},
    );
//    polygons.clear();

    polygons.add(testPolygon);
    polygons.add(testPolygon2);
  }

  @override
  Widget build(BuildContext context) {
//
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: Stack(
              children: [
                FlutterMap(
                  mapController: mapController,
                  options: MapOptions(
                    onTap: (ll) {
                      polyEditor.add(testPolygon.points, ll);
                      polyEditor2.add(testPolygon2.points, ll);
                    },
                    plugins: [
                      DragMarkerPlugin(),
                    ],
                    center: LatLng(45.5231, -122.6765),
                    zoom: 6.4,
                  ),
                  layers: [
                    TileLayerOptions(
                        urlTemplate:
                            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        subdomains: ['a', 'b', 'c']),
                    PolygonLayerOptions(polygons: polygons),
                    DragMarkerPluginOptions(markers: polyEditor.edit()),
                    DragMarkerPluginOptions(markers: polyEditor2.edit()),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
ibrierley commented 3 years ago

I guess the question with the code above is, firstly what happens, and secondly what do you want to happen ?

I can see in onTap you are adding a point to both sets of polyEditors, which looks a bit strange, but what logic do you want to happen when you click on a map ? How do you want to decide which polyEditor you will add a point to. So I think maybe you need to clarify the logic of what you want to happen firstly.

You see normally you would only have an onTap work for one object I would assume, which you have selected via some method. Dragging the existing points on any polygon I would assume to make sense though, does that work ?

zozeei commented 3 years ago

I try to follow an example. http://leaflet.github.io/Leaflet.Editable/example/undo-redo.html

ibrierley commented 3 years ago

So you need to decide what method you are going to 'select' which polygon you are currently working on (adding new points to).

What currently happens ?

zozeei commented 3 years ago

I meant, I wanna create many polygons at the same time. But currently, I can't create because, I have to add thisDragMarkerPluginOptions(markers: polyEditor.edit()) option before I can create another polygon. For example, if I want to create 5 polygons, I have to redo the step of adding the option again 5 times. That's my problem right now and I don't know how to do it.

On Fri, Oct 9, 2020, 15:37 Ian notifications@github.com wrote:

So you need to decide what method you are going to 'select' which polygon you are currently working on (adding new points to).

What currently happens ?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ibrierley/flutter_map_line_editor/issues/6#issuecomment-706050724, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL3GXI34P4EHD5MBM3WLHHTSJ3DVNANCNFSM4SIPTCJQ .

ibrierley commented 3 years ago

What do you expect to do, rather than add the option once for each polygon ? I'm kind of failing to see what the problem actually is. You could naturally use a list and loop through them to do it, but each poly will need an editor.

zozeei commented 3 years ago

Okay .. I will try, thanks for the answer

ibrierley commented 3 years ago

Just to be clear, I am guessing there will be problems, if you have many editors live at the same time. It will probably be just the top layer which receives the drag clicks (I haven't had chance to test this yet)...but this is possibly part of the logic which you may need to figure out, which one you have 'selected'. I'm not sure the plugin itself could figure that out...if you need ALL the be simultaneously able to move the markers around and create new ones, I don't think that would work, but if you have the logic of only one you have selected needing the events, it may work.