This react component is fully developed using React Material UI framework to show GPS paths. You can play, pause and stop while playing GPS coordinates with this component.

Installation

npm install @material-ui/core @material-ui/icons react react-dom material-ui-gps-player --save

Usage

import Player from 'material-ui-gps-player';


class App extends Component {


  render() {
    return (
      <div>
        <Player
          apiKey="Your Key"
          language="en"
          zoom={14}
          coordinates={data}
        />
      </div>
    );
  }
}

Props

| Props (* required) | Defualt | Description | Type | |--- |--- |--- | --- | |apiKey * | undefined | API key for google maps | string | |coordinates* | [] | GPS Coordinates that containing lat:float,lng:float,time:int,bearing?:float properties. lat,lng,time properties are required. time property is expecting a UNIX timestamp and all other properties (lat,lng,bearing) expecting floats. bearing is optional. We are calculating bearing using nearest coordinates if you didn't supply. Pass boolean value to marker if you want to display a marker. All other properties taking as marker's props if marker is true. | array | | | | time:int is passing to all below callbacks as the first parameter.|| |onChangeTime | undefined | When time has changed in the player. | function | |onChangeSpeed| undefined | When player speed is changed. | function | | onPlay | undefined | This function will trigger when play button is clicked. | function | | onPause | undefined | When click the pause icon | function | | onPause | undefined | When click the stop icon | function | | currentTime | undefined | Currently playing time in UNIX format | number | | speeds | [-200, -100, 50, 100, 200, 500, 750, 1000] | Available speeds for the player. Current speed is choosing from these values when click on the forward button. | number[] | | speed | internal states | Currently playing speed. We are using our internal state if you didn't supplied a speed. | number | | timeFormat | HH:mm:ss | Time format to display start/end times. Please supply a time format supported in moment. | string | | iconMarker | {scale: 6,fillColor: blue[600],fillOpacity: 1,strokeWeight: 0}| google marker icon decorations. | object | | width | undefined | Width for the player wrapper. | number | | height | 500 | Height of the player wrapper. | number | | center | {lat: 7.8731,lng: 80.7718} | This is the center of map when initializing. center parameter required a object that contains lat, lng properties. | object | | polyLine | undefined | Poly Line properties. Ex:- {strokeWidth:4, strokeColor: '#fff'} | object | | speedMultiplier | 25 | Speed multiplier when switching between waiting time enabled and disabled. | number |

Testing

Install depedencies

npm install

Start the testing app

npm start

Contribution

All PR s and issues are welcome!