map-countdown alternatives and similar libraries
Based on the "Date" category.
Alternatively, view map-countdown alternatives based on common mentions on social networks and blogs.
-
timeago.js
:clock8: :hourglass: timeago.js is a tiny(2.0 kb) library used to format date with `*** time ago` statement. -
jquery-timeago
:clock8: The original jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago"). -
Tempo
📆 Parse, format, manipulate, and internationalize dates and times in JavaScript and TypeScript. -
timezone-js
DISCONTINUED. Timezone-enabled JavaScript Date object. Uses Olson zoneinfo files for timezone data.
Civic Auth - Auth in Less Than 5 Minutes

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of map-countdown or a related project?
README
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
[Demo](./assets/map-countdown-demo.gif)
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:
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
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>
<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>
jQuery
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>