Developer Guide

TrafficIncidents Layer

The ALKMaps.Layer.TrafficIncidents layer allows you to display current traffic incidents. There are two parameters for the constructor, the name/id you wish to give your layer and the object containing all of your layer option settings. For a detailed description of all possible options, please reference the table below.

Option	Type/Values	Description
`threshold`	`number`	Minimum feature threshold for the layer's cluster strategy. Default `5`.
`distance`	`number`	Minimum pixel distance between features for the layer's cluster strategy. Default `30`.
`cluster`	`boolean`	Indicates whether or not the layer should be clustered. Default `true`.
`strategies`	`ALKMaps.Strategy.Cluster`	User can provide custom layer strategies to replace default ones.
`styleMap`	`ALKMaps.StyleMap`	User can provide custom style map for the layer.
`minZoomLevel`	`number`	Minimum zoom level for retrieving and displaying traffic incidents. Default `5`.
`cacheInterval`	`number`	Time in minutes indicating how long the traffic incidents will refresh. Default `10`.
`language`	`string`	Desired incidents language. If no value is set, the browser's language setting will be used. English is the fallback language if the desired language is unavailable.

Default Category Images

Category	Image
`Traffic`
`Accident`
`Weather`
`Roadworks`
`Default`

// You will need to replace this with your own API key
// ALKMaps.APIKey = "YOUR_KEY_HERE";
var map = new ALKMaps.Map("map", { displayProjection: new ALKMaps.Projection("EPSG:4326") });
var layer = new ALKMaps.Layer.BaseMap("ALK Maps", { style: ALKMaps.STYLE.LIGHTNESS }, { displayInLayerSwitcher: false, wrapDateLine: true });

var onError = function(evt) {
	var errorObj = JSON.parse(evt.response.responseText)[0];
	var errorDiv = document.getElementById("errorDiv");
	var textArea = document.getElementById("errors");
	textArea.innerHTML = errorObj.Description;
	errorDiv.removeAttribute("hidden");
};

var trafficIncidents = new ALKMaps.Layer.TrafficIncidents("Traffic Incidents", {
	onErrorCallback: onError,
	minZoomLevel: 5
});
map.addLayers([layer, trafficIncidents]);

var center = new ALKMaps.LonLat(-73.996009, 40.729567).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(center, 12);

var featureEvent = new ALKMaps.Control.FeatureEvent([trafficIncidents],
	{
		geometryTypes: ["ALKMaps.Geometry.Point"],
	});

map.addControl(featureEvent);
featureEvent.activate();

var onHover = function(evt) {
	return trafficIncidents.onmouseover(evt.feature);
};

var onClick = function(evt) {
	return trafficIncidents.onmouseclick(evt.feature);
};

trafficIncidents.events.register("overFeature", trafficIncidents, onHover);
trafficIncidents.events.register("featureclicked", trafficIncidents, onClick);

Displaying Popups

In order to have the popups/tooltips display on hover and/or click accordingly, you will need to define an ALKMaps.Control.FeatureEvent control with the appropriate listeners. For further assistance implementing this, please reference the sample code below.

var featureEvent = new ALKMaps.Control.FeatureEvent([trafficIncidents],
    {
        geometryTypes: ["ALKMaps.Geometry.Point"],
    });

map.addControl(featureEvent);
featureEvent.activate();

var onHover = function(evt) {
    // Shows tool tip when mouse over an incident
    return trafficIncidents.onmouseover(evt.feature);
};

var onClick = function(evt) {
    // Shows incidents description when clicking an incident.
    return trafficIncidents.onmouseclick(evt.feature);
};

trafficIncidents.events.register("overFeature", trafficIncidents, onHover);
trafficIncidents.events.register("featureclicked", trafficIncidents, onClick);

To view a live demo of the Traffic Incidents layer with working popups and some useful techniques for customizing your layer, please visit the Traffic Incidents example page and view the source code.

Developer Guide

Leaflet Guide

OpenLayers Guide

TrafficIncidents Layer

Default Category Images

Displaying Popups