feat : marker with zoom changes

packages/inspection/lib/presentation/pages/inspection_map/logic.dart

@@ -19,6 +19,7 @@ class InspectionMapLogic extends GetxController with GetTickerProviderStateMixin
 
   RxList<Marker> markers = <Marker>[].obs;
 
+
   Timer? _debounceTimer;
   RxBool isLoading = false.obs;
   RxBool isSelectedDetailsLocation = false.obs;
@@ -119,25 +120,59 @@ class InspectionMapLogic extends GetxController with GetTickerProviderStateMixin
   void debouncedUpdateVisibleMarkers({required LatLng center, required double zoom}) {
     _debounceTimer?.cancel();
     _debounceTimer = Timer(const Duration(milliseconds: 300), () {
-      var raduis = getVisibleRadiusKm(
+      final radius = getVisibleRadiusKm(
         zoom: zoom,
         screenWidthPx: Get.width.toDouble(),
         latitude: center.latitude,
       );
+
       final filtered = filterNearbyMarkers(
         allPoultryLocation.value.data ?? [],
         center.latitude,
         center.longitude,
-        raduis * 1000, // Radius in meters
-      );
-      markers.assignAll(
-        filtered.map(
-          (e) => Marker(
-            point: LatLng(e.lat ?? 0, e.long ?? 0),
-            child: Icon(Icons.location_on, color: Colors.red),
-          ),
-        ),
+        radius * 1000,
       );
+
+      final visibleBounds = animatedMapController.mapController.camera.visibleBounds;
+      final isZoomedIn = zoom > 17;
+
+      final updatedMarkers = filtered.map((location) {
+        final point = LatLng(location.lat ?? 0, location.long ?? 0);
+        final isVisible = visibleBounds.contains(point);
+
+        return Marker(
+          point: point,
+          width: isZoomedIn && isVisible ? 180.w : 40.h,
+          height: isZoomedIn && isVisible ? 50.h  : 50.h,
+          child: isZoomedIn && isVisible
+              ? Container(
+                  height: 30.h,
+                  padding: EdgeInsets.all(5.r),
+                  decoration: BoxDecoration(
+                    color: Colors.white,
+                    borderRadius: BorderRadius.circular(15.r),
+                    boxShadow: [
+                      BoxShadow(
+                        color: Colors.black.withValues(alpha: 0.1),
+                        blurRadius: 5,
+                        offset: const Offset(0, 2),
+                      ),
+                    ],
+                  ),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    spacing: 8,
+                    children: [
+                      Assets.vec.chickenMapMarkerSvg.svg(width: 24.w, height: 24.h),
+                      Text(location.user?.fullname ?? '',style: AppFonts.yekan12,),
+                    ],
+                  ),
+                )
+              : Assets.vec.chickenMapMarkerSvg.svg(width: 24.w, height: 24.h),
+        );
+      }).toList();
+
+      markers.value = updatedMarkers;
     });
   }
 

packages/inspection/lib/presentation/pages/inspection_map/view.dart

@@ -43,7 +43,11 @@ class InspectionMapPage extends GetView<InspectionMapLogic> {
                 ),
                 initialZoom: 15,
                 onPositionChanged: (camera, hasGesture) {
-                  controller.debouncedUpdateVisibleMarkers(center: camera.center,zoom: camera.zoom);
+                  wLog(camera.zoom);
+                  controller.debouncedUpdateVisibleMarkers(
+                    center: camera.center,
+                    zoom: camera.zoom,
+                  );
                 },
               ),
 
@@ -52,29 +56,35 @@ class InspectionMapPage extends GetView<InspectionMapLogic> {
                   urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                   userAgentPackageName: 'ir.mnpc.rasadyar',
                 ),
-                MarkerClusterLayerWidget(
-                  options: MarkerClusterLayerOptions(
-                    maxClusterRadius: 80,
-                    size: const Size(40, 40),
-                    alignment: Alignment.center,
-                    padding: const EdgeInsets.all(50),
-                    maxZoom: 15,
-                    markers: controller.markers,
-                    builder: (context, markers) {
-                      return Container(
-                        decoration: BoxDecoration(
-                          borderRadius: BorderRadius.circular(20),
-                          color: Colors.blue,
-                        ),
-                        child: Center(
-                          child: Text(
-                            markers.length.toString(),
-                            style: const TextStyle(color: Colors.white),
-                          ),
-                        ),
-                      );
-                    },
-                  ),
+
+                ObxValue(
+                      (markers) {
+                    return MarkerClusterLayerWidget(
+                      options: MarkerClusterLayerOptions(
+                        maxClusterRadius: 80,
+                        size: const Size(40, 40),
+                        alignment: Alignment.center,
+                        padding: const EdgeInsets.all(50),
+                        maxZoom: 15,
+                        markers: markers.value,
+                        builder: (context, clusterMarkers) {
+                          return Container(
+                            decoration: BoxDecoration(
+                              borderRadius: BorderRadius.circular(20),
+                              color: Colors.blue,
+                            ),
+                            child: Center(
+                              child: Text(
+                                clusterMarkers.length.toString(),
+                                style: const TextStyle(color: Colors.white),
+                              ),
+                            ),
+                          );
+                        },
+                      ),
+                    );
+                  },
+                  controller.markers,
                 ),
               ],
             );