Flutter_map and OSM: Arbitrary contour painting on the map

46 Views Asked by At

I'm trying to draw closed contours on an OSM using the GestureDetector with flutter_map package. This is easily done on a plain background, as shown here. But when I try to use the same solution with OSM as a background, it doesn't work. Here is my example:

GestureDetector sketchArea() {
    return GestureDetector(
        onPanUpdate: (DragUpdateDetails details) {
            RenderBox? box = context.findRenderObject() as RenderBox?;
            Offset point = box!.globalToLocal(details.globalPosition);
            setState(() {
              points = (List.from(points)..add(point));
          });
        },
        onPanEnd: (DragEndDetails details) {
          points.add(null);
        },

        child: RepaintBoundary(
          child: CustomPaint(
            painter: Sketcher(points),
            child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                color: Color(0xFF0E3311).withOpacity(0.5),
                child: Column (children: [
                    Expanded(
                      child: FlutterMap(
                        mapController: _mapController,
                        options: MapOptions(
                          center: LatLng(41.238250, 69.342939),
                          zoom: 4,),
                      children: [
                        TileLayer(
                          urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
                          userAgentPackageName: 'com.example.app',
                        ),
                        ...
               
    )));
  }
}

In my Sketcher, I have exactly the same as in the source code:

import 'package:flutter/material.dart';

class Sketcher extends CustomPainter {
  //list of points which are to be painted
  final List<Offset?> points;

  Sketcher(this.points);

  @override
  void paint(Canvas canvas, Size size) {

    Paint paint = Paint()
        ..color = Colors.blue
        ..strokeCap = StrokeCap.round
        ..strokeWidth = 5.0;

    for (int i = 0; i < points.length - 1; ++i) {
      if (points[i] == null) continue;
      if (points[i + 1] != null) {
        canvas.drawLine(points[i]!, points[i + 1]!, paint);
      }
    }
  }

  @override
  bool shouldRepaint(Sketcher oldDelegate) {
    return oldDelegate.points != points;
  }
}

After the contour is created, I'm going to filter the coordinates of the points located inside it and pass them to the backend. Right now I'm doing this by building a polygon, but I want to do the same with an arbitrary closed contour.

I will appreciate any help.

0

There are 0 best solutions below