mapbox / mapbox-gl-traffic Goto Github PK

View Code? Open in Web Editor NEW

78.0 13.0 33.0 137 KB

Show and hide traffic layers in your Mapbox GL traffic style

License: BSD 3-Clause "New" or "Revised" License

HTML 4.93% JavaScript 95.07%

mapbox-gl-traffic's Introduction

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 NPM

Check how to use Mapbox GL JS in a module bundler.

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

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

API

MapboxTraffic
- Parameters
- toggleTraffic

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/)

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

mapbox-gl-traffic's People

Contributors

Stargazers

Watchers

mapbox-gl-traffic's Issues

Configurable source layer ID

The current implementation is hardcoded to inject itself when it finds a "source-layer" with ID "road". Probably works for most of Mapbox' styles but I've had style formats that didn't use that naming convention. I suggest exposing the source-layer ID (or maybe more than one?) as an option for better configurability.

(related, if it doesn't find a source-layer an empty array check could be done and maybe log for more graceful error exit)

SVG map icon not displayed in firefox 59.0.2

The background of the button used to disable traffic does not have a background.
In chrome the button is displayed correctly.

Example for mapbox-gl-leaflet

Is there an example for mapbox-gl-traffic?

Thx and kind regards

Does not load traffic layer by default

This can not show traffic by default, I have to press the traffic button twice to cycle it. there does not seem to be a working method to show traffic on load.

My code looks like this:

mapboxgl.accessToken = 'redacted_privatekey_'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', zoom: 8, center: [-122, 47.8], }); map.on('load', function() { map.addControl(new mapboxgl.NavigationControl()); map.addControl(new MapboxTraffic({showTraffic: true})); });

Traffic layer disappears when changing base map style

Traffic layer disappears when changing base map style, like this for example:

showSatellite(value: boolean): void {
    this._map.setStyle(
        value === true ?
            "mapbox://styles/mapbox/satellite-streets-v11" :
            "mapbox://styles/mapbox/streets-v11",
    );
}

The traffic layer's style, sources and layers are still loaded, but I can't figure out why they're not visible on the map...

Possibly outdated `mapbox-gl` peer dependency

To quote package.json:

"peerDependencies": {
  "mapbox-gl": ">=0.29.0 <2.0.0"
},

Is there a reason for this peerDep to be capped at 2.0.0?
I'm happy to submit a PR for this but I'd like to confirm if this is intentional before I do so.

Street labels aren't on top for version 11 of mapbox streets

In mapbox-streets-v11 the labels are part of the road source-layer. Hence, when the traffic layer is being added, the road-label layer is defined before the traffic layers in de map's style. I added some images as proof and also what is being shown on the map.

Global variables

The current code exposes a handful of globals ("trafficLayers", "button", "container" etc) if loaded as a standard js file include.
Would be nice to move them inside the namespace or IIFE wrapper.