From 590629a3d700efc5b23112c8fca8620fc254b744 Mon Sep 17 00:00:00 2001 From: Parfait mutshipayi Date: Fri, 3 Sep 2021 11:35:32 +0200 Subject: [PATCH 1/2] use animateToCamara instead of animateToCoordinate --- index.js | 4 - src/components/MapViewNavigation/index.js | 237 +++++++++++----------- 2 files changed, 119 insertions(+), 122 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 092a213a..73728091 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, Geolocation } from 'react-native'; import connectTheme from '../../themes'; import Geocoder from '../../modules/Geocoder'; @@ -16,8 +16,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'; /** @@ -54,7 +54,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 } /** @@ -85,6 +86,7 @@ export default class MapViewNavigation extends Component { routeStepCourseTolerance: 30, // in degress displayDebugMarkers: false, simulate: false, + onPositionChanged: undefined, options: {} } @@ -118,7 +120,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; } @@ -126,8 +128,7 @@ export default class MapViewNavigation extends Component { /** * @componentDidMount */ - componentDidMount() - { + componentDidMount() { this.watchId = navigator.geolocation.watchPosition(position => { this.setPosition(position.coords); @@ -138,8 +139,7 @@ export default class MapViewNavigation extends Component { /** * @componentWillUnmount */ - componentWillUnmount() - { + componentWillUnmount() { navigator.geolocation.clearWatch(this.watchId); } @@ -148,11 +148,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) @@ -198,7 +197,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; @@ -213,8 +212,7 @@ export default class MapViewNavigation extends Component { * @param coordinate * @param duration */ - updatePosition(coordinate, duration = 0) - { + updatePosition(coordinate, duration = 0) { this.props.map().animateToCoordinate(coordinate, duration); } @@ -223,17 +221,26 @@ export default class MapViewNavigation extends Component { * @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]; @@ -247,7 +254,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(); @@ -257,7 +264,7 @@ export default class MapViewNavigation extends Component { }); } - if(trap.isLeaving()) { + if (trap.isLeaving()) { this.updateStep(this.stepIndex); } }); @@ -269,33 +276,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.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 }) } /** @@ -304,14 +312,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); @@ -331,16 +338,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]; @@ -348,7 +354,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); } @@ -365,8 +371,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 = { @@ -376,7 +381,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, }); @@ -393,8 +398,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 = { @@ -433,17 +437,14 @@ 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) => { - return ( - ); }); @@ -455,16 +456,13 @@ export default class MapViewNavigation extends Component { * @param navigationMode * @returns {*} */ - getPositionMarker(position, navigationMode) - { + getPositionMarker(position, navigationMode) { const type = navigationMode == NavigationModes.NAVIGATION ? POSITION_ARROW : undefined; - return ( - ) } @@ -474,17 +472,14 @@ 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) => { - return params ? ( - ) : null; }); @@ -495,71 +490,77 @@ export default class MapViewNavigation extends Component { * @param route * @returns {Array} */ - getDebugShapes(route) - { - let result = []; + getDebugShapes(route) { + let result = []; - if(!route || !this.props.displayDebugMarkers) return result; + if (!route || !this.props.displayDebugMarkers) return result; - const steps = this.state.route.steps; + const steps = this.state.route.steps; - let c = 0; + let c = 0; - steps.forEach((step, index) => { + steps.forEach((step, index) => { - const coordinate = step.start; + 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'} - ].forEach(d => { - result.push(); - c++; - }); + [ + { 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( < Circle key = { c } + strokeColor = { d.color } + strokeWidth = { 2 } + center = { step.start } + radius = { d.radius } + />); + c++; + }); - [ - {radius: this.props.routeStepDistance, color: 'blue'} - ].forEach(d => { + [ + { radius: this.props.routeStepDistance, color: 'blue' } + ].forEach(d => { - let bearing = step.bearing; // - 180 > 0 ? step.bearing - 180 : 360 - step.bearing - 180; + let bearing = step.bearing; // - 180 > 0 ? step.bearing - 180 : 360 - step.bearing - 180; - let coords = Tools.toArcPolygon( - coordinate, - bearing - this.props.routeStepCourseTolerance, - bearing + this.props.routeStepCourseTolerance, - this.props.routeStepDistance - ) + let coords = Tools.toArcPolygon( + coordinate, + bearing - this.props.routeStepCourseTolerance, + bearing + this.props.routeStepCourseTolerance, + this.props.routeStepDistance + ) - result.push(); - c++; - }) + result.push( < Polyline key = { c } + strokeColor = { d.color } + strokeWidth = { 8 } + coordinates = { coords } + />); + c++; + }) - }); + }); - return result; - } + return result; + } - /** - * @render - * @returns {*[]} - */ - render() - { - const result = [ - this.getRouteMarkers(this.state.route), - this.getRoutePolylines(this.state.route), - this.getPositionMarker(this.state.position, this.state.navigationMode), - this.getDebugShapes(this.state.route) - ]; - - return result; - } -} + /** + * @render + * @returns {*[]} + */ + render() { + const result = [ + this.getRouteMarkers(this.state.route), + this.getRoutePolylines(this.state.route), + this.getPositionMarker(this.state.position, this.state.navigationMode), + this.getDebugShapes(this.state.route) + ]; + return result; + } + } \ No newline at end of file From f4bf678d460bf7f82cfd1ab0c7e0a14c92100153 Mon Sep 17 00:00:00 2001 From: Parfait mutshipayi Date: Fri, 3 Sep 2021 11:55:49 +0200 Subject: [PATCH 2/2] add onPositionChanged event --- src/components/MapViewNavigation/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MapViewNavigation/index.js b/src/components/MapViewNavigation/index.js index 73728091..1a00db03 100644 --- a/src/components/MapViewNavigation/index.js +++ b/src/components/MapViewNavigation/index.js @@ -212,9 +212,9 @@ 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 @@ -287,7 +287,7 @@ export default class MapViewNavigation extends Component { // update position on map if (this.state.navigationMode == NavigationModes.NAVIGATION) { - this.updatePosition(position); + //this.updatePosition(position); this.updateBearing(heading, longitude, latitude); if (this.props.onPositionChanged) {