ilink-world/screens/home/IMap.js

import React, { PureComponent } from 'react';
import MapView, { Marker, MarkerAnimated } from "react-native-maps"
import PropTypes from 'prop-types';
import {
     StyleSheet,
     View,
     Image,
     Text,
} from 'react-native';
const theme = require("../../utils/theme");
import { responsiveHeight, responsiveWidth } from "react-native-responsive-dimensions";
import IMarker from "./IMarker";
import I18n from "react-native-i18n";
import MapViewDirections from 'react-native-maps-directions';
const API_KEY = "AIzaSyAYOEp-Pckvc3TwOIulCICokKgmp14rGHI";
const mnetwork = require('./../../datas/img/png/home_network.png');
const othernetwork = require('./../../datas/img/png/other_net.png');
import { copilot, CopilotStep } from 'react-native-copilot';

class IMap extends PureComponent {
     static propTypes = {
          markers: PropTypes.array,
          map: PropTypes.object,
          network: PropTypes.object,
          myNetwork: PropTypes.object,
          selectedMarker: PropTypes.object,
          myPosition: PropTypes.object,
          onMarkerClick: PropTypes.func,
          initialRegion: PropTypes.object,
          typeMap: PropTypes.string,
          needRoad: PropTypes.bool,
          isNeedUserFocus: PropTypes.bool,
          onNeedRoadReady: PropTypes.func,
          onNeedRoadError: PropTypes.func,
          onMapReady: PropTypes.func,
          onLayout: PropTypes.func
     };

     static defaultProps = {
          isNeedUserFocus: false
     };
     constructor(props) {
          super(props)
          this.state = {
               markers: [],
               roadReady: false,
               isNeedUserFocus: false,
          }
     }
     mapRef = (ref) => {
          this.mapview = ref
     }

     getMapRef = () => this.mapview
     componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
          const markers = this.state.markers
          const newmarkers = nextProps.markers
          if (markers.length <= 0)
               this.setState({ markers: newmarkers })
          else if (markers.length !== newmarkers) {
               this.setState({ markers: newmarkers })
          }
          this.setState({ isNeedUserFocus: nextProps.isNeedUserFocus })
     }

     render() {
          const { markers, initialRegion, myPosition, myNetwork, typeMap, selectedMarker } = this.props
          if (initialRegion !== null && myNetwork !== null)
               return (
                    <View style={styles.container}>
                         <MapView
                              style={{ flex: 1 }}
                              initialRegion={initialRegion}
                              mapType={typeMap}
                              ref={(re) => this.mapview = re}
                              onMapReady={this.props.onMapReady}
                              onLayout={this.props.onLayout}
                              onRegionChangeComplete={(re) => { this.onRegionChangeOver(re) }}>
                              {this.state.markers.map((item, index) => {
                                   return (
                                        <IMarker
                                             isUser={false}
                                             title={item.lastname}
                                             isSelected={(selectedMarker && selectedMarker.id === item.id)}
                                             data={item}
                                             onPress={(e, marker) => this.props.onMarkerClick(e, marker)}
                                             network={myNetwork}
                                        />)
                              })}
                              {this.renderMyPosition()}
                              {this.makeDirection()}

                         </MapView>
                    </View>)
          else return (<View />)
     }
     focusToUser() {
          this.setState({ isNeedUserFocus: true })
     }
     closeUserFocus() {
          this.setState({ isNeedUserFocus: false })
     }
     onRegionChangeOver(region) {

     }
     makeDirection() {
          let { myPosition, selectedMarker, needRoad } = this.props
          if (myPosition !== null && selectedMarker !== null && selectedMarker !== undefined && myPosition !== undefined && needRoad) {
               setTimeout(() => {
                    if (!this.state.roadReady) {
                         this.setState({ roadReady: true })
                         this.props.onNeedRoadError()
                    }
               }, 10000)

               return (<MapViewDirections
                    origin={myPosition}
                    destination={selectedMarker}
                    apikey={API_KEY}
                    strokeWidth={3}
                    onReady={(data) => {
                         this.setState({ roadReady: true })
                         this.props.onNeedRoadReady(data)
                    }
                    }
                    onError={() => {
                         this.setState({ roadReady: true })
                         this.props.onNeedRoadError()
                    }
                    }
                    strokeColor={theme.primary}
               />)
          }
     }

     renderMyPosition() {
          const { myPosition, myNetwork } = this.props
          if (myPosition != null) {
               if (false) {
                    return (
                         <CopilotStep>
                              <IMarker

                                   isUser={true}
                                   lang={this.props.lang}
                                   isNeedFocus={this.state.isNeedUserFocus}
                                   title={I18n.t("YOUR_THERE")}
                                   data={{
                                        longitude: myPosition.longitude,
                                        latitude: myPosition.latitude
                                   }}
                              />
                         </CopilotStep>
                    )
               } else
                    return (<IMarker
                         isUser={true}
                         lang={this.props.lang}
                         isNeedFocus={this.state.isNeedUserFocus}
                         title={I18n.t("YOUR_THERE")}
                         data={{
                              longitude: myPosition.longitude,
                              latitude: myPosition.latitude
                         }}
                    />)
          }
     }
}


export default IMap;
const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: '#FFF',
     },
     myClusterTextStyle: {
          color: "white"
     },
     myClusterStyle: {
          backgroundColor: theme.accent,
          height: 32,
          justifyContent: 'center',
          alignItems: 'center',
          width: 32,
          borderRadius: 16
     },
     rowContainer: {
          height: 52,
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'flex-start',
          alignItems: 'center',
     },
     iconContainer: {
          marginRight: 16,
     },
     mapmarker: {
          width: 52,
          height: 52,
     },
     slidingup: {
          backgroundColor: "transparent",
          position: "absolute",
          height: 300,
          bottom: 0,
          right: 35,
          zIndex: 1
     },
     panel: {
          flex: 1,
          backgroundColor: 'white',
          position: 'relative'
     },
     panelHeader: {
          height: 120,
          backgroundColor: '#b197fc',
          alignItems: 'center',
          justifyContent: 'center'
     },
     favoriteIcon: {
          left: responsiveWidth(75),
          backgroundColor: theme.primary,
          width: 64,
          justifyContent: 'center',
          alignContent: 'center',
          bottom: -64,
          position: 'absolute',
          height: 64,
          padding: 8,
          zIndex: 1,
          borderRadius: 32,
     },
     hambuger: {
     },
     topBar: {
          position: 'absolute',
          alignSelf: 'center',
          justifyContent: 'center',
          alignItems: 'center',
          marginTop: responsiveHeight(4),
          width: responsiveWidth(95),

     },
     searchInput: {
          width: responsiveWidth(70),
          fontSize: 14
     },
     search: {
          width: responsiveWidth(70),
          height: responsiveHeight(10),
          backgroundColor: '#00000000',


     },

     map: {
          width: responsiveWidth(100),
          height: responsiveHeight(100),
     },
     backgroundd_drawer: {
          backgroundColor: '#000',
     },
     cardsearch: {
          width: responsiveWidth(90),
          height: responsiveHeight(10),
          position: 'absolute',
          alignSelf: 'center',
          marginTop: 5,

     },
     actionButtonIcon: {
          fontSize: 20,
          height: 22,

          color: 'white',
     },
     welcome: {
          fontSize: 20,
          textAlign: 'center',
          margin: 10,
     },
     instructions: {
          textAlign: 'center',
          color: '#333333',
          marginBottom: 5,
     },
});