From 9d582562a9a5b28de431df07ff3007cde0e93f12 Mon Sep 17 00:00:00 2001 From: Ali Rehman <33172988+AliRehman7141@users.noreply.github.com> Date: Sat, 20 Aug 2022 23:15:11 +0500 Subject: [PATCH 1/4] Update to install this forked version --- README.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index a5fd948e..14d7b393 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# react-native-maps-navigation +# Modified code from react-native-maps-navigation. Enhances React Native Maps with Realtime Navigation. @@ -12,13 +12,7 @@ Enhances React Native Maps with Realtime Navigation. **React Native >= 0.49** ```bash -yarn add react-native-maps-navigation -``` - -Make sure you link the module before building: - -```bash -react-native link react-native-maps-navigation +Add to packages.json: "react-native-maps-navigation": "github:AliRehman7141/react-native-maps-navigation" ``` ## Example From e334d6f689e482c83dd178359166c59e25f857ec Mon Sep 17 00:00:00 2001 From: Ali Rehman Date: Sun, 21 Aug 2022 00:27:01 +0500 Subject: [PATCH 2/4] Readme changes --- README.md | 6 +++--- package.json | 14 +++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 14d7b393..fd2504bf 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# Modified code from react-native-maps-navigation. +# @alirehman7141/react-native-maps-navigation Enhances React Native Maps with Realtime Navigation. `Please note that this module is usable but still under heavy development. Some properties and/or component names might change without notice.` -![alt text](https://github.com/flyandi/react-native-maps-navigation/raw/master/docs/preview.gif "react-native-maps-navigation") +![alt text](https://github.com/flyandi/react-native-maps-navigation/raw/master/docs/preview.gif "react-native-maps-navigation-next") ## Installation @@ -12,7 +12,7 @@ Enhances React Native Maps with Realtime Navigation. **React Native >= 0.49** ```bash -Add to packages.json: "react-native-maps-navigation": "github:AliRehman7141/react-native-maps-navigation" +yarn add @alirehman7141/react-native-maps-navigation ``` ## Example diff --git a/package.json b/package.json index 88686b8b..eca1f9fb 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "react-native-maps-navigation", - "version": "0.0.14", + "name": "@alirehman7141/react-native-maps-navigation", + "version": "0.0.16", "description": "A helper and component library for react-native-maps that enables navigation support", "main": "index.js", "repository": { "type": "git", - "url": "https://github.com/flyandi/react-native-maps-navigation.git" + "url": "https://github.com/alirehman7141/react-native-maps-navigation.git" }, "keywords": [ "react", @@ -19,13 +19,13 @@ "android", "react-component" ], - "author": "Andy Schwarz (http://flyandi.net)", + "author": "Ali Rehman ", "license": { "type": "MIT", - "url": "https://github.com/flyandi/react-native-maps-navigation/blob/master/LICENSE" + "url": "https://github.com/alirehman7141/react-native-maps-navigation/blob/master/LICENSE" }, "bugs": { - "url": "https://github.com/flyandi/react-native-maps-navigation/issues" + "url": "https://github.com/alirehman7141/react-native-maps-navigation/issues" }, "scripts": { "test": "jest" @@ -33,7 +33,7 @@ "jest": { "preset": "react-native" }, - "homepage": "https://github.com/flyandi/react-native-maps-navigation#readme", + "homepage": "https://github.com/alirehman7141/react-native-maps-navigation#readme", "peerDependencies": { "react": "*", "react-native": "*", From 691437f2ae85c95678353ecde2346786aa55476a Mon Sep 17 00:00:00 2001 From: Ali Rehman Date: Tue, 20 Dec 2022 16:04:21 +0500 Subject: [PATCH 3/4] Crash fixed --- package.json | 3 ++- src/components/MapViewNavigation/index.js | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index eca1f9fb..33e4a395 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alirehman7141/react-native-maps-navigation", - "version": "0.0.16", + "version": "0.0.17", "description": "A helper and component library for react-native-maps that enables navigation support", "main": "index.js", "repository": { @@ -40,6 +40,7 @@ "react-native-maps": ">=0.21.0" }, "dependencies": { + "@react-native-community/geolocation": "^3.0.4", "geolib": "^3.0.2", "prop-types": "^15.6.2", "react-native-optiongroup": "^0.0.7" diff --git a/src/components/MapViewNavigation/index.js b/src/components/MapViewNavigation/index.js index 092a213a..7bdd84b9 100644 --- a/src/components/MapViewNavigation/index.js +++ b/src/components/MapViewNavigation/index.js @@ -4,7 +4,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import {CoordinatePropType} from '../../constants/PropTypes'; -import { View, TouchableOpacity, Text, Dimensions, Geolocation } from 'react-native'; +import { View, TouchableOpacity, Text, Dimensions } from 'react-native'; +import geolocation from '@react-native-community/geolocation'; import connectTheme from '../../themes'; import Geocoder from '../../modules/Geocoder'; import Directions from '../../modules/Directions'; @@ -128,7 +129,7 @@ export default class MapViewNavigation extends Component { */ componentDidMount() { - this.watchId = navigator.geolocation.watchPosition(position => { + this.watchId = geolocation.watchPosition(position => { this.setPosition(position.coords); @@ -140,7 +141,7 @@ export default class MapViewNavigation extends Component { */ componentWillUnmount() { - navigator.geolocation.clearWatch(this.watchId); + geolocation.clearWatch(this.watchId); } /** From 498a60ab7ae7c490187a336dcdaf2db8e088c5cb Mon Sep 17 00:00:00 2001 From: Ali Rehman Date: Wed, 28 Dec 2022 16:03:19 +0500 Subject: [PATCH 4/4] change animateToBearing to animateToCamera --- index.js | 4 - src/components/MapViewNavigation/index.js | 134 +++++++++++----------- 2 files changed, 66 insertions(+), 72 deletions(-) diff --git a/index.js b/index.js index e6771dc3..ec54b3a5 100644 --- a/index.js +++ b/index.js @@ -16,10 +16,6 @@ import NavigationModes from './src/constants/NavigationModes'; import Geocoder from './src/modules/Geocoder'; - - - - /** * @exports */ diff --git a/src/components/MapViewNavigation/index.js b/src/components/MapViewNavigation/index.js index 7bdd84b9..8923897e 100644 --- a/src/components/MapViewNavigation/index.js +++ b/src/components/MapViewNavigation/index.js @@ -3,7 +3,7 @@ */ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import {CoordinatePropType} from '../../constants/PropTypes'; +import { CoordinatePropType } from '../../constants/PropTypes'; import { View, TouchableOpacity, Text, Dimensions } from 'react-native'; import geolocation from '@react-native-community/geolocation'; import connectTheme from '../../themes'; @@ -17,8 +17,8 @@ import Traps from '../../modules/Traps'; import RouteMarker from '../RouteMarker'; import RoutePolyline from '../RoutePolyline'; import PositionMarker from '../PositionMarker'; -import {POSITION_ARROW} from "../../constants/MarkerTypes"; -import {Circle, Polygon, Polyline} from 'react-native-maps'; +import { POSITION_ARROW } from "../../constants/MarkerTypes"; +import { Circle, Polygon, Polyline } from 'react-native-maps'; /** @@ -55,7 +55,8 @@ export default class MapViewNavigation extends Component { routeStepCourseTolerance: PropTypes.number, displayDebugMarkers: PropTypes.bool, simulate: PropTypes.bool, - options: PropTypes.object + options: PropTypes.object, + onPositionChanged: PropTypes.func } /** @@ -86,6 +87,7 @@ export default class MapViewNavigation extends Component { routeStepCourseTolerance: 30, // in degress displayDebugMarkers: false, simulate: false, + onPositionChanged: undefined, options: {} } @@ -119,7 +121,7 @@ export default class MapViewNavigation extends Component { this.theme = connectTheme(this.props.theme); - const {width, height} = Dimensions.get('window'); + const { width, height } = Dimensions.get('window'); this.aspectRatio = width / height; } @@ -127,8 +129,7 @@ export default class MapViewNavigation extends Component { /** * @componentDidMount */ - componentDidMount() - { + componentDidMount() { this.watchId = geolocation.watchPosition(position => { this.setPosition(position.coords); @@ -139,8 +140,7 @@ export default class MapViewNavigation extends Component { /** * @componentWillUnmount */ - componentWillUnmount() - { + componentWillUnmount() { geolocation.clearWatch(this.watchId); } @@ -149,11 +149,10 @@ export default class MapViewNavigation extends Component { * @param prevProps * @param prevState */ - componentDidUpdate(prevProps, prevState) - { - if(this.props.origin && this.props.destination) { + componentDidUpdate(prevProps, prevState) { + if (this.props.origin && this.props.destination) { - if( + if ( (prevProps.navigationMode != this.props.navigationMode) || (prevProps.travelMode != this.props.travelMode) || (prevProps.origin != this.props.origin || prevProps.destination != this.props.destination) @@ -199,7 +198,7 @@ export default class MapViewNavigation extends Component { */ getBoundingBoxZoomValue(b, quantifier = 1) { - if(b.length != 2) return {}; + if (b.length != 2) return {}; const latitudeDelta = (b[0].latitude > b[1].latitude ? b[0].latitude - b[1].latitude : b[1].latitude - b[0].latitude) * quantifier; @@ -214,27 +213,35 @@ export default class MapViewNavigation extends Component { * @param coordinate * @param duration */ - updatePosition(coordinate, duration = 0) - { + /*updatePosition(coordinate, duration = 0) { this.props.map().animateToCoordinate(coordinate, duration); - } + }*/ /** * updateBearing * @param bearing * @param duration */ - updateBearing(bearing, duration = false) - { - this.props.map().animateToBearing(bearing, duration || this.props.animationDuration); + updateBearing(bearing, lon, lat, duration = false) { + const newCamera = { + center: { + latitude: lat, + longitude: lon + }, + zoom: 30, + heading: bearing, + pitch: 80, + altitude: 5 + } + this.props.map().animateCamera(newCamera, { duration: duration || this.props.animationDuration }); + //this.props.map().animateToBearing(bearing, duration || this.props.animationDuration); } /** * * @param stepIndex */ - updateStep(stepIndex = 0) - { + updateStep(stepIndex = 0) { const step = this.state.route.steps[stepIndex < 0 ? 0 : stepIndex]; const nextStep = this.state.route.steps[stepIndex + 1]; @@ -248,7 +255,7 @@ export default class MapViewNavigation extends Component { courseTolerance: this.props.routeStepCourseTolerance, }, (trap, event, state) => { - if(!nextStep && trap.isCenter()) { + if (!nextStep && trap.isCenter()) { this.props.onNavigationCompleted && this.props.onNavigationCompleted(); @@ -258,7 +265,7 @@ export default class MapViewNavigation extends Component { }); } - if(trap.isLeaving()) { + if (trap.isLeaving()) { this.updateStep(this.stepIndex); } }); @@ -270,33 +277,34 @@ export default class MapViewNavigation extends Component { * setPosition * @param position */ - setPosition(position) - { - const {latitude, longitude, heading} = position; + setPosition(position) { + const { latitude, longitude, heading } = position; - position.coordinate = {latitude, longitude}; + position.coordinate = { latitude, longitude }; // process traps on setPosition this.traps.execute(position); // update position on map - if(this.state.navigationMode == NavigationModes.NAVIGATION) { + if (this.state.navigationMode == NavigationModes.NAVIGATION) { - this.updatePosition(position); + //this.updatePosition(position); - this.updateBearing(heading); + this.updateBearing(heading, longitude, latitude); + if (this.props.onPositionChanged) { + this.props.onPositionChanged({ longitude: longitude, latitude: latitude }) + } } - this.setState({position}); + this.setState({ position }); } /** * clearRoute * @void */ - clearRoute() - { - this.setState({route: false, step: false, stepIndex: false}) + clearRoute() { + this.setState({ route: false, step: false, stepIndex: false }) } /** @@ -305,14 +313,13 @@ export default class MapViewNavigation extends Component { * @param destination * @param navigationMode */ - updateRoute(origin = false, destination = false, navigationMode = false, options = null) - { + updateRoute(origin = false, destination = false, navigationMode = false, options = null) { origin = origin || this.props.origin; destination = destination || this.props.destination; navigationMode = navigationMode || this.props.navigationMode; options = options || this.props.options - switch(navigationMode) { + switch (navigationMode) { case NavigationModes.ROUTE: this.displayRoute(origin, destination, options); @@ -332,16 +339,15 @@ export default class MapViewNavigation extends Component { * @param options * @returns {PromiseLike | Promise} */ - prepareRoute(origin, destination, options = false, testForRoute = false) - { - if(testForRoute && this.state.route) { + prepareRoute(origin, destination, options = false, testForRoute = false) { + if (testForRoute && this.state.route) { return Promise.resolve(this.state.route); } - options = Object.assign({}, {mode: this.state.travelMode}, {mode: this.props.travelMode}, options.constructor == Object ? options : {}); - + options = Object.assign({}, { mode: this.state.travelMode }, { mode: this.props.travelMode }, options.constructor == Object ? options : {}); + return this.directionsCoder.fetch(origin, destination, options).then(routes => { - if(routes.length) { + if (routes.length) { const route = routes[0]; @@ -349,7 +355,7 @@ export default class MapViewNavigation extends Component { this.props.onStepChange && this.props.onStepChange(false); - this.setState({route, step: false}); + this.setState({ route, step: false }); return Promise.resolve(route); } @@ -366,8 +372,7 @@ export default class MapViewNavigation extends Component { * @param options * @returns {PromiseLike | Promise} */ - displayRoute(origin, destination, options = false) - { + displayRoute(origin, destination, options = false) { return this.prepareRoute(origin, destination, options).then(route => { const region = { @@ -377,7 +382,7 @@ export default class MapViewNavigation extends Component { this.props.map().animateToRegion(region, this.props.animationDuration); - if(!this.state.navigationMode == NavigationModes.ROUTE) { + if (!this.state.navigationMode == NavigationModes.ROUTE) { this.setState({ navigationMode: NavigationModes.ROUTE, }); @@ -394,8 +399,7 @@ export default class MapViewNavigation extends Component { * @param options * @returns {PromiseLike | Promise} */ - navigateRoute(origin, destination, options = false) - { + navigateRoute(origin, destination, options = false) { return this.prepareRoute(origin, destination, options, true).then(route => { const region = { @@ -434,8 +438,7 @@ export default class MapViewNavigation extends Component { * @param route * @returns {*} */ - getRouteMarkers(route) - { + getRouteMarkers(route) { if (!route || route.markers.constructor !== Array) return null; return route.markers.map((params, index) => { @@ -456,8 +459,7 @@ export default class MapViewNavigation extends Component { * @param navigationMode * @returns {*} */ - getPositionMarker(position, navigationMode) - { + getPositionMarker(position, navigationMode) { const type = navigationMode == NavigationModes.NAVIGATION ? POSITION_ARROW : undefined; return ( @@ -475,8 +477,7 @@ export default class MapViewNavigation extends Component { * @param route * @returns {*} */ - getRoutePolylines(route) - { + getRoutePolylines(route) { if (!route || route.polylines.constructor !== Array) return null; return route.polylines.map((params, index) => { @@ -496,11 +497,10 @@ export default class MapViewNavigation extends Component { * @param route * @returns {Array} */ - getDebugShapes(route) - { + getDebugShapes(route) { let result = []; - if(!route || !this.props.displayDebugMarkers) return result; + if (!route || !this.props.displayDebugMarkers) return result; const steps = this.state.route.steps; @@ -512,16 +512,16 @@ export default class MapViewNavigation extends Component { const coordinate = step.start; [ - {radius: this.props.routeStepDistance, color: 'blue'}, - {radius: this.props.routeStepDistance * this.props.routeStepInnerTolerance, color: 'red'}, - {radius: this.props.routeStepDistance * this.props.routeStepCenterTolerance, color: 'green'} + { radius: this.props.routeStepDistance, color: 'blue' }, + { radius: this.props.routeStepDistance * this.props.routeStepInnerTolerance, color: 'red' }, + { radius: this.props.routeStepDistance * this.props.routeStepCenterTolerance, color: 'green' } ].forEach(d => { - result.push(); + result.push(); c++; }); [ - {radius: this.props.routeStepDistance, color: 'blue'} + { radius: this.props.routeStepDistance, color: 'blue' } ].forEach(d => { let bearing = step.bearing; // - 180 > 0 ? step.bearing - 180 : 360 - step.bearing - 180; @@ -551,8 +551,7 @@ export default class MapViewNavigation extends Component { * @render * @returns {*[]} */ - render() - { + render() { const result = [ this.getRouteMarkers(this.state.route), this.getRoutePolylines(this.state.route), @@ -562,5 +561,4 @@ export default class MapViewNavigation extends Component { return result; } -} - +} \ No newline at end of file