|
@@ -0,0 +1,90 @@
|
|
|
|
|
+import React, { Component } from 'react';
|
|
|
|
|
+import PropTypes from 'prop-types';
|
|
|
|
|
+import { View, ViewPropTypes, requireNativeComponent } from 'react-native';
|
|
|
|
|
+
|
|
|
|
|
+const viewPropTypes = ViewPropTypes || View.propTypes;
|
|
|
|
|
+
|
|
|
|
|
+const propTypes = {
|
|
|
|
|
+ ...viewPropTypes,
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Callback that is called continuously when the user is dragging the map.
|
|
|
|
|
+ */
|
|
|
|
|
+ style: viewPropTypes.style,
|
|
|
|
|
+ region: PropTypes.shape({
|
|
|
|
|
+ latitude: PropTypes.number.isRequired,
|
|
|
|
|
+ longitude: PropTypes.number.isRequired,
|
|
|
|
|
+ latitudeDelta: PropTypes.number.isRequired,
|
|
|
|
|
+ longitudeDelta: PropTypes.number.isRequired,
|
|
|
|
|
+ zoom: PropTypes.number
|
|
|
|
|
+ }),
|
|
|
|
|
+ data: PropTypes.array,
|
|
|
|
|
+ animation: PropTypes.bool,
|
|
|
|
|
+ showUserLocation: PropTypes.bool,
|
|
|
|
|
+ moveOnMarkerPress: PropTypes.bool,
|
|
|
|
|
+ onMapReady: PropTypes.func,
|
|
|
|
|
+ onMarkerPress: PropTypes.func
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const VbeClusterView = requireNativeComponent('VbeClusterMap', propTypes);
|
|
|
|
|
+
|
|
|
|
|
+class VbeClusterMap extends Component {
|
|
|
|
|
+
|
|
|
|
|
+ constructor(props) {
|
|
|
|
|
+ super(props);
|
|
|
|
|
+ this.state = {
|
|
|
|
|
+ mapReady: false
|
|
|
|
|
+ }
|
|
|
|
|
+ this.map;
|
|
|
|
|
+ this._onMapReady = this._onMapReady.bind(this);
|
|
|
|
|
+ this._onMarkerPress = this._onMarkerPress.bind(this);
|
|
|
|
|
+ this.moveCamera = this.moveCamera.bind(this);
|
|
|
|
|
+ this.showUserLocation = this.showUserLocation.bind(this);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ _onMapReady() {
|
|
|
|
|
+ this.setState({
|
|
|
|
|
+ mapReady: true
|
|
|
|
|
+ })
|
|
|
|
|
+ /*if (this.props.region) {
|
|
|
|
|
+ this.map.setNativeProps({ region: this.props.region });
|
|
|
|
|
+ }*/
|
|
|
|
|
+ if (this.props.onMapReady) {
|
|
|
|
|
+ this.props.onMapReady();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ _onMarkerPress(event) {
|
|
|
|
|
+ if (this.props.onMarkerPress) {
|
|
|
|
|
+ this.props.onMarkerPress(event.nativeEvent);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ moveCamera(region, zoom) {
|
|
|
|
|
+ //console.log('moveCamera', region);
|
|
|
|
|
+ if (region) {
|
|
|
|
|
+ if (!region.zoom && zoom) {
|
|
|
|
|
+ region.zoom = zoom;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.map.setNativeProps({ region: region });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ showUserLocation() {
|
|
|
|
|
+ this.map.setNativeProps({ showUserLocation: this.props.showUserLocation });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ render() {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <VbeClusterView
|
|
|
|
|
+ ref={ref => this.map = ref}
|
|
|
|
|
+ {...this.props}
|
|
|
|
|
+ onMapReady={this._onMapReady}
|
|
|
|
|
+ onMarkerPress={this._onMarkerPress}
|
|
|
|
|
+ />
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+VbeClusterMap.propTypes = propTypes;
|
|
|
|
|
+
|
|
|
|
|
+module.exports = VbeClusterMap;
|