From 211e57167d6491b3f97925c01d5b25b175fba7d0 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Wed, 17 Jun 2020 14:34:41 +0200 Subject: [PATCH 1/5] Added basic map --- package.json | 1 + src/navigation/MainNavigator.js | 8 ++++ src/screens/Services/MapScreen.js | 65 ++++++++++++++++++++++++++ src/screens/Services/ServicesScreen.js | 8 ++++ 4 files changed, 82 insertions(+) create mode 100644 src/screens/Services/MapScreen.js diff --git a/package.json b/package.json index 48da6b3..e2bec52 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@react-native-community/masked-view": "^0.1.10", "@react-native-community/push-notification-ios": "^1.1.1", "@react-native-community/slider": "^3.0.0", + "@react-native-mapbox-gl/maps": "^8.1.0-rc.1", "@react-navigation/bottom-tabs": "^5.3.2", "@react-navigation/native": "^5.2.2", "@react-navigation/stack": "^5.2.17", diff --git a/src/navigation/MainNavigator.js b/src/navigation/MainNavigator.js index 79aca49..b173417 100644 --- a/src/navigation/MainNavigator.js +++ b/src/navigation/MainNavigator.js @@ -30,6 +30,7 @@ import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen"; import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen"; import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils"; import BugReportScreen from "../screens/Other/FeedbackScreen"; +import MapScreen from "../screens/Services/MapScreen"; const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS; @@ -106,6 +107,13 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) { {getWebsiteStack("available-rooms", MainStack, AvailableRoomScreen, i18n.t('screens.availableRooms'))} {getWebsiteStack("bib", MainStack, BibScreen, i18n.t('screens.bib'))} {createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menuSelf'))} + {/* STUDENTS */} {createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo'))} diff --git a/src/screens/Services/MapScreen.js b/src/screens/Services/MapScreen.js new file mode 100644 index 0000000..a660b5d --- /dev/null +++ b/src/screens/Services/MapScreen.js @@ -0,0 +1,65 @@ +// @flow + +import * as React from 'react'; +import {View} from 'react-native'; +import {withTheme} from 'react-native-paper'; +import {StackNavigationProp} from "@react-navigation/stack"; +import type {CustomTheme} from "../../managers/ThemeManager"; +import MapboxGL from "@react-native-mapbox-gl/maps"; + +type Props = { + navigation: StackNavigationProp, + theme: CustomTheme, +} + +MapboxGL.setAccessToken("sk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM212Z3QwYmxmMnhsc3RxZWYza2Q5In0.og84RKRa6-vr3qRA1qU9Aw"); + +const layerStyles = { + smileyFace: { + fillAntialias: true, + fillColor: 'white', + fillOutlineColor: 'rgba(255, 255, 255, 0.84)', + }, +}; + +/** + * Class defining the app's map screen. + */ +class MapScreen extends React.Component { + + map : { current: null | MapboxGL.MapView }; + + constructor() { + super(); + this.map = React.createRef(); + } + + componentDidMount() { + MapboxGL.setTelemetryEnabled(false); + + } + + render() { + return ( + + { + const center = await this.map.current.getCenter(); + console.log(center); + }} + > + + + + ); + } +} + +export default withTheme(MapScreen); diff --git a/src/screens/Services/ServicesScreen.js b/src/screens/Services/ServicesScreen.js index 077a5fc..11eec17 100644 --- a/src/screens/Services/ServicesScreen.js +++ b/src/screens/Services/ServicesScreen.js @@ -49,6 +49,8 @@ type State = { isLoggedIn: boolean, } +// TODO translate subtitles + class ServicesScreen extends React.Component { amicaleDataset: cardList; @@ -119,6 +121,12 @@ class ServicesScreen extends React.Component { }, ]; this.insaDataset = [ + { + title: "MAP", // TODO translate + subtitle: "MAP", + image: RU_IMAGE, + onPress: () => nav.navigate("map"), + }, { title: i18n.t('screens.menuSelf'), subtitle: "the ru", From 1af468832984acaa9668fdc872d244c3f1a7643e Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Mon, 22 Jun 2020 16:04:08 +0200 Subject: [PATCH 2/5] Tried implementing basic map markers --- src/screens/Services/MapScreen.js | 62 +++++++++++++++++++++++++------ 1 file changed, 51 insertions(+), 11 deletions(-) diff --git a/src/screens/Services/MapScreen.js b/src/screens/Services/MapScreen.js index a660b5d..ff9bcf7 100644 --- a/src/screens/Services/MapScreen.js +++ b/src/screens/Services/MapScreen.js @@ -6,32 +6,48 @@ import {withTheme} from 'react-native-paper'; import {StackNavigationProp} from "@react-navigation/stack"; import type {CustomTheme} from "../../managers/ThemeManager"; import MapboxGL from "@react-native-mapbox-gl/maps"; +import exampleIcon from '../../../assets/icon-notification.png'; type Props = { navigation: StackNavigationProp, theme: CustomTheme, } +type State = { + featureCollection: Array, +} + MapboxGL.setAccessToken("sk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM212Z3QwYmxmMnhsc3RxZWYza2Q5In0.og84RKRa6-vr3qRA1qU9Aw"); -const layerStyles = { - smileyFace: { - fillAntialias: true, - fillColor: 'white', - fillOutlineColor: 'rgba(255, 255, 255, 0.84)', +const styles = { + icon: { + iconImage: exampleIcon, + iconAllowOverlap: true, }, }; +const FEATURES = [{ + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [1.4669608, 43.5698867], + } +}] + /** * Class defining the app's map screen. */ -class MapScreen extends React.Component { +class MapScreen extends React.Component { - map : { current: null | MapboxGL.MapView }; + map: { current: null | MapboxGL.MapView }; constructor() { super(); this.map = React.createRef(); + + this.state = { + featureCollection: [], + }; } componentDidMount() { @@ -39,23 +55,47 @@ class MapScreen extends React.Component { } + onSymbolPress = (feature) => { + console.log("coucou"); + } + + + onSourceLayerPress = ({features, coordinates, point}) => { + console.log( + 'You pressed a layer here are your features:', + features, + coordinates, + point, + ); + } + render() { return ( { - const center = await this.map.current.getCenter(); - console.log(center); + onPress={(e) => { + console.log(e) }} > + {/**/} + {/* */} + {/**/} ); From 936f2a8e9ea0ac0097434dee399d805aa4683428 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Mon, 22 Jun 2020 20:02:34 +0200 Subject: [PATCH 3/5] Use public token --- src/screens/Services/MapScreen.js | 55 +++++++++++++++---------------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/src/screens/Services/MapScreen.js b/src/screens/Services/MapScreen.js index ff9bcf7..9458ec1 100644 --- a/src/screens/Services/MapScreen.js +++ b/src/screens/Services/MapScreen.js @@ -6,7 +6,6 @@ import {withTheme} from 'react-native-paper'; import {StackNavigationProp} from "@react-navigation/stack"; import type {CustomTheme} from "../../managers/ThemeManager"; import MapboxGL from "@react-native-mapbox-gl/maps"; -import exampleIcon from '../../../assets/icon-notification.png'; type Props = { navigation: StackNavigationProp, @@ -17,22 +16,22 @@ type State = { featureCollection: Array, } -MapboxGL.setAccessToken("sk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM212Z3QwYmxmMnhsc3RxZWYza2Q5In0.og84RKRa6-vr3qRA1qU9Aw"); +MapboxGL.setAccessToken("pk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM2d5OHYwYmdiMndxdnV4bmh6bGFwIn0.qiOwbs2_HRaQGUOpBDjbsQ"); -const styles = { - icon: { - iconImage: exampleIcon, - iconAllowOverlap: true, - }, -}; +// const styles = { +// icon: { +// iconImage: exampleIcon, +// iconAllowOverlap: true, +// }, +// }; -const FEATURES = [{ - type: 'Feature', - geometry: { - type: 'Point', - coordinates: [1.4669608, 43.5698867], - } -}] +// const FEATURES = [{ +// type: 'Feature', +// geometry: { +// type: 'Point', +// coordinates: [1.4669608, 43.5698867], +// } +// }] /** * Class defining the app's map screen. @@ -55,19 +54,19 @@ class MapScreen extends React.Component { } - onSymbolPress = (feature) => { - console.log("coucou"); - } - - - onSourceLayerPress = ({features, coordinates, point}) => { - console.log( - 'You pressed a layer here are your features:', - features, - coordinates, - point, - ); - } + // onSymbolPress = (feature) => { + // console.log("coucou"); + // } + // + // + // onSourceLayerPress = ({features, coordinates, point}) => { + // console.log( + // 'You pressed a layer here are your features:', + // features, + // coordinates, + // point, + // ); + // } render() { return ( From f644964473413175127748cab5282ef26e30d938 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Mon, 22 Jun 2020 20:06:34 +0200 Subject: [PATCH 4/5] Updated translations --- src/navigation/MainNavigator.js | 2 +- src/screens/Services/ServicesScreen.js | 2 +- translations/en.json | 3 ++- translations/fr.json | 3 ++- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/navigation/MainNavigator.js b/src/navigation/MainNavigator.js index b173417..68187c9 100644 --- a/src/navigation/MainNavigator.js +++ b/src/navigation/MainNavigator.js @@ -111,7 +111,7 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) { name="map" component={MapScreen} options={{ - title: "MAP", // TODO translate + title: i18n.t('screens.map'), }} /> diff --git a/src/screens/Services/ServicesScreen.js b/src/screens/Services/ServicesScreen.js index 11eec17..fb1df25 100644 --- a/src/screens/Services/ServicesScreen.js +++ b/src/screens/Services/ServicesScreen.js @@ -122,7 +122,7 @@ class ServicesScreen extends React.Component { ]; this.insaDataset = [ { - title: "MAP", // TODO translate + title: i18n.t('screens.map'), subtitle: "MAP", image: RU_IMAGE, onPress: () => nav.navigate("map"), diff --git a/translations/en.json b/translations/en.json index 71edb8e..8633472 100644 --- a/translations/en.json +++ b/translations/en.json @@ -25,7 +25,8 @@ "profile": "Profile", "vote": "Elections", "scanner": "Scanotron 3000", - "feedback": "Feedback" + "feedback": "Feedback", + "map": "Campus Map" }, "intro": { "slideMain": { diff --git a/translations/fr.json b/translations/fr.json index 5289a82..ec18201 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -25,7 +25,8 @@ "profile": "Profil", "vote": "Élections", "scanner": "Scanotron 3000", - "feedback": "Votre avis" + "feedback": "Votre avis", + "map": "Carte du campus" }, "intro": { "slideMain": { From 09de59c178423813835f94a9317a66fdcc95e7d8 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Mon, 22 Jun 2020 20:07:26 +0200 Subject: [PATCH 5/5] Added map icon --- src/screens/Services/ServicesScreen.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/screens/Services/ServicesScreen.js b/src/screens/Services/ServicesScreen.js index fb1df25..730edfb 100644 --- a/src/screens/Services/ServicesScreen.js +++ b/src/screens/Services/ServicesScreen.js @@ -31,6 +31,7 @@ const WIKETUD_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud const EE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/EEC.png"; const TUTORINSA_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/TutorINSA.png"; +const MAP_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Map.png"; const BIB_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bib.png"; const RU_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/RU.png"; const ROOM_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png"; @@ -124,7 +125,7 @@ class ServicesScreen extends React.Component { { title: i18n.t('screens.map'), subtitle: "MAP", - image: RU_IMAGE, + image: MAP_IMAGE, onPress: () => nav.navigate("map"), }, {