Skip to main content

Traffic Incident

This layer allows you to display current traffic incidents on the map. When an incident icon is clicked, a popup is displayed with more information about the incident.

Traffic Incident Layer

Displaying popups

To display a popup when an icon is clicked, create an instance of TrafficIncidentClickControl and add it to the map.

const clickCtrl = new TrimbleMaps.TrafficIncidentClickControl();
map.addControl(clickCtrl);

Traffic Incident Layer Popup

Filtering incidents

You can add a filter that allows a user to select which types of incidents are displayed on the map. Create an instance of TrafficIncidentFilterControl and add it to the map.

const filterCtrl = new TrimbleMaps.TrafficIncidentFilterControl();
map.addControl(filterCtrl);

Traffic Incident Layer Filter

Sample code

TrimbleMaps.APIKey = 'Your API key goes here.';

const map = new TrimbleMaps.Map({
    container: 'map',
    zoom: 15,
    center: [-74.002125,40.711967],
    region: TrimbleMaps.Common.Region.NA,
    style: TrimbleMaps.Common.Style.TRANSPORTATION
});

const trafficIncident = new TrimbleMaps.TrafficIncident();
const clickCtrl = new TrimbleMaps.TrafficIncidentClickControl();
map.addControl(clickCtrl);
const filterCtrl = new TrimbleMaps.TrafficIncidentFilterControl();
map.addControl(filterCtrl);
map.on('load', function() {
    trafficIncident.addTo(map);
});

Changing Visibility

The setVisibility and toggleVisibility methods are used to change the visibility of a layer. Since the layer style is loaded asynchronously, the visibility methods should only be called after the trafficincident event has fired.

myMap.on('trafficincident', function() {
  trafficIncident.setVisibility(true);
});
myMap.on('trafficincident', function() {
  trafficIncident.toggleVisibility();
});
Last updated November 23, 2021.