React-native-leaflet-routing NPM

react-native-leaflet-routing

A React Native component using WebView to provide a Leaflet Routing.

Overview

This package is based on :

reggie3/react-native-webview-leaflet

For the map :

For the routing :

perliedman/leaflet-routing-machine

These packages have each a complete documentation that I recommend to read if you want to edit this component.

Install

npm install --save react-native-leaflet-routing

Usage

Import

import Routing from 'react-native-leaflet-routing';

Render

<Routing
  // optional: map layer
  mapLayer={mapLayer}

  //optional : initial region displayed
  initialRegion={[latitude, longitude]}

  // optional: coordinates of the starting point
  from={[latitude, longitude]}

  // optional: coordinates of the arriving point
  to={[latitude, longitude]}

  // optional : event functions
  eventReceiver={eventReceiver}

  // optional: url of routing server
  urlRouter={urlRouter}

  // optional: own position
  ownPositionMarker={ownPositionMarker}

  // optional: list of markers
  markers={markers} />

Config

mapLayer is an optional object :

{
  name: 'OpenStreetMap',
  type: 'TileLayer',
  url: `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`,
  attribution: '&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors'
}

latitude and longitude are optional numbers.

eventReceiver is an optional object :

{
  onLoad: (event) => {},
  onUnload: (event) => {},
  onMapLoaded: (event) => {},
  onUpdateMapState: (event) => {},
  onMapClicked: (event) => {},
  onMapMarkerClicked: (event) => {},
  onZoom: (event) => {},
  onZoomStart: (event) => {},
  onZoomEnd: (event) => {},
  onZoomLevelsChange: (event) => {},
  onMove: (event) => {},
  onMoveStart: (event) => {},
  onMoveEnd: (event) => {},
  onCurrentPositionClicked: (event) => {},
  onResize: (event) => {},
  onViewReset: (event) => {},
  onRoutesFound: (event) => {},
  onRouteSelected: (event) => {},
  onRouteError: (event) => {}
}

urlRouter is an optional string.

markers is an optional array of Marker (see below the format of Marker).

ownPositionMarker is an optional Marker object (see below the format of Marker).

Marker is an object :

{
  coords: [latitude, longitude], // required. latitude and longitude are number
  icon: '❤️', // optional. Can be an html img or string
  size: [width, height] // required if icon is setted. width and height are number
}