How to Create Multiple Polygons on Flutter Maps?

Question

I'm creating a interactive map of my campus, the ideia is to replicate what I did on uMaps, in this link. The geojson was downloaded and I'm using the coordinates that came with it.

The first polygon was created successfuly, but I need to create multiple polygons on Flutter Maps. When try to put more coordinates in the same "set" this happens:

Here's my code:

import 'dart:collection';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GMap extends StatefulWidget {
  GMap({Key key}) : super(key: key);

  @override
  _GMapState createState() => _GMapState();
}

class _GMapState extends State<GMap> {
  Set<Polygon> _polygons = HashSet<Polygon>();
  GoogleMapController _mapController;

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

  void _setPolygons() {
    List<LatLng> polygonLatLongs = List<LatLng>();
    polygonLatLongs.add(LatLng(-32.072717, -52.168965));
    polygonLatLongs.add(LatLng(-32.072618, -52.168894));
    polygonLatLongs.add(LatLng(-32.072685, -52.168761));
    polygonLatLongs.add(LatLng(-32.072633, -52.16865));
    polygonLatLongs.add(LatLng(-32.072738, -52.168564));
    polygonLatLongs.add(LatLng(-32.072793, -52.168674));
    polygonLatLongs.add(LatLng(-32.072827, -52.168696));
    polygonLatLongs.add(LatLng(-32.072931, -52.168696));
    polygonLatLongs.add(LatLng(-32.072937, -52.168551));
    polygonLatLongs.add(LatLng(-32.072996, -52.168436));
    polygonLatLongs.add(LatLng(-32.073028, -52.16846));
    polygonLatLongs.add(LatLng(-32.07305, -52.168425));
    polygonLatLongs.add(LatLng(-32.073097, -52.168452));
    polygonLatLongs.add(LatLng(-32.073072, -52.168501));
    polygonLatLongs.add(LatLng(-32.073086, -52.168521));
    polygonLatLongs.add(LatLng(-32.073044, -52.168599));
    polygonLatLongs.add(LatLng(-32.073044, -52.168947));
    polygonLatLongs.add(LatLng(-32.073084, -52.169022));
    polygonLatLongs.add(LatLng(-32.073075, -52.169038));
    polygonLatLongs.add(LatLng(-32.073097, -52.169091));
    polygonLatLongs.add(LatLng(-32.073044, -52.169129));
    polygonLatLongs.add(LatLng(-32.073014, -52.169094));
    polygonLatLongs.add(LatLng(-32.072993, -52.169106));
    polygonLatLongs.add(LatLng(-32.072925, -52.168987));
    polygonLatLongs.add(LatLng(-32.07292, -52.168834));
    polygonLatLongs.add(LatLng(-32.072827, -52.168833));
    polygonLatLongs.add(LatLng(-32.072779, -52.168863));
    polygonLatLongs.add(LatLng(-32.072717, -52.168965));
    //
    polygonLatLongs.add(LatLng(-32.075462, -52.163317));
    polygonLatLongs.add(LatLng(-32.075467, -52.163884));
    polygonLatLongs.add(LatLng(-32.075336, -52.163883));
    polygonLatLongs.add(LatLng(-32.075332, -52.163321));
    polygonLatLongs.add(LatLng(-32.075462, -52.163317));
    _polygons.add(
      Polygon(
        polygonId: PolygonId("0"),
        points: polygonLatLongs,
        fillColor: Colors.white,
        strokeWidth: 1,
      ),
    );
  }

  void _onMapCreated(GoogleMapController controller) {
    _mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Map')),
      body: Stack(
        children: <Widget>[
          GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(
              target: LatLng(-32.074692, -52.1692288),
              zoom: 14,
            ),
            polygons: _polygons,
            myLocationEnabled: true,
            myLocationButtonEnabled: true,
          ),
        ],
      ),
    );
  }
}

Any one knows how to put multiple polygons that I can define a "onTap" on it??

Any help, advice or guidance would be greatly appreciated.

Answer 1

I assume you get your data from api and assign it to a modal.

then

MyDataModal data = MyDataModal.fromJson(jsonData);


List<Polygon> myPolygons = [];

data.features.forEach((dat) {

List<LatLng> coordsToAdd = [];

data.geometry.coordinates.forEach((coordinat) {
  coordsToAdd.add(LatLng(coordinat.lat,coordinat.lng));

 });
  final color = Color.fromRGBO(Random().nextInt(255),Random().nextInt(255), Random().nextInt(255), 1);


  myPolygons.add(Polygon(polygonId:PolygonId(dat.properties.id.toString()),
    points: coordsToAdd,
    strokeColor: color,
    fillColor: color.withOpacity(0.9),
    strokeWidth: 5
  ));

});


 return PlatformMap(
        initialCameraPosition: CameraPosition(
          target: const LatLng(40.580585,29.264346208),
          zoom: 16.0,
        ),
        markers: Set<Marker>.of(
          [
            Marker(
              markerId: MarkerId(),
              position:  LatLng(40.580585,29.264346208,),
              consumeTapEvents: true,
              infoWindow: InfoWindow(
                title: 'PlatformMarker',
                snippet: "Hi I'm a Platform Marker",
              ),
              onTap: () {
                print("Marker tapped");
              },
            ),
          ],
        ),
polygons: Set<Polygon>.of(myPolygons),



        myLocationEnabled: true,
        myLocationButtonEnabled: true,
        onTap: (location) => print('onTap: $location'),
        onCameraMove: (cameraUpdate) => print('onCameraMove: $cameraUpdate'),
        compassEnabled: true,
        onMapCreated: (controller) {
        

          Future.delayed(Duration(seconds: 2)).then(
            (_) {
             /* controller.animateCamera(
                CameraUpdate.newCameraPosition(
                  const CameraPosition(
                    bearing: 270.0,
                    target: LatLng(40.580585, 29.264346208),
                    tilt: 30.0,
                    zoom: 18,
                  ),
                ),
              );*/
            },
          );
        },
      );

Answer 2

You should not put all the building or polygon coordinates in one single set/list instead you should create separate sets/list for each building or polygon coordinates, and then you can add these to your Polygon list separately. For example:

List<LatLng> polygonLatLong1 = []; 
List<LatLng> polygonLatLong2 = []; 

_polygons.add(
  Polygon(
    polygonId: PolygonId("1"),
    points: polygonLatLong1,
    fillColor: Colors.white,
    strokeWidth: 1,
  ),
);

_polygons.add(
  Polygon(
    polygonId: PolygonId("2"),
    points: polygonLatLong2, 
    fillColor: Colors.white,
    strokeWidth: 1,
  ),
);

Then to add a onTap event, you can simply call the onTap property of the Polygon object. For example:

_polygons.add(
  Polygon(
    polygonId: PolygonId("1"),
    points: polygonLatLong1,
    fillColor: Colors.white,
    strokeWidth: 1,
    onTap: (){
        // Do something
    }, 
  ),
);