MapQuest.js

L.mapquest.trafficControl(options)

A single button control that toggles on and off traffic layers.

The trafficLayer, an incidentsLayer with construction, an incidentsLayer with traffic incidents, and a marketsLayer are all on by default but can be disabled with options.

A traffic overview control is rendered at the bottom of the map to allow the user to toggle the layers.

The position, title, and className of the control are customizable. The colors of the trafficLayer are customizable.

Syntax

L.mapquest.key = 'KEY';

var map = L.mapquest.map('map', {
  center: [34.0522, -118.2437],
  layers: [tileLayer],
  zoom: 12
});

map.addControl(L.mapquest.trafficControl());

Parameters

• options object

  An object containing any of the following key value options: className, colors, construction, flow, incidents, position, markets, and title.

  • className String optional

    A custom CSS class name to assign to the control.

  • colors Object optional

    Controls the colors of the traffic ribbons on the traffic flow/congestion layer.

    An object containing any of the following key value options: low, medium, high, and closed.

    • low: The string hex code for the low congestion color of the traffic ribbon. Default is '#1ca747'.

    • medium: The string hex code for the medium congestion color of the traffic ribbon. Default is '#feeb41'.

    • high: The string hex code for the high congestion color of the traffic ribbon. Default is '#df0021'.

    • closed: The string hex code for the closed color of the traffic ribbon. Default is '#0c0000'.

  • construction Boolean optional, defaults to true

    A boolean on whether to render construction incidents layer on control click.

  • flow Boolean optional, defaults to true

    A boolean on whether to render traffic flow/congestion layer on control click.

  • incidents Boolean optional, defaults to true

    A boolean on whether to render traffic incidents layer on control click.

  • position String optional, defaults to 'topright'

    The position of the control (one of the map corners).

    Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright'.

  • markets Boolean optional, defaults to true

    A boolean on whether to render traffic markets layer on control click.

  • title String optional, defaults to 'Traffic'

    Text for the browser tooltip that appear on control hover.

  Example

  {
    className: '',
    colors: {
      low: '#1ca747',
      medium: '#feeb41',
      high: '#df0021',
      closed: '#0c0000'
    },
    construction: true,
    flow: true,
    incidents: true,
    position: 'topright',
    markets: true,
    title: 'Traffic'
  }

Return Value

An L.Control object that can be added to a map with the addControl() function.

Visual Example