https://github.com/whizsid/material-ui-gps-player

GPS player developed using react and material ui
https://github.com/whizsid/material-ui-gps-player

google-maps gps-player material-ui pinned react seekbar

Last synced: 3 months ago
JSON representation

GPS player developed using react and material ui

• Host: GitHub
• URL: https://github.com/whizsid/material-ui-gps-player
• Owner: whizsid
• License: mit
• Created: 2019-07-24T20:15:00.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-03T10:53:03.000Z (almost 5 years ago)
• Last Synced: 2024-09-15T17:46:53.300Z (4 months ago)
• Topics: google-maps, gps-player, material-ui, pinned, react, seekbar
• Language: JavaScript
• Homepage:
• Size: 413 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


---











---

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](https://i.imgur.com/yp5BOUf.png)

## 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 (

      


        

      

    );

  }

}


```

## 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!