material-ui-gps-player

---

---

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!