update app/pages/home/maps/Maps3.js

Strides-SPAPP/app/pages/home/maps/Maps3.js

@@ -8,6 +8,7 @@ import MapView from "react-native-map-clustering";
 import { MyCluster, MyMarker } from './Cluster';
 import VbeClusterMap from 'vbe-cluster-map';
 import app from '../../../../app.json';
+import { StyleSheet } from 'react-native';
 
 export default Maps3 = ({ region, onMapReady, stopList, useApplesMap, showUserLocation=true, onMarkerPress }) => {
   const mapRef = useRef();
@@ -65,8 +66,15 @@ export default Maps3 = ({ region, onMapReady, stopList, useApplesMap, showUserLo
   const openClusterMarker = async (latlng) => {
     var camera = await mapRef.current.getCamera();
     camera.center = latlng
-    camera.zoom = camera.zoom + 2
-    //console.log('camera', camera);
+    if (camera.zoom < 10) {
+      camera.zoom = 10;
+    }
+    if (camera.zoom > 15) {
+      camera.zoom += 1
+    } else {
+      camera.zoom += 2
+    }
+    console.log('camera', camera);
     mapRef.current.animateCamera(camera, 300);
   }
 
@@ -75,22 +83,32 @@ export default Maps3 = ({ region, onMapReady, stopList, useApplesMap, showUserLo
     ? <MapView
         ref={mapRef}
         superClusterRef={superClusterRef}
-        style={ui.flex1}
+        style={StyleSheet.absoluteFillObject}
         minZoom={5}
-        maxZoom={16}
+        maxZoom={20}
         radius={45}
-        extent={app.modules.nationally ? 100 : 512}
-        nodeSize={64}
-        provider={useApplesMap ? PROVIDER_DEFAULT : PROVIDER_GOOGLE}
+        extent={100}
+        nodeSize={128}
+        showsIndoors={false}
+        showsTraffic={false}
+        toolbarEnabled={false}
+        initialRegion={region}
+        tintColor={colorAccent}
         onMapReady={onMapReady}
+        poiClickEnabled={false}
+        zoomControlEnabled={false}
+        tracksViewChanges={true}
+        showsMyLocationButton={!ready}
+        showsIndoorLevelPicker={false}
         showsUserLocation={showUserLocation}
-        initialRegion={region}
-        renderCluster={(info) => renderCluster(info)}>
+        followsUserLocation={showUserLocation}
+        renderCluster={info => renderCluster(info)}
+        provider={useApplesMap ? PROVIDER_DEFAULT : PROVIDER_GOOGLE}>
       { stopList.map((marker, index) => {
         return (
           <MyMarker
             key={index}
-            {...marker}
+            id={marker.id}
             coordinate={marker}
             onPress={() => onMarkerPress(marker.id)}
           />
@@ -99,10 +117,14 @@ export default Maps3 = ({ region, onMapReady, stopList, useApplesMap, showUserLo
     </MapView>
   : <VbeClusterMap
       ref={mapRef}
-      style={ui.flex1}
+      style={StyleSheet.absoluteFill}
       region={region}
       data={stopList}
       animation={true}
+      showCompass={false}
+      showTraffic={false}
+      showIndoors={false}
+      showIndoorLevelPicker={false}
       onMapReady={onMapReady}
       onMarkerPress={e => onMarkerPress(e.id)}
       showUserLocation={showUserLocation}