How can I display and edit a boundary map?

Question

I'm developing a project for mobile and web in Flutter. I'd like to display a map from a tiling sevice API such that it had the same funcionality of e.g. Google Maps where you load the data that the user is seeing (showing details when they zoom in etc).

But I'm only interested in the data of the boundaries of regions such as countries and cities (and their identification/name). This is because I'd like to fill the region with e.g. a color.

I'm not sure if filling is possible, or if I'd have to fetch the data, create a custom layer and display on top of it. Or if there are better approaches.

Is this possible with a free provider? Can somebody give me some direction?

Thank you very much!

I've started playing around with 'flutter_map' package, but the only thing I could think of was to draw Polygons.

Answer 1

Try something like this in your google map widget add polygones

SizedBox(
  height: 308,
  child: ClipRRect(
    borderRadius: const BorderRadius.only(
      bottomLeft: Radius.circular(20),
      bottomRight: Radius.circular(20),
    ),
    child: !isMapLoading
        ? GoogleMap(
            buildingsEnabled: true,
            compassEnabled: false,
            indoorViewEnabled: false,
            mapToolbarEnabled: true,
            tiltGesturesEnabled: false,
            trafficEnabled: false,
            rotateGesturesEnabled: false,
            liteModeEnabled: false,
            zoomControlsEnabled: true,
            zoomGesturesEnabled: true,
            myLocationButtonEnabled: false,
            myLocationEnabled: true,
            polygons: polygone,
            gestureRecognizers: {
              Factory<OneSequenceGestureRecognizer>(
                  () => EagerGestureRecognizer()),
            },
            mapType: MapType.normal,
            initialCameraPosition: CameraPosition(
              target: pointerPos!,
              zoom: zoomLevel,
            ),
            onCameraMove: (position) {
              pointerPos = position.target;
            },
            onCameraIdle: () async {
              await Future.delayed(
                  const Duration(milliseconds: 300));
              widget.onDragEnd.call(pointerPos!);
            },
            onMapCreated:
                (GoogleMapController gmController) async {
              controller = gmController;

              /// MAPS DELVERIES REGION SETTING
              polygone.add(
                Polygon(
                  fillColor: Colors.black.withOpacity(
                      map_settings.kMapAreaOpacity),
                  polygonId:
                      const PolygonId('Left_Side_Map_Polygone'),
                  points: map_settings.halfBackgroundLeft,
                  holes: [map_settings.deliveriesRegion],
                  visible: true,
                  geodesic: false,
                  strokeWidth: 0,
                ),
              );

              polygone.add(
                Polygon(
                  fillColor: Colors.black.withOpacity(
                      map_settings.kMapAreaOpacity),
                  polygonId: const PolygonId(
                      'Right_Side_Map_Polygone'),
                  points: map_settings.halfBackgroundRight,
                  visible: true,
                  geodesic: false,
                  strokeWidth: 0,
                ),
              );

              polygone.add(
                Polygon(
                  fillColor: Colors.transparent,
                  strokeColor: kNeutral700,
                  polygonId:
                      const PolygonId('Deliveries Region'),
                  points: map_settings.deliveriesRegion,
                  visible: true,
                  geodesic: false,
                  strokeWidth: 1,
                ),
              );

              setState(() {});
            },
          )
        : const SizedBox.shrink(),
  ),
),

and the data would be something like this:

List<LatLng> deliveriesRegion = const [
  LatLng(25.4993491, 51.5486277),
  LatLng(25.5043070, 51.5074290),
  LatLng(25.5092648, 51.4758433),
  LatLng(25.5092648, 51.4511241),
  LatLng(25.5080254, 51.4154185),
  LatLng(25.4981095, 51.3906993),
  LatLng(25.4857136, 51.3714732),
  LatLng(25.4695969, 51.3426341),
  LatLng(25.4522381, 51.3151683),
  LatLng(25.4199937, 51.2877024),
  LatLng(25.3927032, 51.2725962),
  LatLng(25.3554789, 51.2506236),
  LatLng(25.3306564, 51.2423838),
  LatLng(25.3095532, 51.2423838),
  LatLng(25.2834795, 51.2396372),
  LatLng(25.2636101, 51.2410105),
  LatLng(25.2362843, 51.2465037),
  LatLng(25.2139223, 51.2465037),
  LatLng(25.1816144, 51.2506236),
  LatLng(25.1555132, 51.2616099),
  LatLng(25.1231898, 51.2643565),
  LatLng(25.0883704, 51.2753428),
  LatLng(25.0622493, 51.3192881),
  LatLng(25.0597613, 51.3467539),
  LatLng(25.0585173, 51.3769663),
  LatLng(25.0622493, 51.4318980),
  LatLng(25.0709569, 51.4593638),
  LatLng(25.0759325, 51.4923228),
  LatLng(25.0858829, 51.5390147),
  LatLng(25.0921015, 51.5802134),
  LatLng(25.1020506, 51.6035594),
  LatLng(25.1256765, 51.6461314),
  LatLng(25.1927989, 51.6543711),
  LatLng(25.2673359, 51.6461314),
  LatLng(25.2872047, 51.6310252),
  LatLng(25.3318976, 51.6241587),
  LatLng(25.3864999, 51.6090525),
  LatLng(25.4286757, 51.5966929),
  LatLng(25.4596779, 51.5788401),
  LatLng(25.4993491, 51.5486277),
];

/// HALF BACKGROUND RIGHT
List<LatLng> halfBackgroundRight = const [
  LatLng(-89.9, 0),
  LatLng(89.9, 0),
  LatLng(89.9, -179.999),
  LatLng(-89.9, -179.999),
];

/// HALF BACKGROUND LEFT
List<LatLng> halfBackgroundLeft = const [
  LatLng(-89, 0),
  LatLng(89, 0),
  LatLng(89, 179.999),
  LatLng(-89, 179.999),
];

The result will look something like this: