Material Ui Gps Player

GPS player developed using react and material ui

License: MIT Code Style: prettier npm

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.

material-ui-gps-player Preview


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


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

class App extends Component {

  render() {
    return (
          apiKey="Your Key"


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


Install depedencies

npm install

Start the testing app

npm start


All PR s and issues are welcome!

Popular Material Projects
Popular Gps Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Play Framework
Material Ui
Google Maps