More improvements

1 files changed, 23 insertions, 6 deletions

diff --git a/src/Components/Map.tsx b/src/Components/Map.tsx
index bb0b660..db0bed9 100644
--- a/src/Components/Map.tsx
+++ b/src/Components/Map.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { StyleSheet, View, Dimensions, ActivityIndicator } from 'react-native';
-import MapView, { Marker, Region, UrlTile } from 'react-native-maps';
+import MapView, { Marker, Region } from 'react-native-maps';
 import { connect } from 'redux-su';
 import { NavigationActions } from 'react-navigation';
 
@@ -10,6 +10,7 @@ import PortalPanel from './PortalPanel';
 import { getBottomSpace } from '../helper';
 import actions from '../Actions/actions';
 import { LatLng } from '../Api/interfaces';
+import { getZoomByRegion, getDataZoomForMapZoom } from '../Api/api';
 
 const { width, height } = Dimensions.get("screen")
 const draggableRange = {
@@ -32,6 +33,7 @@ class Map extends Component<Props, State> {
         this.state = {
             user: undefined,
             region: null,
+            dataZoom: 15,
         }
     }
     componentDidMount() {
@@ -63,7 +65,9 @@ class Map extends Component<Props, State> {
         )
     }
     onRegionChange = (region: Region) => {
-        this.setState({ region })
+        const zoom = getZoomByRegion(width, region)
+        const dataZoom = getDataZoomForMapZoom(zoom);
+        this.setState({ region, dataZoom })
         setImmediate(() => this.load(false))
     }
 
@@ -79,7 +83,15 @@ class Map extends Component<Props, State> {
     }
 
     onPortalClick = (guid: string, coords: LatLng) => {
-        this.setState({ selectedPortal: { guid, coords } })
+        if (this.state.selectedPortal && this.state.selectedPortal.guid == guid) {
+            this.setState({ selectedPortal: false })
+        } else {
+            this.setState({ selectedPortal: { guid, coords } })
+        }
+    }
+
+    onPortalDismiss = () => {
+        this.setState({ selectedPortal: false })
     }
 
     onOpenPortal = (guid: string, coords: LatLng) => {
@@ -115,8 +127,13 @@ class Map extends Component<Props, State> {
                     shouldRasterizeIOS
                     renderToHardwareTextureAndroid
                 >
-                    <MapObjects onPortalClick={this.onPortalClick} region={this.state.region || initialRegion} />
-                    {this.state.selectedPortal && <Marker cluster={false} coordinate={this.state.selectedPortal.coords} />}
+                    <MapObjects
+                        onPortalClick={this.onPortalClick}
+                        region={this.state.region || initialRegion}
+                        levels={this.props.settings.filterLevel}
+                        zoom={this.state.dataZoom}
+                    />
+                    {this.state.selectedPortal && <Marker cluster={false} coordinate={this.state.selectedPortal.coords} onPress={this.onPortalDismiss} />}
                 </MapView>
                 <MapOverlay
                     goToMe={this.goToMe}
@@ -136,4 +153,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default connect({ 'entities': 'entities' }, actions)(Map)
\ No newline at end of file
+export default connect({ 'entities': 'entities', 'settings': 'settings' }, actions)(Map)
\ No newline at end of file