small change

src/screens/InAppScreens/MapScreen/index.tsx

@@ -69,6 +69,7 @@ const generateFilter = (ids: number[]) => {
   return ids.length ? ['any', ...ids.map((id) => ['==', 'id', id])] : ['==', 'id', -1];
 };
 
+// to do refactor
 let regions_visited = {
   id: 'regions_visited',
   type: 'fill',
@@ -367,6 +368,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     }, [navigation])
   );
 
+  // to do refactor
   useEffect(() => {
     if (visitedRegionIds) {
       setRegionsVisited(visitedRegionIds.ids);
@@ -811,6 +813,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     }
   };
 
+  // to do
   const handleMarkerPress = async (event) => {
     const { features } = event;
     if (features?.length) {
@@ -930,6 +933,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
 
         <MapLibreGL.VectorSource
           id="nomadmania_series_cluster"
+          // to do
           tileUrlTemplates={[
             'https://maps.nomadmania.eu/tileserver/series_cluster/{z}/{x}/{y}.pbf'
           ]}
@@ -941,12 +945,11 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             id="series_layer_cluster_circle"
             sourceID={series_layer_cluster.source}
             sourceLayerID={series_layer_cluster['source-layer']}
-            // aboveLayerID={selected_region.id}
             style={{
-              circleRadius: 14, // Adjust radius as needed
-              circleColor: '#FFFFFF', // White background
-              circleStrokeColor: '#000000', // Black border
-              circleStrokeWidth: 2, // Border thickness
+              circleRadius: 14,
+              circleColor: '#FFFFFF',
+              circleStrokeColor: '#000000',
+              circleStrokeWidth: 2,
               circleOpacity: 1
             }}
             maxZoomLevel={series_layer_cluster.maxzoom}
@@ -957,15 +960,15 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             sourceLayerID={series_layer_cluster['source-layer']}
             aboveLayerID="series_layer_cluster_circle"
             style={{
-              textField: '{point_count}', // Cluster point count
+              textField: '{point_count}',
               textFont: ['Noto Sans Bold'],
-              textSize: 12, // Adjust text size
-              textColor: '#000000', // Text color
-              textHaloColor: '#FFFFFF', // White halo around text for better visibility
+              textSize: 12,
+              textColor: '#000000',
+              textHaloColor: '#FFFFFF',
               textHaloWidth: 1,
-              textAnchor: 'center', // Center text within the circle
-              textOffset: [0, 0], // No offset, directly center
-              textAllowOverlap: true // Allow overlap for clarity at higher zooms
+              textAnchor: 'center',
+              textOffset: [0, 0],
+              textAllowOverlap: true
             }}
             maxZoomLevel={series_layer_cluster.maxzoom}
           />
@@ -985,10 +988,10 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             minZoomLevel={series_layer.minzoom}
             maxZoomLevel={series_layer.maxzoom}
             style={{
-              circleRadius: 14, // Adjust the radius size as needed
-              circleColor: '#FFFFFF', // White circle
-              circleStrokeWidth: 2, // Black border width
-              circleStrokeColor: '#000000', // Black border color
+              circleRadius: 14,
+              circleColor: '#FFFFFF',
+              circleStrokeWidth: 2,
+              circleStrokeColor: '#000000',
               circleOpacity: 1
             }}
           />
@@ -1074,10 +1077,9 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         )}
         <MapLibreGL.Camera ref={cameraRef} />
         {location && (
-          <MapLibreGL.UserLocation
-            animated={true}
-            showsUserHeadingIndicator={true}
-          ></MapLibreGL.UserLocation>
+          <MapLibreGL.UserLocation animated={true} showsUserHeadingIndicator={true}>
+            {/* to do custom user location */}
+          </MapLibreGL.UserLocation>
         )}
       </MapLibreGL.MapView>