Skip to content

Mapview Marker to Trails #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shilpashendre wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Mapview Marker to Trails #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 131 additions & 61 deletions app/views/Overlap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,21 @@ import {
TouchableOpacity,
BackHandler,
Modal,
Image,
TouchableHighlight,
Alert,
} from 'react-native';
import { useFocusEffect, useNavigation } from '@react-navigation/native';
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
import MapView, { PROVIDER_GOOGLE, Polyline } from 'react-native-maps';
import RNFetchBlob from 'rn-fetch-blob';
import NavigationInfoBarWrapper from '../components/NavigationInfoBarWrapper';
import { GetStoreData } from '../helpers/General';
import greenMarker from '../assets/images/user-green.png';
import languages from '../locales/languages';
import CustomCircle from '../helpers/customCircle';
import fontFamily from '../constants/fonts';
import axios from 'axios';

import { decode } from '@mapbox/polyline';
import { PUBLIC_DATA_URL } from '../constants/authorities';
import { LOCATION_DATA } from '../constants/storage';

Expand Down Expand Up @@ -74,6 +76,10 @@ function OverlapScreen(props) {
const [region, setRegion] = useState({});
const [markers, setMarkers] = useState([]);
const [circles, setCircles] = useState([]);

const [polyCoords, setPolyCoords] = useState([]);
const [flag, setFlag] = useState(true);

const [showButton, setShowButton] = useState({
disabled: false,
text: show_button_text,
Expand Down Expand Up @@ -125,7 +131,7 @@ function OverlapScreen(props) {
markers.push(marker);
}
}

setFlag(true);
setMarkers(markers);
}
});
Expand Down Expand Up @@ -274,7 +280,7 @@ function OverlapScreen(props) {
function backToMain() {
props.navigation.goBack();
}
function setVisible(){
function setVisible() {
setModalVisible(true);
}

Expand All @@ -298,6 +304,61 @@ function OverlapScreen(props) {
};
});

//if markers arrays has co-ordinated than populate polycoordinate array
if (markers.length > 0 && flag) {
setFlag(false);
getPolyCoordinates(markers);
}

async function getPolyCoordinates(markers) {
const newCoord = [];

try {
const KEY = 'DIRECTION_API_KEY';

for (let i = 0; i < markers.length; i++) {
let startLoc =
'' +
markers[i].coordinate.latitude +
',' +
markers[i].coordinate.longitude;
let destinationLoc =
'' +
markers[i].coordinate.latitude +
',' +
markers[i].coordinate.longitude;

//axios is used to make api call, mapoBox/polyline lib is used to convert lat long into required polyline format

await axios
.get(
`https://maps.googleapis.com/maps/api/directions/json?origin=${startLoc}&destination=${destinationLoc}&key=${KEY}`,
)
.then(async response => {
let points = await decode(
response.data.routes[0].overview_polyline.points,
);

let coords = points.map(point => {
return {
latitude: point[0],
longitude: point[1],
};
});
let obj = coords[0];
newCoord.push(obj);
})
.catch(resErr => {
console.log('TCL: getPolyCoordinates -> resErr', resErr);
});
}

setPolyCoords(newCoord);
} catch (error) {
console.log('TCL: getPolyCoordinates -> error', error);
}
}

// This map shows where your private location trail overlaps with public data from a variety of sources,
// including official reports from WHO, Ministries of Health, and Chinese local, provincial, and national
// health authorities. If additional data are available from reliable online reports, they are included.
Expand All @@ -306,76 +367,85 @@ function OverlapScreen(props) {
<NavigationInfoBarWrapper
title={languages.t('label.overlap_title')}
onBackPress={backToMain.bind()}
onInfoTapped={setVisible.bind()}
>
onInfoTapped={setVisible.bind()}>
<View style={styles.main}>

{
modalVisible &&
{modalVisible && (
<View style={styles.centeredView}>
<Modal
animationType="slide"
animationType='slide'
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={[styles.overlay, { flex: 1, alignItems: 'center', justifyContent: 'center' }]}>
Alert.alert('Modal has been closed.');
}}>
<View
style={[
styles.overlay,
{ flex: 1, alignItems: 'center', justifyContent: 'center' },
]}>
<View style={styles.modalView}>

<TouchableHighlight
style={{ ...styles.openButton }}
onPress={() => {
setModalVisible(!modalVisible);
}}
>

}}>
<View style={styles.footer}>
<Text style={styles.sectionDescription, { textAlign: 'left', paddingTop: 15, color: '#fff' }}>
<Text
style={
(styles.sectionDescription,
{
textAlign: 'left',
paddingTop: 15,
color: '#fff',
})
}>
{languages.t('label.overlap_para_1')}
</Text>


<Text
style={[
styles.sectionFooter,
{ textAlign: 'center', paddingTop: 15, color: '#63beff' },
{
textAlign: 'center',
paddingTop: 15,
color: '#63beff',
},
]}
onPress={() =>
Linking.openURL('https://github.com/beoutbreakprepared/nCoV2019')
Linking.openURL(
'https://github.com/beoutbreakprepared/nCoV2019',
)
}>
{languages.t('label.nCoV2019_url_info')}{' '}
</Text>
<View style={{
flexDirection: 'row', alignItems: 'center', justifyContent: 'center'
}}>
<Text style={[styles.okButton]}>{"OK"}</Text>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={[styles.okButton]}>{'OK'}</Text>
</View>

</View>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
}

</View>
)}

<MapView
ref={mapView}
provider={PROVIDER_GOOGLE}
style={styles.map}
customMapStyle={customMapStyles}>
{markers.map(marker => (
<Marker
key={marker.key}
coordinate={marker.coordinate}
title={marker.title}
description={marker.description}
image={greenMarker}
{polyCoords.length > 0 && (
<Polyline
coordinates={polyCoords}
strokeColor='green'
strokeWidth={6}
/>
))}
)}
{circles.map(circle => (
<CustomCircle
key={circle.key}
Expand All @@ -387,6 +457,7 @@ function OverlapScreen(props) {
/>
))}
</MapView>

{
<View style={styles.mapFooter}>
<TouchableOpacity
Expand All @@ -397,7 +468,6 @@ function OverlapScreen(props) {
{languages.t(showButton.text)}
</Text>
</TouchableOpacity>

</View>
}
</View>
Expand All @@ -420,7 +490,7 @@ const styles = StyleSheet.create({
},
map: {
flex: 1,
...StyleSheet.absoluteFillObject
...StyleSheet.absoluteFillObject,
},
description: {
flex: 0.5,
Expand Down Expand Up @@ -478,51 +548,51 @@ const styles = StyleSheet.create({
padding: 4,
paddingBottom: 5,
},
mapFooter:{
flex:1,
position:'relative',
justifyContent:"flex-end",
alignSelf:"center",
marginBottom:35
mapFooter: {
flex: 1,
position: 'relative',
justifyContent: 'flex-end',
alignSelf: 'center',
marginBottom: 35,
},
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 10
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,
},
modalView: {
margin: 20,
backgroundColor: "#fff",
backgroundColor: '#fff',
borderRadius: 10,
alignItems: "center",
shadowColor: "#000",
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
elevation: 5,
},
openButton: {
backgroundColor: "#333333",
backgroundColor: '#333333',
borderRadius: 10,
padding: 10,
elevation: 2
elevation: 2,
},
overlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: "#06273F80",
backgroundColor: '#06273F80',
},
okButton: {
paddingTop: 5,
color: 'white',
},
okButton:{
paddingTop:5,
color:"white"
}
});

const customMapStyles = [
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"scripts": {
"preinstall": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"",
"install:pod": "cd ios && bundle install && bundle exec pod install",
"postinstall": "patch-package; npx react-native-jetifier",
"postversion": "react-native-version",
"format:all": "prettier --write ./app/**/*.js",
"i18n:extract": "i18next",
Expand All @@ -29,6 +28,7 @@
]
},
"dependencies": {
"@mapbox/polyline": "^1.1.0",
"@mauron85/react-native-background-geolocation": "^0.6.3",
"@react-native-community/async-storage": "^1.8.1",
"@react-native-community/geolocation": "^2.0.2",
Expand All @@ -38,12 +38,12 @@
"@react-navigation/native": "5.0.9",
"@react-navigation/stack": "5.1.1",
"@testing-library/react-native": "^5.0.3",
"axios": "^0.19.2",
"i18next": "^19.3.3",
"js-yaml": "^3.13.1",
"moment": "^2.24.0",
"patch-package": "^6.2.1",
"pluralize": "^8.0.0",
"postinstall-postinstall": "^2.0.0",
"prop-types": "^15.7.2",
"react": "16.9.0",
"react-native": "0.61.5",
Expand Down
Loading