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.
- Install
- Prepare route points
- Prepare Google Maps API Key
- Add MapCountdown
- With module bundler
- In browser
yarn install map-countdownor
npm install map-countdownTo 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-countdownis 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.jsroute-importer will parse TCX file and save it with given name.
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.
import MapCountdown from 'map-countdown'
import './../path/to/routePoints'
new Countdown({
selector: '#countdown',
key: 'GOOGLE_API_KEY',
meta: '2019-07-13 11:30:00'
})You have to include routePoints.js along with MapCountdown, which load those points automatically. Next, add container for countdown (ie. #countdown).
<html>
<head>
<title>MapCountdown Example</title>
<script src="https://unpkg.com/map-countdown@latest/dist/bundle.js"></script>
<script src="routePoints.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
new MapCountdown({
selector: '#countdown',
key: 'GOOGLE_API_KEY',
meta: '2019-07-13 11:30:00',
})
})
</script>
<body>
<div id="countdown"></div>
</body>
</html>You can use jQuery, if you will.
<html>
<head>
<title>MapCountdown Example</title>
<script src="https://unpkg.com/map-countdown@latest/dist/bundle.js"></script>
<script src="routePoints.js"></script>
<script>
$(function () {
new MapCountdown({
selector: '#countdown',
key: 'GOOGLE_API_KEY',
meta: '2019-07-13 11:30:00',
})
})
</script>
<body>
<div id="countdown"></div>
</body>
</html>