Touchable Container in MapBox

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart' as ll;

class DynamicMap extends StatefulWidget {
  const DynamicMap(
      {super.key,
      this.width = 300.0,
      this.height = 200.0,
      this.points,
      required this.accessToken,
      required this.startingPoint,
      required this.startingZoom});

  final double width;
  final double height;
  final List<LatLng>? points;
  final String accessToken;
  final LatLng startingPoint;
  final double startingZoom;

  @override
  State<DynamicMap> createState() => _DynamicMapState();
}

class _DynamicMapState extends State<DynamicMap> {
  final _mapController = MapController();
  @override
  void initState() {
    super.initState();
  }

  List<Marker> addMarkersToMap(List<LatLng>? points) {
    List<Marker> allMarkers = [];
    if (points != null) {
      for (LatLng point in points) {
        allMarkers.add(
          Marker(
            point: ll.LatLng(point.latitude, point.longitude),
            child: Container(
              width: 40.0,
              height: 40.0,
              color: Colors.white,
              // builder: (context) => GestureDetector(
              //   onTap: () {
              //     print(
              //       'Marker at ${point.latitude}, ${point.longitude} tapped!');
              //   },
              // ),
              child: Icon(Icons.location_pin, color: Colors.red),
            ),
          ),

          // alignment: Alignment.bottomCenter
          // ),
        );
      }
    }
    _mapController.move(
        ll.LatLng(points!.last.latitude, points.last.longitude), 3);
    return allMarkers;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: FlutterMap(
        mapController: _mapController,
        options: MapOptions(
          interactionOptions: InteractionOptions(
              flags: InteractiveFlag.all & ~InteractiveFlag.rotate
              // flags: InteractiveFlag.drag | InteractiveFlag.pinchZoom,
              ),
          maxZoom: 20,
          minZoom: 2,
          keepAlive: true,
          initialCenter: ll.LatLng(
              widget.startingPoint.latitude, widget.startingPoint.longitude),
          initialZoom: widget.startingZoom,
        ),
        children: [
          TileLayer(
            urlTemplate:
                'https://api.mapbox.com/styles/v1/stefanosonlife/clxds7cne001r01qn2tox0r44/tiles/256/{z}/{x}/{y}@2x?access_token=HERE GOES THE ACCESS TOKEN',
          ),
          if (FFAppState().placesFromSearch.isNotEmpty)
            MarkerClusterLayerWidget(
              options: MarkerClusterLayerOptions(
                maxClusterRadius: 45,
                size: const Size(40, 40),
                alignment: Alignment.center,
                padding: const EdgeInsets.all(50),
                maxZoom: 15,
                markers: addMarkersToMap(FFAppState().placesFromSearch),
                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),
                      ),
                    ),
                  );
                },
              ),
            ),
          // MarkerLayer(markers: addMarkersToMap(FFAppState().placesFromSearch))
        ],
      ),
    );
  }
}