Maps & Routing - GrasspIt/GrasspReactNativeDriverApp GitHub Wiki

Routing Feature

Through the Routing Screen the driver may create a new route.

The driver selects which orders should be part of the route in the OrderSelectionModal, limited to the maximum number of orders allowed in a route for a given DSPR.

The Grassp API generates a new route and provides different legs for the route. These legs contain polylines with lat/long coordinates which may be used in a map.

When a new route is created, the driver may switch between two different views: Map View, which displays the route's orders on a map, and List View, which displays a list of the orders in the route.

The RouteActionButton appears in both views and allows the driver to begin the next leg of the route, which sets the next order in-process. Or to complete the in-process order.

React Native Maps

react-native-maps is a library using cross-platform map components for React Native. These map components are used in RouteMapView.

The MapView component displays the map, using latitude and longitude to determine the center of the map and latitudeDelta and longitudeDelta to determine the zoom factor.

MapView is the parent component for Markers and Polylines.

The Marker component displays pins for each order in the route and the driver's current location using latitude/longitude coordinates.

Each Marker contains a Callout component. Which appears when the driver presses a pin. The driver's callout displays the driver's name and the number of orders left in the route. Each order callout displays the customer's name and when clicked navigates to the OrderDetails screen.

The Polyline component displays a line on the map to show the route the driver must take between each leg. It does this using a provided array of latitude/longitude coordinates either for a specific order or for the route overview.