{"id":13760167,"url":"https://github.com/janigowski/map-countdown","last_synced_at":"2025-05-10T10:31:43.110Z","repository":{"id":34957566,"uuid":"191977999","full_name":"dawidjaniga/map-countdown","owner":"dawidjaniga","description":"Display the countdown on top of the Google Maps","archived":false,"fork":false,"pushed_at":"2023-11-01T23:58:46.000Z","size":9041,"stargazers_count":5,"open_issues_count":36,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-10T19:52:13.889Z","etag":null,"topics":["countdown","countdown-javascript","countdown-timer","google-maps"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dawidjaniga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-14T16:53:59.000Z","updated_at":"2023-08-18T11:30:39.000Z","dependencies_parsed_at":"2024-08-03T13:14:39.385Z","dependency_job_id":null,"html_url":"https://github.com/dawidjaniga/map-countdown","commit_stats":{"total_commits":109,"total_committers":5,"mean_commits":21.8,"dds":0.4036697247706422,"last_synced_commit":"6d0c63c02f69d2b330ca24be2ae297bb440ec2b9"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawidjaniga%2Fmap-countdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawidjaniga%2Fmap-countdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawidjaniga%2Fmap-countdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawidjaniga%2Fmap-countdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dawidjaniga","download_url":"https://codeload.github.com/dawidjaniga/map-countdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224877035,"owners_count":17384699,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["countdown","countdown-javascript","countdown-timer","google-maps"],"created_at":"2024-08-03T13:01:04.672Z","updated_at":"2025-05-10T10:31:37.501Z","avatar_url":"https://github.com/dawidjaniga.png","language":"JavaScript","readme":"# MapCountdown\n\n[![Build Status](https://travis-ci.org/dawidjaniga/map-countdown.svg?branch=master)](https://travis-ci.org/dawidjaniga/map-countdown)\n[![Coverage Status](https://img.shields.io/codecov/c/github/dawidjaniga/map-countdown.svg)](https://codecov.io/gh/dawidjaniga/map-countdown)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Greenkeeper badge](https://badges.greenkeeper.io/dawidjaniga/map-countdown.svg)](https://greenkeeper.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![semantic-release](https://img.shields.io/npm/v/map-countdown.svg)](https://www.npmjs.com/package/map-countdown)\n\n## Overview\nMapCountdown 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.\n\n## Demo\n![Demo](./assets/map-countdown-demo.gif)\n\n\n## Usage\n### Steps\n1. Install\n2. Prepare route points\n3. Prepare Google Maps API Key\n4. Add MapCountdown\n    1. With module bundler\n    2. In browser\n\n\n### Install\n``` bash\nyarn install map-countdown\n```\nor\n``` bash\nnpm install map-countdown\n```\n\n### Prepare route points\nTo 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.\n\n1. First ensure `map-countdown` is installed. Next you have to download workout in **.tcx** format. The most popular sport tracking app are supported:\n    1. Endomondo - [Instructions](https://support.endomondo.com/hc/en-us/articles/213219528-File-Export)\n    2. Polar - [Instructions](https://support.polar.com/en/support/how_do_i_export_individual_training_sessions_from_polar_flow_web_service)\n    3. Garmin - [Instructions](https://support.garmin.com/pl-PL/?faq=W1TvTPW8JZ6LfJSfK512Q8)\n2. After download open a terminal in your project's directory and run:\n```bash\nroute-importer ~/Downloads/training-file.tcx routePoints.js\n```\n`route-importer` will parse _TCX_ file and save it with given name.\n\n### Prepare Google Maps API Key\nGoogle Maps need an api key for working. If you don't have a key already, don't worry. You can create new one below:\nhttps://developers.google.com/maps/documentation/embed/get-api-key\nReplace _'GOOGLE_API_KEY'_ from chosen snippet below with your api key.\n\n### Add MapCountdown\n#### With module bundler\n``` javascript\nimport MapCountdown from 'map-countdown'\nimport './../path/to/routePoints'\n\nnew Countdown({\n    selector: '#countdown',\n    key: 'GOOGLE_API_KEY',\n    meta: '2019-07-13 11:30:00'\n})\n```\n\n#### In browser\nYou have to include _routePoints.js_ along with MapCountdown, which load those points automatically.\nNext, add container for countdown (ie. _#countdown_).\n``` html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eMapCountdown Example\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/map-countdown@latest/dist/bundle.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"routePoints.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        window.addEventListener('DOMContentLoaded', function () {\n            new MapCountdown({\n                selector: '#countdown',\n                key: 'GOOGLE_API_KEY',\n                meta: '2019-07-13 11:30:00',\n            })\n        })\n    \u003c/script\u003e\n    \u003cbody\u003e\n\n        \u003cdiv id=\"countdown\"\u003e\u003c/div\u003e\n\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n#### jQuery\nYou can use jQuery, if you will.\n``` html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eMapCountdown Example\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/map-countdown@latest/dist/bundle.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"routePoints.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        $(function () {\n            new MapCountdown({\n                selector: '#countdown',\n                key: 'GOOGLE_API_KEY',\n                meta: '2019-07-13 11:30:00',\n            })\n        })\n    \u003c/script\u003e\n    \u003cbody\u003e\n\n        \u003cdiv id=\"countdown\"\u003e\u003c/div\u003e\n\n    \u003c/body\u003e\n\u003c/html\u003e\n```","funding_links":[],"categories":["Date"],"sub_categories":["Runner"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanigowski%2Fmap-countdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjanigowski%2Fmap-countdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanigowski%2Fmap-countdown/lists"}