hi,
-
I am implementing react native maps, in that I am able to shop maps and polyline between the coordinates.
-
when the car reaches the destnation, I need to zoom ito street level.
-
can you tell me how to achieve it.
-
I googled but couldn’t find any solutions.
-
providing my code below in a gist.
-
declared all my car coordinates inside my let routes array.
-
can you guys provide your inputs
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);
