RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/dawidjaniga/map-countdown below:

janigowski/map-countdown: 🗺️⏳ Count down to your events—visually and interactively! With React at its core, this project merges time and place, turning ordinary countdowns into engaging, map-based experiences.

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
1. With module bundler
2. In browser

yarn install map-countdown

npm install map-countdown

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:
1. Endomondo - Instructions
2. Polar - Instructions
3. 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.

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>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4