Last Mile UI Component - Mapbox

Install

npm install @localz/lastmile-ui-mapbox --save
react-native link react-native-mapbox-gl react-native-vector-icons

Install react-native-mapbox-gl

Installation for Android

Installation for iOS

for iOS, if you cannot find Mapbox.framework, please download it from this link Mapbox Framework

Install react-native-progress (only for iOS)

Installation Instructions

Basic

import Map from '@localz/lastmile-ui-mapbox';

<Map
  handlePress={this.handlePress}
  apiKey={apiKey}
  driver={driver}
  markers={markers} />

Params

apiKey (required)

Google Map API key Get a key

initialCenterCoordinate (optional)

The initial region to be displayed by the map.

initialCenterCoordinate={{
  latitude: 37.78825,
  longitude: -122.4324,
}}

initialZoomLevel (optional)

Initial zoom level the map will load at. 0 is the entire world, 18 is rooftop level.

initialZoomLevel={13}

initialDirection (optional)

Initial heading of the map in degrees, where 0 is north and 180 is south

initialDirection={0}

markers (required)

Markers (Parcels) on the map.

const markers = [{
  coordinates: [-37.8169748, 144.96050249999996], // [lat, lng]
  type: 'point',
  title: 'Stop1: Localz',
  id: '0', // string, starts from '0' to 'N'
  subtitle: '412 Collins St, Melbourne, VIC 3000', // address
}, {
  coordinates: [-37.8182711, 144.9670618],
  type: 'point',
  title: 'Stop2: Flinder Station',
  id: '1',
  subtitle: 'Flinders Street Railway Station, Flinders St, Melbourne VIC 3000',
}];

driver (required)

driver={{
	coordinates: [-37.8169748, 144.96050249999996], // [lat, lng]
  type: 'point',
  title: 'This is driver',
  subtitle: '34 Ovens St, Brunswick, VIC 3055', // position
  id: 'driver',
  driver: true,
  annotationImage: {
    source: {uri: 'driver'}, // [link for setting dirver image](https://github.com/mapbox/react-native-mapbox-gl/blob/master/API.md)
    height: 25,
    width: 25,
  },
}}

handlePress (required)

Called when the user presses the modal.

handlePress={() => { console.log('press') }}