map-countdown

    1.3.0 • Public • Published

    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

    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:
    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>

    Keywords

    none

    Install

    npm i map-countdown

    DownloadsWeekly Downloads

    1

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    29.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • dawidjaniga