map.js

import MapView, {
  Marker,
  AnimatedRegion,
  Polyline,
  PROVIDER_GOOGLE,


} from "react-native-maps";

import React from 'react';
import { TouchableOpacity, StyleSheet, View, Dimensions, Platform, Text, Button } from 'react-native';
import AnimatingPolylineComponent from './AnimatingPolylineComponent';
//import { Text } from "src/core/components/common/Text";
import {connect } from 'react-redux';
//import { ToJS } from "../../core/modules/HOC/ToJS";
//import { updateStops } from '../../core/modules/order/Actions';
//import MapView, { Marker, ProviderPropType } from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 31.1123;
const LONGITUDE = -97.3564;
//const LATITUDE_DELTA = 59.5;

const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;

const markerIDs = ['Marker1', 'Marker2', 'Marker3', 'Marker4', 'Marker5'];
const timeout = 4000;
let animationTimeout: any;

class FocusOnMarkers extends React.Component {
  constructor(props: any) {
    super(props);

    this.state = {
      markerIdentifiers: ['truck'],
      stop: 1,
      routePath: [
        {
          latitude: 31.132682,
          longitude: -97.360425,
          identifier: '1'

        },

        {
          latitude: 31.258928,
          longitude: -97.2735855,
          identifier: '2'

        },
        {
          latitude: 31.673759,
          longitude: -97.0994453,
          identifier: '3'

        },

        {
          latitude: 32.056339,
          longitude: -97.0918909,
          identifier: '4'

        },

        {
          latitude: 32.459905,
          longitude: -96.8419605,
          identifier: '5'

        },
        {
          latitude: 32.795581,
          longitude: -96.7929517,
          identifier: '6'

        }


      ],

      routeCoordinates: [

      ],

      distanceTravelled: 0,
      prevLatLng: {},
      coordinate: new AnimatedRegion({
        latitude: 31.258928,
        longitude: -97.2735855,
        latitudeDelta: 0,
        longitudeDelta: 0
      })

      //      screen: Dimensions.get('window'),

    };

    this.map = null;
    this.marker = null;
  }

  refreshMarker = () => {
    console.log('refresh Map');
  }


  componentDidMount() {
    let index = 0;

    let routes = [

      {
        latitude: 31.132682,
        longitude: -97.360425,
        identifier: '1'

      },

      {
        latitude: 31.258928,
        longitude: -97.2735855,
        identifier: '2'

      },
      {
        latitude: 31.673759,
        longitude: -97.0994453,
        identifier: '3'

      },

      {
        latitude: 32.056339,
        longitude: -97.0918909,
        identifier: '4'

      },

      {
        latitude: 32.459905,
        longitude: -96.8419605,
        identifier: '5'

      },
      {
        latitude: 32.795581,
        longitude: -96.7929517,
        identifier: '6'

      },
      {
        latitude: this.props.mapStore.address.latitude,
        longitude: this.props.mapStore.address.longitude,
        identifier: '7'

      }
    ];




    setInterval(() => {
      console.log(' refresh marker');
      if (index < 7) {
        console.log(' refresh marker', index);
        let data = {};
        data.currentStop = ++index;
        data.totalStop =  7;
        //this.props.updateStops(data);
        this.setState({
          coordinate: routes[index],
          routeCoordinates: this.state.routeCoordinates.concat(routes[index]),
          stop: index


        });
      }
      //index++;


    },
      1000
      //50000
    );

    if (this.props.mapStore.identifier === '12175') {
      let markerIds = this.state.routePath.map(val => val.identifier);
      this.setState({ markerIdentifiers: markerIds })
    }

  }



  componentWillUnmount() {
    // if (animationTimeout) {
    //   clearTimeout(animationTimeout);
    // }
  }

  focusMap(markers: any, animated: any) {
    console.log(`Markers received to populate map: ${markers}`);
    this.map.fitToSuppliedMarkers(markers, animated);
  }

  markerClick() {
    console.log("Marker was clicked");
  }




  render() {
    return (

      <View>
        <View style= {{marginBottom: 10}}>
          <Text>I am here </Text>
        </View>

        <View style={styles.container} //onLayout={this.onLayout.bind(this)}
        >

          <TouchableOpacity style={styles.overlay}>
            <Text style={styles.text}>Updated Now {this.state.stop}</Text>
            <Text style={styles.text}>Updated 10 seconds ago</Text>
          </TouchableOpacity>



          <MapView
            // provider={this.props.provider}
            provider={PROVIDER_GOOGLE}
            ref={ref => {
              this.map = ref;
            }}
            style={styles.map}

            // style={[styles.map]}
            initialRegion={{
              latitude: LATITUDE,
              longitude: LONGITUDE,
              //latitudeDelta: 0.0922,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            }}

            onMapReady={() => {
              console.log('fit');
              // debugger;



              // this.map.fitToCoordinates(['31.1123,-97.3564'], {
              //   edgePadding:
              //   {
              //     top: 50,
              //     right: 50,
              //     bottom: 50,
              //     left: 50
              //   }

              // });


              this.map.fitToSuppliedMarkers(['storeMarker', //'truckMarker',
                ...this.state.markerIdentifiers//, 's1', 's2', 's3', 's4', 's5', 's6', 's7'
              ], {
                edgePadding:
                {
                  top: 50,
                  right: 50,
                  bottom: 50,
                  left: 50
                }

              });
            }}

          >

            <Polyline coordinates={this.state.routeCoordinates} strokeWidth={5} />

            {/* Animating polyline */}
            {/* <AnimatingPolylineComponent Direction={this.state.routeCoordinates}/> */}

            {/* <Marker.Animated
                ref={marker => {
                  this.marker = marker;
                }}
                pinColor={'green'}
                coordinate={this.state.coordinate}
              /> */}




            <MapView.Marker
              coordinate={{

                latitude: this.props.mapStore.address.latitude,
                longitude: this.props.mapStore.address.longitude


                //latitude: 31.1123,
                //longitude: -97.3564,



              }}

              identifier={'storeMarker'}

              image={require('../../assets/icons/OrangePin.png')}



            />



            <Marker.Animated
              ref={marker => {
                this.marker = marker;
              }}
              pinColor={'green'}
              coordinate={this.state.coordinate}
              image={require('../../assets/icons/DeliveryCar.png')}
              onCalloutPress={this.markerClick}

            />





            {this.props.mapShipper.address.latitude && this.props.mapShipper.address.longitude &&

              this.props.mapStore.identifier !== "12175" &&

              <MapView.Marker
                coordinate={{

                  //latitude: 26.2611,
                  //longitude: -98.2363,

                  latitude: this.props.mapShipper.address.latitude,
                  longitude: this.props.mapShipper.address.longitude,

                }}

                //  tracksViewChanges={false}
                image={require('../../assets/icons/Store.png')}

                identifier={'truck'}





              />

            }
            {}

            {this.props.mapStore.identifier === '12175' &&

              this.state.routePath.map(val => {
                return (<MapView.Marker
                  coordinate={{

                    //latitude: 26.2611,
                    //longitude: -98.2363,

                    latitude: val.latitude,
                    longitude: val.longitude,

                  }}

                  //tracksViewChanges={false}
                  identifier={val.identifier}

                //   image={require('../../assets/icons/OrangePin.png')}





                />)
              })}




          </MapView>




        </View>

      </View>
    );
  }
}

// FocusOnMarkers.propTypes = {
//   provider: ProviderPropType,
// };

const styles = StyleSheet.create({

  overlay: {
    position: 'absolute',

    top: 15,
    //bottom: 150,
    backgroundColor: 'white',
    left: 10,
    zIndex: 1,
  },

  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
    // borderWidth: 1,
    //borderColor: 'red',
    marginRight: 25,
    // marginTop: 5
    // backgroundColor: 'yellow',
  },

  // containerText: {
  //   backgroundColor: 'green',
  //   width: '100%',
  //   height: '100%',

  // },
  map: {
    // ...StyleSheet.absoluteFillObject,

    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    height: Dimensions.get("window").height / 2,
    marginTop: 10,
    marginRight: 5,
    borderWidth: 1,
    borderColor: 'grey',

    //borderWidth: 10,
    // borderColor: 'orange',
    //marginRight: 25,



  },


  // map: Object.assign({
  //   position: 'absolute',
  //   top: 0,
  //   right: 0,
  //   bottom: 0,
  //   left: 0,
  //   height: Dimensions.get("window").height/2,
  //   marginTop: 10,
  // }, Platform.select({
  //   android: {
  //    // elevation: 4,
  //   // height: Dimensions.get("window").height,
  //   },
  //   default: {
  //     // shadowColor: theme.palette.gray,
  //     // shadowOffset: { height: 1, width: 1 },
  //     // shadowOpacity: 1,
  //     // shadowRadius: 2,
  //   },
  // })),



});


// const portraitStyles = StyleSheet.create({
//   map: {
//     // ...StyleSheet.absoluteFillObject,

//     position: 'absolute',
//     top: 0,
//     right: 0,
//     bottom: 0,
//     left: 0,
//     height: Dimensions.get("window").height / 2,
//     marginTop: 10,


//   }
// });

// const landscapeStyles = StyleSheet.create({
//   map: {
//     // ...StyleSheet.absoluteFillObject,

//     position: 'absolute',
//     top: 0,
//     right: 0,
//     bottom: 0,
//     left: 0,
//     height: Dimensions.get("window").height,
//     marginTop: 10,


//   }
// });

export default FocusOnMarkers;
// const mapDispatchToProps = {
//   updateStops
// };
// const mapStateToProps = ({ authentication }) => ({
//   jwt: authentication.get("jwt"),
// });

// export default connect(mapStateToProps, mapDispatchToProps)(FocusOnMarkers);