Fixed map markers unicity

Improved clustering radius
Renamed cluster component class

src/components/map/ClusterMap.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import MapView from 'react-native-map-clustering';
-import MapCluster from './cluster/MapCluster';
+import ClusterComponent from './cluster/ClusterComponent';
 import { Region } from 'react-native-maps';
 import ChargingStation from '../../types/ChargingStation';
 import Site from '../../types/Site';
@@ -48,11 +48,11 @@ export default class ClusterMap<T extends Localizable> extends React.Component<P
             showsCompass={false}
             showsUserLocation={true}
             zoomControlEnabled={false}
+            radius={this.computeRadius(initialRegion.latitudeDelta)}
             toolbarEnabled={false}
             spiralEnabled={true}
-            radius={5}
             tracksViewChanges={false}
-            renderCluster={(cluster) => <MapCluster cluster={cluster} />}
+            renderCluster={(cluster) => <ClusterComponent key={cluster.id} cluster={cluster} />}
             spiderLineColor={commonColors.textColor}
             mapType={satelliteMap ? 'satellite' : 'standard'}
             initialRegion={initialRegion}
@@ -66,4 +66,13 @@ export default class ClusterMap<T extends Localizable> extends React.Component<P
       </View>
     )
   }
+
+  private computeRadius(latitudeDelta: number): number {
+    if(latitudeDelta <= 0.0005) {
+      return 5
+    } else if(latitudeDelta <= 0.001 ) {
+      return 20
+    }
+    return 30
+  }
 }

src/components/map/cluster/MapCluster.tsx → src/components/map/cluster/ClusterComponent.tsx

@@ -2,22 +2,22 @@ import React from 'react';
 import { Marker } from 'react-native-maps';
 import { View } from 'native-base';
 import { Text } from 'react-native';
-import computeStyleSheet from './MapClusterStyle';
+import computeStyleSheet from './ClusterComponentStyle';
 
 export interface Props {
   cluster: any;
 }
 
 interface State {}
 
-export default class MapCluster extends React.Component<Props, State> {
+export default class ClusterComponent extends React.Component<Props, State> {
 
   public render() {
     const style = computeStyleSheet();
     const { geometry, onPress, id, properties } = this.props?.cluster;
     return (
       <Marker onPress={onPress} tracksViewChanges={false} key={id} coordinate={{longitude: geometry.coordinates[0], latitude: geometry.coordinates[1]}}>
-        <View style={style.cluster}><Text>{properties?.point_count}</Text></View>
+        <View style={style.cluster}><Text style={style.text}>{properties?.point_count}</Text></View>
       </Marker>
     );
   }

src/components/map/cluster/MapClusterStyle.tsx → src/components/map/cluster/ClusterComponentStyle.tsx

@@ -19,6 +19,10 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       borderWidth: 2,
       borderColor: commonColor.mapClusterBorder,
       zIndex: 1
+    },
+    text: {
+      fontSize: '15@s',
+      color: commonColor.textColor
     }
   });
   const portraitStyles = {};

src/provider/CentralServerProvider.tsx

@@ -498,7 +498,7 @@ export default class CentralServerProvider {
       headers: this.buildSecuredHeaders(),
       params
     });
-    return result.data;
+    return result?.data;
   }
 
   public async saveUserMobileToken(params: { id: string; mobileToken: string; mobileOS: string }): Promise<ActionResponse> {

src/screens/charging-stations/list/ChargingStations.tsx

@@ -3,7 +3,6 @@ import { Container, Icon, Spinner, View } from 'native-base';
 import React from 'react';
 import {
   BackHandler, Image, ImageStyle,
-  NativeEventSubscription,
   Platform,
   ScrollView, TouchableOpacity,
 } from 'react-native';
@@ -475,7 +474,8 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
           satelliteMap={satelliteMap}
           renderMarker={(chargingStation, index) => (
             <Marker
-              key={`${chargingStation.id}${index}${chargingStation.chargingStationURL}`}
+              key={chargingStation.id}
+              identifier={chargingStation.id}
               tracksViewChanges={false}
               coordinate={{ longitude: chargingStation.coordinates[0], latitude: chargingStation.coordinates[1] }}
               title={chargingStation.id}