react-routific-map v0.0.3

React Routific Map

A React component to visualize your delivery routes in google maps

Installing

npm install --save react-routific-map

Example Usage

See visits, drivers and routes format in section below

import React from 'react';
import RoutificMap from "react-routific-map"

var MyComponent = React.createClass({
  render: function() {
    return <RoutificMap
              googleApiKey={"YOUR_GOOGLE_API_KEY"}
              onMove={(props, map, e) => { console.log("MOVED") }}
              onDragstart={(props, map, e) => { console.log("DRAG START") }}
              onDragend={(props, map, e) => { console.log("DRAG END") }}
              zoom={10}
              center={{ lat: 38.894929, lng: -122.419416 }}
              visits={visits}
              drivers={drivers}
              routes={routes}/>
  }
});

Props

RoutificMap.propTypes = {
  googleApiKey: PropTypes.string.isRequired,
  visits: PropTypes.object,
  vehicles: PropTypes.object,
  routes: PropTypes.object,
  zoom: PropTypes.number,
  center: PropTypes.object,
  onMove: PropTypes.func,
  onDragstart: PropTypes.func,
  onDragend: PropTypes.func,
  onClick: PropTypes.func,
  onDblclick: PropTypes.func
}

Data Format

const visits = {
  "v_001": {id: "v_001", lat: 41.7880566, lng: -87.88401779},
  "v_002": {id: "v_002",lat: 41.87343744, lng: -87.7944155},
  "v_003": {id: "v_003",lat: 41.88378968, lng: -87.8450874},
  "v_004": {id: "v_004",lat: 41.94436866, lng: -87.81099695},
  "v_005": {id: "v_005",lat: 41.82260594, lng: -87.84378147},
  "v_006": {id: "v_006",lat: 41.80406161, lng: -87.80990818},
  "v_007": {id: "v_007",lat: 41.9208365, lng: -87.8116492},
  "v_008": {id: "v_008",lat: 41.84991382, lng: -87.89715668},
  "v_009": {id: "v_009",lat: 41.83265497, lng: -87.64740891},
  "v_010": {id: "v_010",lat: 41.81539353, lng: -87.65419839},
  "v_011": {id: "v_011",lat: 41.85387042, lng: -87.87948636},
  "v_012": {id: "v_012",lat: 41.93510204, lng: -87.76419395},
  "v_013": {id: "v_013",lat: 41.84372049, lng: -87.86370795},
  "v_014": {id: "v_014",lat: 41.88197629, lng: -87.62626938},
  "v_015": {id: "v_015",lat: 41.81014457, lng: -87.71029768},
  "v_016": {id: "v_016",lat: 41.82795009, lng: -87.68886751}
}

const drivers = {
  "d_001": {
    id: "001",
    name: "Rennie",
    startPosition: {id: "d_001_start", lat: 41.7880566, lng: -87.88401779},
    endPosition: {id: "d_001_end", lat: 41.7880566, lng: -87.76419395},
    color: "orange"
  },
  "d_002": {
    id: "002",
    name: "Grace",
    startPosition: {id: "d_002_start", lat: 41.93510204, lng: -87.76419395},
    endPosition: {id: "d_002_end", lat: 41.82795009, lng: -87.76419395},
    color: "#20BF55"
  },
  "d_003": {
    id: "003",
    name: "John",
    startPosition: {id: "d_003_start", lat: 41.84991382, lng: -87.87948636},
    endPosition: {id: "d_003_end", lat: 41.94436866, lng: -87.87948636},
    color: "rgba(0,136,255,1)"
  }

}

const routes = {
  "d_002": ["d_002_start", "v_002", "v_003", "v_004", "d_002_end"],
  "d_001": ["d_001_start", "v_005", "v_006", "v_007", "d_001_end"],
  "d_003": ["d_003_start", "v_008", "v_009", "v_010", "d_003_end"]
}

Developing for React Routific Map Locally

In order to develop on React Routific Map locally using npm symlinks, the following must be done:

• Clone React Routific Map into the same directory as your project folder

Within React-Routific-Map

• Install dependencies using npm i
• Link your project's instance of React using npm link ../myproject/node_modules/react (The reason for this link is described in this Stack Overflow post)
• Link the package using npm link
• Build the project using npm run build

Within your project repo

• Link React Routific Map using npm link react-routific-map

You can now start your project and begin developing.

Updating during development

In order to update React Routific Map while developing, simply use the command npm run build to rebuild the project. Hot reloading should take care of updating your project.