https://github.com/mapbox/mapbox-gl-traffic

Show and hide traffic layers in your Mapbox GL traffic style
https://github.com/mapbox/mapbox-gl-traffic

Last synced: about 17 hours ago
JSON representation

Show and hide traffic layers in your Mapbox GL traffic style

• Host: GitHub
• URL: https://github.com/mapbox/mapbox-gl-traffic
• Owner: mapbox
• License: bsd-3-clause
• Created: 2017-05-03T21:59:37.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-07-26T00:22:18.000Z (6 months ago)
• Last Synced: 2024-12-14T11:52:09.299Z (29 days ago)
• Language: JavaScript
• Homepage:
• Size: 135 KB
• Stars: 82
• Watchers: 13
• Forks: 37
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-maplibre - mapbox-gl-traffic - Hide and show traffic layers on your map with an optional toggle button. (Map Rendering Plugins / JavaScript)

README

        
# Mapbox GL Traffic [![Build Status](https://travis-ci.org/mapbox/mapbox-gl-traffic.svg?branch=master)](https://travis-ci.org/mapbox/mapbox-gl-traffic) [![npm](https://img.shields.io/npm/v/@mapbox/mapbox-gl-traffic.svg)](https://www.npmjs.com/package/@mapbox/mapbox-gl-traffic)

Add a traffic toggle control to [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js).

[**:globe_with_meridians: Check the demo**](https://mapbox.github.io/mapbox-gl-traffic/)

![demo](https://raw.githubusercontent.com/lukasmartinelli/mapbox-gl-traffic/master/demo.gif)

## Usage

**mapbox-gl-traffic** is a [Mapbox GL JS plugin](https://www.mapbox.com/blog/build-mapbox-gl-js-plugins/) that you can easily add on top of your map. Check `index.html` for a complete example.

Make sure to include the CSS and JS files.

**When using NPM**

Check [how to use Mapbox GL JS in a module bundler](https://www.mapbox.com/mapbox-gl-js/api/).

```bash

npm install --save mapbox-gl @mapbox/mapbox-gl-traffic

```

```javascript

const mapboxgl = require('mapbox-gl')

const MapboxTraffic = require('@mapbox/mapbox-gl-traffic');

const map = new mapboxgl.Map({

    container: 'map',

    style: 'mapbox://styles/mapbox/traffic-night-v2',

    center: [-77.0259, 38.9010],

    zoom: 9

});

map.on('load', () => {

    map.addControl(new MapboxTraffic());

});

```

## Examples

-   [Mapbox Day Traffic](https://mapbox.github.io/mapbox-gl-traffic/examples/traffic-day.html)

-   [Mapbox Night Traffic](https://mapbox.github.io/mapbox-gl-traffic/examples/traffic-night.html)

-   [Mapbox Streets](https://mapbox.github.io/mapbox-gl-traffic/examples/mapbox-streets.html)

-   [Mapbox Satellite Streets](https://mapbox.github.io/mapbox-gl-traffic/examples/mapbox-satellite-streets.html)

-   [Mapbox Outdoors](https://mapbox.github.io/mapbox-gl-traffic/examples/mapbox-outdoors.html)

-   [Mapbox Light](https://mapbox.github.io/mapbox-gl-traffic/examples/mapbox-light.html)

-   [Mapbox Dark](https://mapbox.github.io/mapbox-gl-traffic/examples/mapbox-dark.html)

## API

#### Table of Contents

-   [MapboxTraffic](#mapboxtraffic)

    -   [Parameters](#parameters)

    -   [toggleTraffic](#toggletraffic)

### MapboxTraffic

Create a new [Mapbox GL JS plugin](https://www.mapbox.com/blog/build-mapbox-gl-js-plugins/) that allows you to hide and show

traffic layers in your map and an optional toggle button.

#### Parameters

-   `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Options to configure the plugin.

    -   `options.showTraffic` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Show or hide traffic overlay by default. (optional, default `false`)

    -   `options.showTrafficButton` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Show a toggle button to turn traffic on and off. (optional, default `true`)

    -   `options.trafficSource` **[RegExp](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** The traffic source regex used to determine whether a layer displays traffic or not. (optional, default `/mapbox-traffic-v\d/`)

#### toggleTraffic

Toggle visibility of traffic layer.

## Develop

Run the linter and watch for changes to rebuild with browserify.

    npm install

    npm run test

    npm run watch

Create a minified standalone build.

    npm install

    npm run build