MapCountdown
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
- Install
- Prepare route points
- Prepare Google Maps API Key
- Add MapCountdown
- With module bundler
- In browser
Install
yarn install map-countdown
or
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.
- First ensure
map-countdown
is installed. Next you have to download workout in .tcx format. The most popular sport tracking app are supported:- Endomondo - Instructions
- Polar - Instructions
- Garmin - Instructions
- After download open a terminal in your project's directory and run:
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
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).
MapCountdown Example
jQuery
You can use jQuery, if you will.
MapCountdown Example