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:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:geojson/geojson.dart';
import 'package:get/get.dart';
import 'package:latlong2/latlong.dart';
import 'package:rogapp/pages/destination/destination_controller.dart';
import 'package:rogapp/pages/index/index_controller.dart';
import 'package:rogapp/utils/text_util.dart';
import 'package:rogapp/widgets/base_layer_widget.dart';
import 'package:rogapp/widgets/bottom_sheet_new.dart';

class MapWidget extends StatelessWidget {
  final IndexController indexController = Get.find<IndexController>();
  final DestinationController destinationController =
      Get.find<DestinationController>();

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

  StreamSubscription? subscription;

  Widget getMarkerShape(GeoJsonFeature i, BuildContext context) {
    GeoJsonMultiPoint p = i.geometry as GeoJsonMultiPoint;
    //print("lat is ${p.geoSerie!.geoPoints[0].latitude} and lon is ${p.geoSerie!.geoPoints[0].longitude}");
    RegExp regex = RegExp(r'([.]*0)(?!.*\d)');
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        InkWell(
          onTap: () {
            GeoJsonFeature? fs = indexController.getFeatureForLatLong(
                p.geoSerie!.geoPoints[0].latitude,
                p.geoSerie!.geoPoints[0].longitude);
            print("------- fs $fs------");
            if (fs != null) {
              indexController.currentFeature.clear();
              indexController.currentFeature.add(fs);
              //print("----- fs is ${fs.properties!['photos']}");
              indexController.getAction();

              showModalBottomSheet(
                  constraints:
                      BoxConstraints.loose(Size(Get.width, Get.height * 0.75)),
                  context: context,
                  isScrollControlled: true,
                  isDismissible: true,
                  builder: ((context) => BottomSheetNew())
                  //builder:((context) => BottomSheetWidget())
                  ).whenComplete(() {
                destinationController.skip_gps = false;
              });
            }
          },
          child: Container(
              height: 32,
              width: 32,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.transparent,
                  border: Border.all(
                      color: i.properties!['buy_point'] > 0
                          ? Colors.blue
                          : Colors.red,
                      width: 3,
                      style: BorderStyle.solid)),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  const Icon(
                    Icons.circle,
                    size: 6.0,
                  ),
                  i.properties!['cp'] == -1
                      ? Transform.rotate(
                          alignment: Alignment.centerLeft,
                          origin: Offset.fromDirection(1, 26),
                          angle: 270 * pi / 180,
                          child: const Icon(
                            Icons.play_arrow_outlined,
                            color: Colors.red,
                            size: 70,
                          ))
                      : Container(
                          color: Colors.transparent,
                        ),
                ],
              )),
        ),
        Container(
            color: Colors.white,
            child: Text(TextUtils.getDisplayTextFeture(i),
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.red,
                ))),
      ],
    );
  }

  List<LatLng>? getPoints() {
    print("##### --- route point ${indexController.routePoints.length}");
    List<LatLng> pts = [];
    for (PointLatLng p in indexController.routePoints) {
      LatLng l = LatLng(p.latitude, p.longitude);
      pts.add(l);
    }
    return pts;
  }

  @override
  Widget build(BuildContext context) {
    print(
        "---------- rog mode is ${indexController.rog_mode.value.toString()}----------");

    final PopupController _popupController = PopupController();
    return Stack(
      children: [
        Obx(() => indexController.is_loading == true
            ? const Padding(
                padding: EdgeInsets.only(top: 60.0),
                child: CircularProgressIndicator(),
              )
            : FlutterMap(
                mapController: indexController.mapController,
                options: MapOptions(
                  maxZoom: 18.4,
                  onMapReady: () {
                    indexController.is_mapController_loaded.value = true;
                    subscription = indexController.mapController.mapEventStream
                        .listen((MapEvent mapEvent) {
                      if (mapEvent is MapEventMoveStart) {
                        //print(DateTime.now().toString() + ' [MapEventMoveStart] START');
                        // do something
                      }
                      if (mapEvent is MapEventMoveEnd &&
                          indexController.currentUser.isEmpty) {
                        //print(DateTime.now().toString() + ' [MapEventMoveStart] END');
                        indexController.loadLocationsBound();
                        //indexController.rogMapController!.move(c.center, c.zoom);
                      }
                    });
                  },
                  //center: LatLng(37.15319600454702, 139.58765950528198),
                  bounds: indexController.currentBound.isNotEmpty
                      ? indexController.currentBound[0]
                      : LatLngBounds.fromPoints([
                          LatLng(35.03999881162295, 136.40587119778962),
                          LatLng(36.642756778706904, 137.95226720406063)
                        ]),
                  zoom: 1,
                  interactiveFlags:
                      InteractiveFlag.pinchZoom | InteractiveFlag.drag,

                  onPositionChanged: (MapPosition pos, isvalue) {},
                  onTap: (_, __) => _popupController
                      .hideAllPopups(), // Hide popup when the map is tapped.
                ),
                children: [
                  const BaseLayer(),
                  Obx(
                    () => indexController.routePointLenght > 0
                        ? PolylineLayer(
                            polylines: [
                              Polyline(
                                  points: getPoints()!,
                                  strokeWidth: 6.0,
                                  color: Colors.indigo),
                            ],
                          )
                        : Container(),
                  ),
                  CurrentLocationLayer(),
                  indexController.locations.isNotEmpty &&
                          indexController.locations[0].collection.isNotEmpty
                      ? MarkerLayer(
                          markers:
                              indexController.locations[0].collection.map((i) {
                            print("i si ${i.properties!['location_id']}");

                            RegExp regex = RegExp(r'([.]*0)(?!.*\d)');
                            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.exactly(Anchor(108.0, 18.0)),
                              height: 32.0,
                              width: 120.0,
                              point: LatLng(p.geoSerie!.geoPoints[0].latitude,
                                  p.geoSerie!.geoPoints[0].longitude),
                              builder: (ctx) {
                                return getMarkerShape(i, context);
                              },
                            );
                          }).toList(),
                        )
                      : const Center(child: CircularProgressIndicator()),
                ],
              ))
      ],
    );
  }
}