Skip to content

Commit d82563d

Browse files
kasajeiimurakoji-coorde
kasajei
and
imurakoji-coorde
authored
Add onPress Marker & add Callout Component (#23)
* 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 <1477017+coorde@users.noreply.github.com>
1 parent 8f52ff1 commit d82563d

5 files changed

Lines changed: 136 additions & 24 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ npm-debug.log
99
yarn-error.log
1010

1111
dist
12+
/.vscode

‎docs/stories/index.js‎

Lines changed: 65 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { View, StyleSheet } from 'react-native';
2+
import { View, StyleSheet, Text } from 'react-native';
33
import MapView from 'react-native-maps';
44

55
import { storiesOf } from '@storybook/react';
@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
88
storiesOf('MapView', module)
99
.add('basic', () => (
1010
<View style={styles.container}>
11-
<MapView region={{ latitude: 48.86, longitude: 2.34 }} />
11+
<MapView defaultZoom={15} region={{ latitude: 48.86, longitude: 2.34 }} />
12+
<MapView defaultZoom={10} region={{ latitude: 48.86, longitude: 2.34 }} />
1213
</View>
1314
))
1415
.add('onRegionChangeComplete', () => (
@@ -27,7 +28,12 @@ storiesOf('MapView', module)
2728
.add('options', () => (
2829
<View style={styles.container}>
2930
<MapView
30-
initialRegion={{ latitude: 48.86, longitude: 2.34 }}
31+
initialRegion={{
32+
latitude: 48.86,
33+
longitude: 2.34,
34+
latitudeDelta: 0.1,
35+
longitudeDelta: 0.1,
36+
}}
3137
options={{
3238
zoomControlOptions: {
3339
position: window.google.maps.ControlPosition.RIGHT_CENTER,
@@ -40,17 +46,62 @@ storiesOf('MapView', module)
4046
</View>
4147
));
4248

43-
storiesOf('Marker', module).add('basic', () => (
44-
<View style={styles.container}>
45-
<MapView region={{ latitude: 48.88, longitude: 2.32 }}>
46-
<MapView.Marker
47-
title="BAM"
48-
description="Shape the future of mobile with us"
49-
coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
50-
/>
51-
</MapView>
52-
</View>
53-
));
49+
storiesOf('Marker', module)
50+
.add('basic', () => (
51+
<View style={styles.container}>
52+
<MapView ref={map => (this.map = map)} region={{ latitude: 48.88, longitude: 2.32 }}>
53+
<MapView.Marker
54+
title="BAM"
55+
description="Shape the future of mobile with us"
56+
coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
57+
onPress={() => {
58+
this.map.animateToRegion({
59+
latitude: 48.8828463,
60+
longitude: 2.3229091,
61+
latitudeDelta: 0.1,
62+
longitudeDelta: 0.1,
63+
});
64+
}}
65+
/>
66+
<MapView.Marker
67+
title="BAM"
68+
description="Shape the future of mobile with us"
69+
coordinate={{ latitude: 48.8828463, longitude: 2.3 }}
70+
onPress={() => {
71+
console.log(this.map.getCamera());
72+
const zoom = this.map.getCamera().zoom === 20 ? 15 : 20;
73+
this.map.animateCamera({
74+
zoom,
75+
center: {
76+
lat: 48.8828463,
77+
lng: 2.3,
78+
},
79+
});
80+
}}
81+
/>
82+
</MapView>
83+
</View>
84+
))
85+
.add('Callout', () => (
86+
<View style={styles.container}>
87+
<MapView ref={map => (this.map = map)} region={{ latitude: 48.88, longitude: 2.32 }}>
88+
<MapView.Marker
89+
title="BAM"
90+
ref={marker => (this.marker = marker)}
91+
description="Shape the future of mobile with us"
92+
coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
93+
onPress={() => {
94+
this.marker1.showCallout();
95+
}}>
96+
<MapView.Callout onPress={action('onPress callout')}>
97+
<View style={{ padding: 10 }}>
98+
<Text>Paris</Text>
99+
</View>
100+
</MapView.Callout>
101+
</MapView.Marker>
102+
</MapView>
103+
</View>
104+
));
54105

55106
const styles = StyleSheet.create({
56107
container: {

‎src/Callout.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { Component } from 'react';
2+
import { TouchableOpacity } from 'react-native';
3+
import { InfoWindow } from 'react-google-maps';
4+
5+
class MapViewCallout extends Component {
6+
render() {
7+
const { onPress, ...rest } = this.props;
8+
return (
9+
<TouchableOpacity onPress={onPress}>
10+
<InfoWindow onCloseClick={this.props.hideCallout} {...rest}>
11+
{this.props.children}
12+
</InfoWindow>
13+
</TouchableOpacity>
14+
);
15+
}
16+
}
17+
18+
export default MapViewCallout;

‎src/Marker.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,29 @@ import React, { Component } from 'react';
22
import { Marker } from 'react-google-maps';
33

44
class MapViewMarker extends Component {
5+
state = {
6+
isOpen: false,
7+
};
8+
showCallout() {
9+
this.setState({ isOpen: true });
10+
}
11+
hideCallout() {
12+
this.setState({ isOpen: false });
13+
}
514
render() {
6-
const { description, title, coordinate, ...rest } = this.props;
15+
const { description, title, coordinate, onPress, ...rest } = this.props;
16+
17+
const childrenWithProps = React.Children.map(this.props.children, child => {
18+
return React.cloneElement(child, { hideCallout: this.hideCallout.bind(this) });
19+
});
720
return (
821
<Marker
922
{...rest}
1023
title={description ? `${title}\n${description}` : title}
1124
position={{ lat: coordinate.latitude, lng: coordinate.longitude }}
12-
/>
25+
onClick={onPress}>
26+
{this.state.isOpen && childrenWithProps}
27+
</Marker>
1328
);
1429
}
1530
}

‎src/index.js‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { View, StyleSheet } from 'react-native';
33
import { withGoogleMap, GoogleMap } from 'react-google-maps';
44
import Marker from './Marker';
55
import Polyline from './Polyline';
6+
import Callout from './Callout';
67

78
const GoogleMapContainer = withGoogleMap(props => (
89
<GoogleMap {...props} ref={props.handleMapMounted} />
@@ -18,8 +19,23 @@ class MapView extends Component {
1819
this.props.onMapReady && this.props.onMapReady();
1920
};
2021

22+
getCamera = () => {
23+
return {
24+
zoom: this.map.getZoom(),
25+
center: this.map.getCenter(),
26+
heading: this.map.getHeading(),
27+
};
28+
};
29+
30+
animateCamera(camera) {
31+
this.setState({ zoom: camera.zoom });
32+
this.setState({ center: camera.center });
33+
}
34+
2135
animateToRegion(coordinates) {
22-
this.setState({ center: { lat: coordinates.latitude, lng: coordinates.longitude } });
36+
this.setState({
37+
center: { lat: coordinates.latitude, lng: coordinates.longitude },
38+
});
2339
}
2440

2541
onDragEnd = () => {
@@ -34,36 +50,46 @@ class MapView extends Component {
3450
};
3551

3652
render() {
37-
const { region, initialRegion, onRegionChange, onPress, options } = this.props;
53+
const { region, initialRegion, onRegionChange, onPress, options, defaultZoom } = this.props;
3854
const { center } = this.state;
3955
const style = this.props.style || styles.container;
4056

41-
const centerProps = region
57+
const googleMapProps = center
58+
? { center }
59+
: region
4260
? {
4361
center: {
4462
lat: region.latitude,
4563
lng: region.longitude,
4664
},
4765
}
48-
: center
49-
? { center }
5066
: {
5167
defaultCenter: {
5268
lat: initialRegion.latitude,
5369
lng: initialRegion.longitude,
5470
},
5571
};
56-
72+
const zoom =
73+
defaultZoom ||
74+
(region && region.latitudeDelta
75+
? Math.round(Math.log(360 / region.latitudeDelta) / Math.LN2)
76+
: initialRegion && initialRegion.latitudeDelta
77+
? Math.round(Math.log(360 / initialRegion.latitudeDelta) / Math.LN2)
78+
: 15);
79+
googleMapProps['zoom'] = this.state.zoom ? this.state.zoom : zoom;
5780
return (
5881
<View style={style}>
5982
<GoogleMapContainer
6083
handleMapMounted={this.handleMapMounted}
6184
containerElement={<div style={{ height: '100%' }} />}
6285
mapElement={<div style={{ height: '100%' }} />}
63-
{...centerProps}
86+
onZoomChanged={() => {
87+
this.setState({ zoom: this.map.getZoom() });
88+
}}
89+
{...googleMapProps}
6490
onDragStart={onRegionChange}
6591
onIdle={this.onDragEnd}
66-
defaultZoom={15}
92+
defaultZoom={zoom}
6793
onClick={onPress}
6894
options={options}>
6995
{this.props.children}
@@ -75,6 +101,7 @@ class MapView extends Component {
75101

76102
MapView.Marker = Marker;
77103
MapView.Polyline = Polyline;
104+
MapView.Callout = Callout;
78105

79106
const styles = StyleSheet.create({
80107
container: {

0 commit comments

Comments
 (0)