https://github.com/janigowski/map-countdown
Display the countdown on top of the Google Maps
https://github.com/janigowski/map-countdown
countdown countdown-javascript countdown-timer google-maps
Last synced: about 1 month ago
JSON representation
Display the countdown on top of the Google Maps
- Host: GitHub
- URL: https://github.com/janigowski/map-countdown
- Owner: dawidjaniga
- License: mit
- Created: 2019-06-14T16:53:59.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-01T23:58:46.000Z (over 1 year ago)
- Last Synced: 2024-10-10T19:52:13.889Z (9 months ago)
- Topics: countdown, countdown-javascript, countdown-timer, google-maps
- Language: JavaScript
- Homepage:
- Size: 8.62 MB
- Stars: 5
- Watchers: 2
- Forks: 3
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MapCountdown
[](https://travis-ci.org/dawidjaniga/map-countdown)
[](https://codecov.io/gh/dawidjaniga/map-countdown)
[](https://standardjs.com)
[](https://greenkeeper.io/)
[](https://github.com/semantic-release/semantic-release)
[](https://www.npmjs.com/package/map-countdown)
## Overview
MapCountdown is a JavaScript browser library which shows countdown with additional route filling on a map. It uses Google Map to draw polygons from provided paths and animates them according to time left.
## Demo
## Usage
### Steps
1. Install
2. Prepare route points
3. Prepare Google Maps API Key
4. Add MapCountdown
1. With module bundler
2. In browser
### Install
``` bash
yarn install map-countdown
```
or
``` bash
npm install map-countdown
```
### Prepare route points
To draw polygons on Google Maps we need to pass an array of route points. To do that we can import **.tcx** file and use `route-parser` CLI to parse it.
1. First ensure `map-countdown` is installed. Next you have to download workout in **.tcx** format. The most popular sport tracking app are supported:
1. Endomondo - [Instructions](https://support.endomondo.com/hc/en-us/articles/213219528-File-Export)
2. Polar - [Instructions](https://support.polar.com/en/support/how_do_i_export_individual_training_sessions_from_polar_flow_web_service)
3. Garmin - [Instructions](https://support.garmin.com/pl-PL/?faq=W1TvTPW8JZ6LfJSfK512Q8)
2. After download open a terminal in your project's directory and run:
```bash
route-importer ~/Downloads/training-file.tcx routePoints.js
```
`route-importer` will parse _TCX_ file and save it with given name.
### Prepare Google Maps API Key
Google Maps need an api key for working. If you don't have a key already, don't worry. You can create new one below:
https://developers.google.com/maps/documentation/embed/get-api-key
Replace _'GOOGLE_API_KEY'_ from chosen snippet below with your api key.
### Add MapCountdown
#### With module bundler
``` javascript
import MapCountdown from 'map-countdown'
import './../path/to/routePoints'
new Countdown({
selector: '#countdown',
key: 'GOOGLE_API_KEY',
meta: '2019-07-13 11:30:00'
})
```
#### In browser
You have to include _routePoints.js_ along with MapCountdown, which load those points automatically.
Next, add container for countdown (ie. _#countdown_).
``` html
MapCountdown Example
window.addEventListener('DOMContentLoaded', function () {
new MapCountdown({
selector: '#countdown',
key: 'GOOGLE_API_KEY',
meta: '2019-07-13 11:30:00',
})
})
```
#### jQuery
You can use jQuery, if you will.
``` html
MapCountdown Example
$(function () {
new MapCountdown({
selector: '#countdown',
key: 'GOOGLE_API_KEY',
meta: '2019-07-13 11:30:00',
})
})
```