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.

Request Parameter	Description	Required
className String	A custom CSS class name to assign to the control.	No
colors Object	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'.	No
construction Boolean	A boolean on whether to render construction incidents layer on control click.	No, defaults to true
flow Boolean	A boolean on whether to render traffic flow/congestion layer on control click.	No, defaults to true
incidents Boolean	A boolean on whether to render traffic incidents layer on control click.	No, defaults to true
position String	The position of the control (one of the map corners). Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright'.	No, defaults to 'topright'
markets Boolean	A boolean on whether to render traffic markets layer on control click.	No, defaults to true
title String	Text for the browser tooltip that appear on control hover.	No, defaults to 'Traffic'

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