How to Create a Custom Map Overlay for Location-Based Services in FlutterFlow

1// Custom Widget: MapOverlayWidget
2// Pubspec: google_maps_flutter: ^2.5.0
3
4import 'package:flutter/material.dart';
5import 'package:google_maps_flutter/google_maps_flutter.dart';
6import 'package:cloud_firestore/cloud_firestore.dart';
7
8class MapOverlayWidget extends StatefulWidget {
9  final double width;
10  final double height;
11  final double initialLat;
12  final double initialLng;
13  final double initialZoom;
14  final Future Function(String locationId)? onMarkerTap;
15
16  const MapOverlayWidget({
17    Key? key,
18    required this.width,
19    required this.height,
20    this.initialLat = 37.7749,
21    this.initialLng = -122.4194,
22    this.initialZoom = 13,
23    this.onMarkerTap,
24  }) : super(key: key);
25
26  @override
27  State<MapOverlayWidget> createState() => _MapOverlayWidgetState();
28}
29
30class _MapOverlayWidgetState extends State<MapOverlayWidget> {
31  Set<Polyline> _polylines = {};
32  Set<Polygon> _polygons = {};
33  Set<Circle> _circles = {};
34  Set<Marker> _markers = {};
35
36  @override
37  void initState() {
38    super.initState();
39    _loadOverlays();
40  }
41
42  Future<void> _loadOverlays() async {
43    final firestore = FirebaseFirestore.instance;
44
45    // Load polylines from routes collection
46    final routesDocs = await firestore.collection('routes').get();
47    final polylines = routesDocs.docs.map((doc) {
48      final points = (doc['points'] as List)
49          .map((gp) => LatLng(gp.latitude, gp.longitude))
50          .toList();
51      return Polyline(
52        polylineId: PolylineId(doc.id),
53        points: points,
54        color: _hexToColor(doc['color'] ?? '#4285F4'),
55        width: doc['width'] ?? 4,
56      );
57    }).toSet();
58
59    // Load polygons from zones collection
60    final zonesDocs = await firestore.collection('zones').get();
61    final polygons = zonesDocs.docs.map((doc) {
62      final boundary = (doc['boundary'] as List)
63          .map((gp) => LatLng(gp.latitude, gp.longitude))
64          .toList();
65      return Polygon(
66        polygonId: PolygonId(doc.id),
67        points: boundary,
68        fillColor: _hexToColor(doc['fillColor'] ?? '#4285F4').withOpacity(0.2),
69        strokeColor: _hexToColor(doc['strokeColor'] ?? '#4285F4'),
70        strokeWidth: 2,
71      );
72    }).toSet();
73
74    setState(() {
75      _polylines = polylines;
76      _polygons = polygons;
77    });
78  }
79
80  Color _hexToColor(String hex) {
81    hex = hex.replaceAll('#', '');
82    if (hex.length == 6) hex = 'FF$hex';
83    return Color(int.parse(hex, radix: 16));
84  }
85
86  // Point-in-polygon (ray casting) for geofencing
87  static bool isInsideZone(double lat, double lng, List<LatLng> polygon) {
88    bool inside = false;
89    int j = polygon.length - 1;
90    for (int i = 0; i < polygon.length; i++) {
91      if ((polygon[i].latitude > lat) != (polygon[j].latitude > lat) &&
92          lng < (polygon[j].longitude - polygon[i].longitude) *
93                  (lat - polygon[i].latitude) /
94                  (polygon[j].latitude - polygon[i].latitude) +
95              polygon[i].longitude) {
96        inside = !inside;
97      }
98      j = i;
99    }
100    return inside;
101  }
102
103  @override
104  Widget build(BuildContext context) {
105    return SizedBox(
106      width: widget.width,
107      height: widget.height,
108      child: GoogleMap(
109        initialCameraPosition: CameraPosition(
110          target: LatLng(widget.initialLat, widget.initialLng),
111          zoom: widget.initialZoom,
112        ),
113        polylines: _polylines,
114        polygons: _polygons,
115        circles: _circles,
116        markers: _markers,
117      ),
118    );
119  }
120}