{"id":26445545,"url":"https://github.com/saml-dev/mmm-traffic","last_synced_at":"2025-07-27T02:34:36.230Z","repository":{"id":55498591,"uuid":"56448968","full_name":"saml-dev/MMM-Traffic","owner":"saml-dev","description":"This a module for the MagicMirror. It displays travel time between two locations, using the Mapbox directions API to factor in current traffic conditions.","archived":false,"fork":false,"pushed_at":"2025-02-08T17:11:47.000Z","size":321,"stargazers_count":144,"open_issues_count":1,"forks_count":46,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-07-09T11:38:45.696Z","etag":null,"topics":["magicmirror","mapbox","mmm-traffic"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saml-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-17T17:21:09.000Z","updated_at":"2025-06-09T09:58:46.000Z","dependencies_parsed_at":"2022-08-15T01:50:31.135Z","dependency_job_id":null,"html_url":"https://github.com/saml-dev/MMM-Traffic","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/saml-dev/MMM-Traffic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saml-dev%2FMMM-Traffic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saml-dev%2FMMM-Traffic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saml-dev%2FMMM-Traffic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saml-dev%2FMMM-Traffic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saml-dev","download_url":"https://codeload.github.com/saml-dev/MMM-Traffic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saml-dev%2FMMM-Traffic/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267289402,"owners_count":24064726,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["magicmirror","mapbox","mmm-traffic"],"created_at":"2025-03-18T11:19:13.410Z","updated_at":"2025-07-27T02:34:36.204Z","avatar_url":"https://github.com/saml-dev.png","language":"JavaScript","readme":"# MMM-Traffic\n\n![module screenshot](screenshots/04-multiple.png)\n\nThis a module for the [MagicMirror](https://github.com/MichMich/MagicMirror/tree/develop). It displays travel time between two locations, using the Mapbox directions API to factor in current traffic conditions.\n\n# Table of Contents\n\n- [Installation](#installation)\n- [Mapbox Access Token](#mapbox-access-token)\n- [Styling](#styling)\n- [Configuration](#configuration)\n  - [Required](#required)\n  - [Basic Options](#basic-options)\n  - [Translation/Display](#translationdisplay)\n  - [Per Day/Time Customization](#per-daytime-customization)\n- [Examples](#examples)\n  - [Simplest Config](#simplest-config)\n  - [Minimal Look](#minimal-look)\n  - [Use both lines](#use-both-lines)\n  - [Multiple Routes](#multiple-routes)\n  - [Per day customization](#per-day-customization)\n- [Dependencies](#dependencies)\n- [Legacy](#legacy)\n\n## Installation\n\nNavigate into your MagicMirror's `modules` folder and execute these commands:\n\n```shell\ngit clone https://github.com/SamLewis0602/MMM-Traffic.git\ncd MMM-Traffic\nnpm install\n```\n\n## Mapbox Access Token\n\n1. Create an account at [Mapbox](https://account.mapbox.com/)\n2. Copy the access token visible after account creation (go [here](https://account.mapbox.com/) if you don't see it)\n\n## Styling\n\nYou can use a global `MagicMirror/css/custom.css` file to customize the styles for each line of MMM-Traffic separately. Each line has its own class that should be used to apply styles:\n  - `.mmmtraffic-firstline`\n  - `.mmmtraffic-secondline`\n\nFor example, this css\n```\n.mmmtraffic-firstline {\n  font-size: 40px;\n  color: yellow;\n}\n\n.mmmtraffic-secondline {\n  color: green;\n}\n```\nleads to this abomination:\n![css example screenshot](screenshots/css-example.png)\n\n## Configuration\n\n### Required\n\nSee [here](https://support.google.com/maps/answer/18539)\nfor instructions on how to use Google Maps webpage/app to get coordinates for your origin/destination.\n\n_Note: Google maps coordinates are `latitude,longitude`, but Mapbox uses `longitude,latitude` so be sure to reverse what you copy from Google._\n\n| Option              | Description                                  | Type   | Example                   |\n| ------------------- | -------------------------------------------- | ------ | ------------------------- |\n| `accessToken`       | Mapbox access token                          | string | -                         |\n| `originCoords`      | `longitude,latitude` of the origin location. | string | `'-84.504259,33.882107'` |\n| `destinationCoords` | `longitude,latitude` of the origin location. | string | `'-84.504259,33.882107'` |\n\n### Basic Options\n\n| Option       | Description                                       | Type    | Default Value           | Supported Options    |\n| ------------ | ------------------------------------------------- | ------- | ----------------------- | -------------------  |\n| `mode`       | Change the module to cycling or walking.          | string  | `'driving'`             | `'walking' 'cycling'`|\n| `language`   | Define the commute time language.                 | string  | `config.language`       | Any language string  |\n| `interval`   | How often the traffic is updated in milliseconds. | integer | `300000`\u003cbr\u003e(5 minutes) |                      |\n| `showSymbol` | Whether to show the car symbol or not.            | boolean | true                    |                      |\n\n### Translation/Display\n\nUse these options to customize/translate the module's text.\n\n_\\*Note: See tokens below to see what tokens will be replaced with real values\nin firstLine/secondLine._\n\n| Option        | Description                                                                         | Type   | Default Value                           | Token Replacement  |\n| ------------- | ----------------------------------------------------------------------------------- | ------ | --------------------------------------- | ------------------ |\n| `loadingText` | The text used when loading the initial duration.                                    | string | `'Loading...'`                          | :x:                |\n| `firstLine`   | The main line of the module                                                         | string | `'Current duration is {duration} mins'` | :heavy_check_mark: |\n| `secondLine`  | The second line of the module, appears below the first line in smaller, dimmer text | string | `undefined`                             | :heavy_check_mark: |\n\n#### Tokens\n\n| Token        | Value                                         |\n| ------------ | --------------------------------------------- |\n| `{duration}` | The driving time returned from the mapbox API |\n| `{route}`    | The summary of the route from the mapbox API  |\n\n### Per Day/Time Customization\n\nUsing these options to hide the module when you're not using it will save API calls,\nallowing you to have a shorter interval or more MMM-Traffic modules without getting\nrate limited.\n\n| Option       | Description                                                              | Type       | Default                 |\n| ------------ | ------------------------------------------------------------------------ | ---------- | ----------------------- |\n| `days`       | Which days of the week to show the traffic module, with 0 being Sunday   | Array[int] | `[0, 1, 2, 3, 4, 5, 6]` |\n| `hoursStart` | What time to begin showing the module on the days it shows, 24 hour time | String | `\"00:00\"`                 |\n| `hoursEnd`   | What time to stop showing the module on the days it shows, 24 hour time  | String | `\"23:59\"`                 |\n\n## Examples\n\n### Simplest Config\n\n```js\n{\n\tmodule: \"MMM-Traffic\",\n\tposition: \"top_left\",\n\tconfig: {\n\t\taccessToken: \"your_key_here\",\n\t\toriginCoords: \"-84.398848,33.755165\",\n\t\tdestinationCoords: \"-84.504259,33.88210\",\n\t}\n},\n```\n\n![simple config screenshot](screenshots/01-simple_config.png)\n\n### Minimal Look\n\n```js\n{\n\tmodule: \"MMM-Traffic\",\n\tposition: \"top_left\",\n\tconfig: {\n\t\taccessToken: \"your_key_here\",\n\t\toriginCoords: \"-84.398848,33.755165\",\n\t\tdestinationCoords: \"-84.504259,33.88210\",\n\t\tshowSymbol: false,\n\t\tfirstLine: \"{duration} mins\"\n\t}\n},\n```\n\n![minimal screenshot](screenshots/02-minimal_look.png)\n\n### Use both lines\n\n```js\n{\n\tmodule: \"MMM-Traffic\",\n\tposition: \"top_left\",\n\tconfig: {\n\t\taccessToken: \"your_key_here\",\n\t\toriginCoords: \"-84.398848,33.755165\",\n\t\tdestinationCoords: \"-84.504259,33.88210\",\n\t\tfirstLine: \"{duration} mins\",\n\t\tsecondLine: \"Coffee Run\"\n\t}\n},\n```\n![both lines custom screenshot](screenshots/03-both_lines.png)\n\n### Use both lines with route\n\n```js\n{\n\tmodule: \"MMM-Traffic\",\n\tposition: \"top_left\",\n\tconfig: {\n\t\taccessToken: \"your_key_here\",\n\t\toriginCoords: \"-84.398848,33.755165\",\n\t\tdestinationCoords: \"-84.504259,33.88210\",\n\t\tfirstLine: \"{duration} mins\",\n\t\tsecondLine: \"via {route}\"\n\t}\n},\n```\n![both lines with route screenshot](screenshots/06-both_lines_route.png)\n\n\n### Multiple Routes\n\n```js\n{\n\tmodule: \"MMM-Traffic\",\n\tposition: \"top_left\",\n\tconfig: {\n\t\taccessToken: \"your_key_here\",\n\t\toriginCoords: \"-84.398848,33.755165\",\n\t\tdestinationCoords: \"-84.504259,33.88210\",\n\t\tfirstLine: \"{duration} mins\",\n\t\tsecondLine: \"Home To School\",\n\t}\n},\n{\n\tmodule: \"MMM-Traffic\",\n\tposition: \"top_left\",\n\tconfig: {\n\t\taccessToken: \"your_key_here\",\n\t\toriginCoords: \"-84.398848,33.755165\",\n\t\tdestinationCoords: \"-84.504259,33.88210\",\n\t\tfirstLine: \"{duration} mins\",\n\t\tsecondLine: \"Home To Work\"\n\t}\n},\n```\n\n![multiple routes screenshot](screenshots/04-multiple.png)\n\n### Per day customization\n\nThis setup would show one route for Monday, Wednesday, and Friday, and another for\nTuesday and Thursday. It would only show between 07:00 and 09:00 each day. It would\nbe completely hidden on weekends.\n\n```js\n{\n\tmodule: \"MMM-Traffic\",\n\tposition: \"top_left\",\n\tconfig: {\n\t\taccessToken: \"your_key_here\",\n\t\toriginCoords: \"-84.398848,33.755165\",\n\t\tdestinationCoords: \"-84.504259,33.88210\",\n\t\tfirstLine: \"{duration} mins\",\n\t\tsecondLine: \"School\",\n\t\tdays: [0,2,4],\n\t\thoursStart: \"07:00\",\n\t\thoursEnd: \"09:00\"\n\t}\n},\n{\n\tmodule: \"MMM-Traffic\",\n\tposition: \"top_left\",\n\tconfig: {\n\t\taccessToken: \"your_key_here\",\n\t\toriginCoords: \"-84.398848,33.755165\",\n\t\tdestinationCoords: \"-84.504259,33.88210\",\n\t\tfirstLine: \"{duration} mins\",\n\t\tsecondLine: \"Work\",\n\t\tdays: [1,3],\n\t\thoursStart: \"07:00\",\n\t\thoursEnd: \"09:00\"\n\t}\n},\n```\n\n| Day         | View                                           |\n| ----------- | ---------------------------------------------- |\n| Mon/Wed/Fri | ![minimal screenshot](screenshots/05-mwf.png)  |\n| Tu/Th       | ![minimal screenshot](screenshots/05-tuth.png) |\n\n## Dependencies\n\n- [node-fetch](https://www.npmjs.com/package/node-fetch)\n- [moment](https://www.npmjs.com/package/moment)\n\n## Legacy\n\nIf you want to continue using the old version with Google Maps and more customization, use the [1.0-not-supported](https://github.com/SamLewis0602/MMM-Traffic/tree/1.0-not-supported) branch.\n\n\u003cb\u003eNOTE\u003c/b\u003e: this version is no longer supported, please do not open issues on the repo if you run into issues with this version.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaml-dev%2Fmmm-traffic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaml-dev%2Fmmm-traffic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaml-dev%2Fmmm-traffic/lists"}