Leaflet Guide

TrafficIncidents Layer

The L.ALKMaps.Layer.TrafficIncidents layer allows you to display current traffic incidents on your map. Traffic incidents are loaded asynchronously.

By default, traffic incident icons are viewable at zoom level 8 and higher. Multiple incidents may be clustered together up until zoom level 14 and higher, at which point only individual incidents are shown. Cluster icons have 3 default sizes: for less than 10 items, icon size is 12 pixels by 12 pixels; less than 100, icon size is 16 pixels by 16 pixels, anything else, icon size is 24 pixels by 24 pixels.

When you hover over a single incident icon, a tool-tip with a brief description of the incident shows on the right. Clicking a single incident icon opens a pop-up message with a more detailed description. Clicking a cluster icon brings forward the individual incident icons in the cluster.

You can also customize the behavior of the layer with:

The display language of your choice, by supplying a language option.
A progress indicator, using the chunkProgress method.
Custom Cluster icons, using the iconCreateFunction method.
Custom traffic incident pop-ups and tool-tips, using the describeIncidentPopup and describeIncidentTooltip methods.

The layer has been tested with leaflet version 1.5.2. Leaflet.markercluster plugin by Dave Leaver is needed to perform clustering of traffic incidents.

Sample HTML on adding scripts and CSS references.

<head>
    <title>Traffic Incidents - Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
    <!-- Default.css is not needed. Comment out in case you need it. -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />-->
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster-src.js" ></script>
    <script src="http://maps.alk.com/api/1.2/alkmaps.js" type="text/javascript"></script>
</head>

// L.ALKMaps.setApiKey("YourAPIKey");
var map = L.map('map').setView([51.61, 0.07], 8);
var baseLayer = L.ALKMaps.Layer.baseMap({
    region: "EU",
    dataset: "Current"
});
map.addLayer(baseLayer);

var incidents = L.ALKMaps.Layer.trafficIncidents({
    // Commenting out the following lines to customize the behavior of the layer.   
    language: "fr"
    /*   
    iconCreateFunction: function (cluster) {
        var childCount = cluster.getChildCount();
        return L.divIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
    },
    chunkProgress: function (processed, total, elapsed, layersArray) {        
        console.log("to implement a progress indicator");
    }*/
});
incidents.addTo(map);

Developer Guide

Leaflet Guide

OpenLayers Guide

TrafficIncidents Layer