JavaScript Maps SDK

TrafficIncidents Layer

Contents

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 Later. Multiple incidents may be clustered together up until zoom level 14 and Later, 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. Options include: en - English (Default), fr - French, es - Spanish, de - German, it - Italian, sv - Swedish, da - Danish, no - Norwegian, fi - Finnish, nl - Dutch, sk - Slovak, pl - Polish, ru - Russian, tr - Turkish, pt - Portuguese.

  • 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.6.0/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.6.0/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="https://maps-sdk.trimblemaps.com/v1/alkmaps-1.2.2.js"></script>
</head>

Traffic Incidents

Last updated September 17, 2024.
Contents