CODEWITHSUNDEEP
fluttermapboxmapbox-gl-jsmapbox-androidmapbox-ios
Prvind Panday
Prvind Panday

Reputation: 11

Drawing Circle Using mapbox_maps_flutter: ^2.0.0 package in flutter application

I am using mapbox_maps_flutter: ^2.0.0 in my Flutter application.

I have a requirement to allow users to draw circles and squares on the map which defines the area where the user wants his construction to be done.

When I am using flutter gesture detectors such as onVerticalDragStart, onVerticalDragUpdate, onHorizontalDragStart, onHorizontalDragUpdate. When I try to use these gesture detectors the Map Box Map gestures won't work I can't scroll or tap on the map.

I tried searching but didn't find a way to get the user's dragged area on the map so I could calculate the distance and then create the circle/square accordingly.

What I tried as a last option was using onScrollListener.

I did something like the following:

onScrollListener: (MapContentGestureContext mapContext) {
  if (_selectedIcon == 2) {
    _latLng.add(Position(mapContext.point.coordinates.lng, mapContext.point.coordinates.lat));
    setState(() {
      _circleRadius = calculateDistance(_latLng.first, _latLng.last);
    });

    _touchPoints.add(mapContext.touchPosition);
    _debounceTimer?.cancel();
    _debounceTimer = Timer(const Duration(milliseconds: 300), () {
      if (_circleRadius > 5) {
        log('Circle Drawing: Distance from point 1 is: $_circleRadius meters');
        _drawOnMap(_selectedIcon);
      }
    });
  }
},

But that's not working because I am unable to get an idea of when the scroll has ended resulting I am getting multiple circle layers on the Map.

Can you please guide me here on how we can get the gestures and draw a circle/square using the user input?

Upvotes: 0

Views: 321

Answers (1)

Abdelrhman Tolba
Abdelrhman Tolba

Reputation: 20

you can try this :

onMapCreated: (MapboxMapController controller){
      this.controller = controller;
    },

then:

   controller.addCircle(
            CircleOptions(
              circleRadius: 100,
              circleStrokeOpacity: 1,
              circleStrokeWidth: 5,
              geometry: LatLng(36.8065, 10.1815),
            ),
          );

You can observe gesture events using MapWidget.onTapListener, MapWidget.onLongTapListener, MapWidget.onScrollListener. Like this:

MapWidget(
       
          onMapCreated: _onMapCreated,
          onTapListener: (coordinate) {drawCircle(coordinate);},
          onLongTapListener: (coordinate) {drawCircle(coordinate);},

        )

Upvotes: 0

Related Questions