Mapbox GL Traffic

Add a traffic toggle control to Mapbox GL JS.

🌐 Check the demo

Usage

mapbox-gl-traffic is a Mapbox GL JS plugin 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 a CDN

<script src='http://lukasmartinelli.ch/mapbox-gl-traffic/dist/mapbox-gl-traffic.min.js'></script>
<link href='http://lukasmartinelli.ch/mapbox-gl-traffic/dist/mapbox-gl-traffic.css' rel='stylesheet' />

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/traffic-night-v2',
    center: [-77.0259, 38.9010],
    zoom: 9,
    hash: true
});
map.addControl(new MapboxTraffic());

API

MapboxTraffic

Create a new Mapbox GL JS plugin that allows you to hide and show traffic layers in your map and an optional toggle button.

Parameters

• options object Options to configure the plugin.
  • options.showTraffic boolean Show or hide traffic overlay by default. (optional, default false)
  • options.showTrafficButton boolean Show a toggle button to turn traffic on and off. (optional, default true)
  • options.trafficSource RegExp The traffic source regex used to determine whether a layer displays traffic or not. (optional, default /mapbox-traffic-v\d/)

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