Add onPress Marker & add Callout Component (#23)

kasajei · imurakoji-coorde · web-flow · commit d82563de3049 · 2020-08-01T16:16:41.000+08:00
* Support onPress Marker

* add Callout component

* set zoom from atitudeDelta

* add animateCamera and fix animateToCenter

* add getCamera

* Change the zoom method

* update .gitignore for vscode

* remove unused ref

Co-authored-by: imura koji &lt;1477017+coorde@users.noreply.github.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ npm-debug.log
 yarn-error.log
 
 dist
+/.vscode
diff --git a/docs/stories/index.js b/docs/stories/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Text } from 'react-native';
 import MapView from 'react-native-maps';
 
 import { storiesOf } from '@storybook/react';
@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 storiesOf('MapView', module)
   .add('basic', () => (
     <View style={styles.container}>
-      <MapView region={{ latitude: 48.86, longitude: 2.34 }} />
+      <MapView defaultZoom={15} region={{ latitude: 48.86, longitude: 2.34 }} />
+      <MapView defaultZoom={10} region={{ latitude: 48.86, longitude: 2.34 }} />
     </View>
   ))
   .add('onRegionChangeComplete', () => (
@@ -27,7 +28,12 @@ storiesOf('MapView', module)
   .add('options', () => (
     <View style={styles.container}>
       <MapView
-        initialRegion={{ latitude: 48.86, longitude: 2.34 }}
+        initialRegion={{
+          latitude: 48.86,
+          longitude: 2.34,
+          latitudeDelta: 0.1,
+          longitudeDelta: 0.1,
+        }}
         options={{
           zoomControlOptions: {
             position: window.google.maps.ControlPosition.RIGHT_CENTER,
@@ -40,17 +46,62 @@ storiesOf('MapView', module)
     </View>
   ));
 
-storiesOf('Marker', module).add('basic', () => (
-  <View style={styles.container}>
-    <MapView region={{ latitude: 48.88, longitude: 2.32 }}>
-      <MapView.Marker
-        title="BAM"
-        description="Shape the future of mobile with us"
-        coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
-      />
-    </MapView>
-  </View>
-));
+storiesOf('Marker', module)
+  .add('basic', () => (
+    <View style={styles.container}>
+      <MapView ref={map => (this.map = map)} region={{ latitude: 48.88, longitude: 2.32 }}>
+        <MapView.Marker
+          title="BAM"
+          description="Shape the future of mobile with us"
+          coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
+          onPress={() => {
+            this.map.animateToRegion({
+              latitude: 48.8828463,
+              longitude: 2.3229091,
+              latitudeDelta: 0.1,
+              longitudeDelta: 0.1,
+            });
+          }}
+        />
+        <MapView.Marker
+          title="BAM"
+          description="Shape the future of mobile with us"
+          coordinate={{ latitude: 48.8828463, longitude: 2.3 }}
+          onPress={() => {
+            console.log(this.map.getCamera());
+            const zoom = this.map.getCamera().zoom === 20 ? 15 : 20;
+            this.map.animateCamera({
+              zoom,
+              center: {
+                lat: 48.8828463,
+                lng: 2.3,
+              },
+            });
+          }}
+        />
+      </MapView>
+    </View>
+  ))
+  .add('Callout', () => (
+    <View style={styles.container}>
+      <MapView ref={map => (this.map = map)} region={{ latitude: 48.88, longitude: 2.32 }}>
+        <MapView.Marker
+          title="BAM"
+          ref={marker => (this.marker = marker)}
+          description="Shape the future of mobile with us"
+          coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
+          onPress={() => {
+            this.marker1.showCallout();
+          }}>
+          <MapView.Callout onPress={action('onPress callout')}>
+            <View style={{ padding: 10 }}>
+              <Text>Paris</Text>
+            </View>
+          </MapView.Callout>
+        </MapView.Marker>
+      </MapView>
+    </View>
+  ));
 
 const styles = StyleSheet.create({
   container: {
diff --git a/src/Callout.js b/src/Callout.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { InfoWindow } from 'react-google-maps';
+
+class MapViewCallout extends Component {
+  render() {
+    const { onPress, ...rest } = this.props;
+    return (
+      <TouchableOpacity onPress={onPress}>
+        <InfoWindow onCloseClick={this.props.hideCallout} {...rest}>
+          {this.props.children}
+        </InfoWindow>
+      </TouchableOpacity>
+    );
+  }
+}
+
+export default MapViewCallout;
diff --git a/src/Marker.js b/src/Marker.js
@@ -2,14 +2,29 @@ import React, { Component } from 'react';
 import { Marker } from 'react-google-maps';
 
 class MapViewMarker extends Component {
+  state = {
+    isOpen: false,
+  };
+  showCallout() {
+    this.setState({ isOpen: true });
+  }
+  hideCallout() {
+    this.setState({ isOpen: false });
+  }
   render() {
-    const { description, title, coordinate, ...rest } = this.props;
+    const { description, title, coordinate, onPress, ...rest } = this.props;
+
+    const childrenWithProps = React.Children.map(this.props.children, child => {
+      return React.cloneElement(child, { hideCallout: this.hideCallout.bind(this) });
+    });
     return (
       <Marker
         {...rest}
         title={description ? `${title}\n${description}` : title}
         position={{ lat: coordinate.latitude, lng: coordinate.longitude }}
-      />
+        onClick={onPress}>
+        {this.state.isOpen && childrenWithProps}
+      </Marker>
     );
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,7 @@ import { View, StyleSheet } from 'react-native';
 import { withGoogleMap, GoogleMap } from 'react-google-maps';
 import Marker from './Marker';
 import Polyline from './Polyline';
+import Callout from './Callout';
 
 const GoogleMapContainer = withGoogleMap(props => (
   <GoogleMap {...props} ref={props.handleMapMounted} />
@@ -18,8 +19,23 @@ class MapView extends Component {
     this.props.onMapReady && this.props.onMapReady();
   };
 
+  getCamera = () => {
+    return {
+      zoom: this.map.getZoom(),
+      center: this.map.getCenter(),
+      heading: this.map.getHeading(),
+    };
+  };
+
+  animateCamera(camera) {
+    this.setState({ zoom: camera.zoom });
+    this.setState({ center: camera.center });
+  }
+
   animateToRegion(coordinates) {
-    this.setState({ center: { lat: coordinates.latitude, lng: coordinates.longitude } });
+    this.setState({
+      center: { lat: coordinates.latitude, lng: coordinates.longitude },
+    });
   }
 
   onDragEnd = () => {
@@ -34,36 +50,46 @@ class MapView extends Component {
   };
 
   render() {
-    const { region, initialRegion, onRegionChange, onPress, options } = this.props;
+    const { region, initialRegion, onRegionChange, onPress, options, defaultZoom } = this.props;
     const { center } = this.state;
     const style = this.props.style || styles.container;
 
-    const centerProps = region
+    const googleMapProps = center
+      ? { center }
+      : region
       ? {
           center: {
             lat: region.latitude,
             lng: region.longitude,
           },
         }
-      : center
-      ? { center }
       : {
           defaultCenter: {
             lat: initialRegion.latitude,
             lng: initialRegion.longitude,
           },
         };
-
+    const zoom =
+      defaultZoom ||
+      (region && region.latitudeDelta
+        ? Math.round(Math.log(360 / region.latitudeDelta) / Math.LN2)
+        : initialRegion && initialRegion.latitudeDelta
+        ? Math.round(Math.log(360 / initialRegion.latitudeDelta) / Math.LN2)
+        : 15);
+    googleMapProps['zoom'] = this.state.zoom ? this.state.zoom : zoom;
     return (
       <View style={style}>
         <GoogleMapContainer
           handleMapMounted={this.handleMapMounted}
           containerElement={<div style={{ height: '100%' }} />}
           mapElement={<div style={{ height: '100%' }} />}
-          {...centerProps}
+          onZoomChanged={() => {
+            this.setState({ zoom: this.map.getZoom() });
+          }}
+          {...googleMapProps}
           onDragStart={onRegionChange}
           onIdle={this.onDragEnd}
-          defaultZoom={15}
+          defaultZoom={zoom}
           onClick={onPress}
           options={options}>
           {this.props.children}
@@ -75,6 +101,7 @@ class MapView extends Component {
 
 MapView.Marker = Marker;
 MapView.Polyline = Polyline;
+MapView.Callout = Callout;
 
 const styles = StyleSheet.create({
   container: {

Original file line number	Diff line number	Diff line change
`@@ -9,3 +9,4 @@ npm-debug.log`
`9`	`9`	`yarn-error.log`
`10`	`10`
`11`	`11`	`dist`
	`12`	`+/.vscode`