rog_app/lib/widgets/map_widget.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
import 'package:geojson/geojson.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:latlong2/latlong.dart';
import 'package:rogapp/pages/index/index_controller.dart';
import 'package:rogapp/widgets/base_layer_widget.dart';
import 'package:rogapp/widgets/bottom_sheet_new.dart';
import 'package:rogapp/widgets/bottom_sheet_widget.dart';

class MapWidget extends StatelessWidget {

  final IndexController indexController = Get.find<IndexController>();

  MapWidget({ Key? key}) : super(key: key);

  StreamSubscription? subscription;

  @override
  Widget build(BuildContext context) {
    final PopupController _popupController = PopupController();
    return Stack(
                  children: [
                    Obx(() => 
                      indexController.is_loading == true ? Padding(
                        padding: const EdgeInsets.only(top: 60.0),
                        child: CircularProgressIndicator(),
                      ):
                      FlutterMap(
                      //mapController: mapController,
                      options: MapOptions(
                          onMapCreated: (c){
                            indexController.mapController = c;

                            indexController.mapController!.onReady.then((_) {
                            subscription = indexController.mapController!.mapEventStream.listen((MapEvent mapEvent) {
                              if (mapEvent is MapEventMoveStart) {
                                  //print(DateTime.now().toString() + ' [MapEventMoveStart] START');
                                  // do something
                                }
                                if (mapEvent is MapEventMoveEnd) {
                                  //print(DateTime.now().toString() + ' [MapEventMoveStart] END');
                                  indexController.loadLocationsBound();
                                }
                              });
                            });

                          },
                          //center: LatLng(37.15319600454702, 139.58765950528198),
                          bounds: indexController.currentBound.length > 0 ? indexController.currentBound[0]: LatLngBounds.fromPoints([LatLng(35.03999881162295, 136.40587119778962), LatLng(36.642756778706904, 137.95226720406063)]),
                          zoom: 1,
                          maxZoom: 20,
                          interactiveFlags: InteractiveFlag.pinchZoom | InteractiveFlag.drag,
                          plugins: [
                            MarkerClusterPlugin(),
                          ],
                          
                          onPositionChanged: (MapPosition pos, isvalue){

                            // LatLng c1 = pos.center?? LatLng(0, 0);
                            
                            // Timer(Duration(milliseconds:800), () {
                            //   print(pos.bounds!.center);
                            //   print("Yeah, this line is printed after 3 second");
                            //   LatLng c2 = pos.center?? LatLng(0, 0);
                            //   if(c1.latitude != 0 && c1.latitude == c2.latitude){
                            //     print("------ calling ----");
                            //     //indexController.loadLocationsBound();
                            //   }
                              
                            // });

                            //
                          },
                          onTap: (_, __) =>
                              _popupController
                                  .hideAllPopups(), // Hide popup when the map is tapped.
                        ),
                        layers: [
                          // MarkerLayerOptions(
                          //   markers: indexController.locations[0].collection.map((i) {
                          //       print("i si ${i.properties!['location_id']}");
                          //       GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
                          //       print("lat is ${p.geoSerie!.geoPoints[0].latitude} and lon is ${p.geoSerie!.geoPoints[0].longitude}");
                          //       return Marker(
                          //         anchorPos: AnchorPos.align(AnchorAlign.center),
                          //         height: 70.0,
                          //         width: 70.0,
                          //         point: LatLng(p.geoSerie!.geoPoints[0].latitude, p.geoSerie!.geoPoints[0].longitude),
                          //         builder: (ctx) => 
                          //          IconButton(
                          //             icon: const Icon(Icons.pin_drop),
                          //             tooltip: 'Increase volume by 10',
                          //             onPressed: () {
                          //               GeoJsonFeature? fs = indexController.getFeatureForLatLong(p.geoSerie!.geoPoints[0].latitude, p.geoSerie!.geoPoints[0].longitude);
                          //               print(fs);
                          //               if(fs != null){
                          //                 if(indexController.currentFeature.length > 0) {
                          //                   indexController.currentFeature.clear();
                          //                 }
                          //                 indexController.currentFeature.add(fs);
                          //                 indexController.getAction();
                    
                          //                 showModalBottomSheet(context: context, isScrollControlled: true, 
                          //                   builder:((context) => BottomSheetWidget())
                          //                 );
                          //               }
                          //             },
                          //           ),
                                
                          //       );
                          //     }).toList(),
                          // ),
                        ],
                        children: [
                          BaseLayer(),
                          LocationMarkerLayerWidget(),
                          
                          indexController.locations.length > 0 ?
                          MarkerClusterLayerWidget(
                            options: MarkerClusterLayerOptions(
                              spiderfyCircleRadius: 0,
                              spiderfySpiralDistanceMultiplier: 2,
                              circleSpiralSwitchover: 12,
                              maxClusterRadius: 0,
                              rotate: true,
                              onMarkerTap: (marker){
                                GeoJsonFeature? fs = indexController.getFeatureForLatLong(marker.point.latitude, marker.point.longitude);
                                print(fs);
                                if(fs != null){
                                  if(indexController.currentFeature.length > 0) {
                                    indexController.currentFeature.clear();
                                  }
                                  indexController.currentFeature.add(fs);
                                  indexController.getAction();
            
                                  showModalBottomSheet(
                                    context: context, 
                                    isScrollControlled: true, 
                                    isDismissible: true,
                                    builder:((context) => BottomSheetNew())
                                    //builder:((context) => BottomSheetWidget())
                                  );
                                }
                                
                              },
            
                              size: Size(40, 40),
                              anchor: AnchorPos.align(AnchorAlign.center),
                              fitBoundsOptions: const FitBoundsOptions(
                                padding: EdgeInsets.all(50),
                                maxZoom: 265,
                              ),
                              markers:indexController.locations[0].collection.map((i) {
                                print("i si ${i.properties!['location_id']}");
                                GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
                                print("lat is ${p.geoSerie!.geoPoints[0].latitude} and lon is ${p.geoSerie!.geoPoints[0].longitude}");
                                return Marker(
                                  anchorPos: AnchorPos.align(AnchorAlign.center),
                                  height: 22.0,
                                  width: 22.0,
                                  point: LatLng(p.geoSerie!.geoPoints[0].latitude, p.geoSerie!.geoPoints[0].longitude),
                                  builder: (ctx) => Icon(Icons.pin_drop),
                                  // builder: (ctx) => i.properties!["category"] != null ?
                                  // ImageIcon(
                                  //     AssetImage("assets/images/${i.properties!["category"]}.png"),
                                  //     color: Color(0xFF3A5A98),
                                  //     size:12.0,
                                  // )
                                  // : Icon(Icons.pin_drop),

                                );
                              }).toList(),
                              builder: (context, markers) {
                                return Container(
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(20.0),
                                      color: Colors.blue),
                                  child: Center(
                                    child: Text(
                                      markers.length.toString(),
                                      style: TextStyle(color: Colors.white),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ): Container(height:0,width: 0),
                        ],
                    )
                    )
                  ],
                );
  }
}