Improved map for sites and siteAreas

src/components/fab/FabComponentStyles.tsx

@@ -16,6 +16,7 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
       justifyContent: 'center',
       bottom: 0,
       right: 0,
+      marginTop: '14@s',
       zIndex: 1,
       elevation: 4,
       backgroundColor: commonColor.primary,

src/components/map/ClusterMap.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import MapView from 'react-native-map-clustering';
+import MapCluster from './cluster/MapCluster';
+import { Region } from 'react-native-maps';
+import ChargingStation from '../../types/ChargingStation';
+import Site from '../../types/Site';
+import SiteArea from '../../types/SiteArea';
+import Utils from '../../utils/Utils';
+import ThemeManager from '../../custom-theme/ThemeManager';
+import computeStyleSheet from './ClusterMapStyle';
+import { View } from 'native-base';
+
+interface State {}
+
+type Localizable = ChargingStation | Site | SiteArea;
+
+export interface Props<T> {
+  items: T[]
+  renderMarker: (item: T, index: number) => React.ReactElement;
+  initialRegion: Region;
+  onMapRegionChangeComplete: (region: Region) => void;
+  satelliteMap?: boolean;
+}
+
+export default class ClusterMap<T extends Localizable> extends React.Component<Props<T>, State> {
+  public props: Props<T>;
+  public state: State;
+  private darkMapTheme = require('../../utils/map/google-maps-night-style.json');
+
+  public constructor(props: Props<T>) {
+    super(props);
+    this.state = {
+      satelliteMap: false
+    }
+  }
+
+  public render() {
+    const { items, renderMarker, initialRegion, onMapRegionChangeComplete, satelliteMap } = this.props;
+    const commonColors = Utils.getCurrentCommonColor();
+    const isDarkModeEnabled = ThemeManager.getInstance()?.isThemeTypeIsDark();
+    const style = computeStyleSheet();
+    return (
+      <View style={style.map}>
+        {initialRegion && (
+          <MapView
+            customMapStyle={isDarkModeEnabled ? this.darkMapTheme : null}
+            style={style.map}
+            showsCompass={false}
+            showsUserLocation={true}
+            zoomControlEnabled={false}
+            toolbarEnabled={false}
+            spiralEnabled={true}
+            radius={5}
+            tracksViewChanges={false}
+            renderCluster={(cluster) => <MapCluster cluster={cluster} />}
+            spiderLineColor={commonColors.textColor}
+            mapType={satelliteMap ? 'satellite' : 'standard'}
+            initialRegion={initialRegion}
+            onRegionChangeComplete={onMapRegionChangeComplete}
+          >
+            {items.map((item, index) => (
+              renderMarker?.(item, index)
+            ))}
+          </MapView>
+        )}
+      </View>
+    )
+  }
+}

src/components/map/ClusterMapStyle.tsx

@@ -0,0 +1,19 @@
+import deepmerge from 'deepmerge';
+import { StyleSheet } from 'react-native';
+import ResponsiveStylesSheet from 'react-native-responsive-stylesheet';
+import { ScaledSheet } from 'react-native-size-matters';
+
+export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
+  const commonStyles = ScaledSheet.create({
+    map: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+  const portraitStyles = {};
+  const landscapeStyles = {};
+  return ResponsiveStylesSheet.createOriented({
+    landscape: deepmerge(commonStyles, landscapeStyles) as StyleSheet.NamedStyles<any>,
+    portrait: deepmerge(commonStyles, portraitStyles) as StyleSheet.NamedStyles<any>
+  });
+}

src/components/map/cluster/MapCluster.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Marker } from 'react-native-maps';
+import { View } from 'native-base';
+import { Text } from 'react-native';
+import computeStyleSheet from './MapClusterStyle';
+
+export interface Props {
+  cluster: any;
+}
+
+interface State {}
+
+export default class MapCluster 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>
+      </Marker>
+    );
+  }
+}

src/components/map/cluster/MapClusterStyle.tsx

@@ -0,0 +1,30 @@
+import deepmerge from 'deepmerge';
+import { StyleSheet } from 'react-native';
+import ResponsiveStylesSheet from 'react-native-responsive-stylesheet';
+import { ScaledSheet } from 'react-native-size-matters';
+
+import Utils from '../../../utils/Utils';
+
+export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
+  const commonColor = Utils.getCurrentCommonColor();
+  const commonStyles = ScaledSheet.create({
+    cluster: {
+      backgroundColor: commonColor.listItemBackground,
+      padding: '10@s',
+      width: '50@s',
+      height: '50@s',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '50@s',
+      borderWidth: 2,
+      borderColor: commonColor.mapClusterBorder,
+      zIndex: 1
+    }
+  });
+  const portraitStyles = {};
+  const landscapeStyles = {};
+  return ResponsiveStylesSheet.createOriented({
+    landscape: deepmerge(commonStyles, landscapeStyles) as StyleSheet.NamedStyles<any>,
+    portrait: deepmerge(commonStyles, portraitStyles) as StyleSheet.NamedStyles<any>
+  });
+}