Popularity
0.5
Stable
Activity
0.0
Stable
5
2
2

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: Date    
Latest version: v1.3.0

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.

Do you think we are missing an alternative of map-countdown or a related project?

Add another 'Date' Library
InfluxDB - Power Real-Time Data Analytics at Scale
sponsored www.influxdata.com

Popular Comparisons

WorkOS - The modern identity platform for B2B SaaS
sponsored workos.com

README

MapCountdown

Build Status Coverage Status JavaScript Style Guide Greenkeeper badge semantic-release semantic-release

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

  1. Install
  2. Prepare route points
  3. Prepare Google Maps API Key
  4. Add MapCountdown
    1. With module bundler
    2. 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.

  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
    2. Polar - Instructions
    3. Garmin - Instructions
  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

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>