Maps Web SDK

This is an extension to Leaflet allowing to display the TomTom traffic incidents layer.

It uses the tomtom.trafficIncidents service in order to retrieve incidents details.

A look and feel, together with a clustering behaviour, can be modified by passing the pointToLayer function. The default implementation looks as follows

define(['leaflet', 't', 'unitFormatConverter/unitFormatConverter'], function (L, T, units) {
  'use strict';

  var iconsMapping = {
          'Unknown': 'danger', 'Accident': 'accident', 'Fog': 'danger', 'Dangerous Conditions':
          'danger', 'Rain': 'danger', 'Ice': 'ice', 'Jam': 'incident', 'Lane Closed':
          'laneclosed', 'Road Closed': 'roadclosed', 'Road Works': 'roadwork', 'Wind': 'danger',
          'Flooding': 'danger', 'Detour': 'danger', 'Cluster': ''
      },
      iconTemplate = '<div class="traffic-icon"><div class="icon-circle-{{=incidentSeverity}}">' +
          '<div class="icon-{{=icon}}-white"></div></div></div>',
      shieldTemplate = '{{roadNumber}}<div class="road-shield">{{=roadNumber}}</div>' +
      '{{/roadNumber}}',
      descriptionTemplate = '<div class="traffic-description"><div class="incident-category">' +
      '{{=incidentCategory}}</div><div class="incident-delay-length"{{!delaySeconds}}' +
      '{{!lengthMeters}} style="display:none;"{{/!lengthMeters}}{{/!delaySeconds}}>' +
      '{{delaySeconds}}<div class="incident-delay">{{=time}}</div>{{/delaySeconds}}' +
      '{{lengthMeters}}<div class="incident-length">{{=distance}}</div>{{/lengthMeters}}</div>' +
      '</div>',
      messageTemplate = new T('<div class="traffic-details">' + iconTemplate + shieldTemplate +
      descriptionTemplate + '</div>');

  function trafficIncidentMessage(info, imperialDistance) {
      info.distance = units.formatDistance(info.lengthMeters, imperialDistance);
      info.time = units.formatTime(info.delaySeconds);
      info.incidentSeverity = info.incidentSeverity || 'unknown';
      info.icon = iconsMapping[info.incidentCategory];
      return messageTemplate.render(info);
  }

  function clusterClickHandler(bounds, latlng) {
      if (bounds) {
          return function () {
              this._map.fitBounds(bounds);
          };
      } else {
          return function () {
              this._map.setZoomAround(latlng, this._map.getZoom() + 2);
          };
      }
  }

  return function (feature, latlng, imperialDistance) {
      var iconOptions = {
          background: {
              iconSize: L.Browser.retina ? [34, 34] : [20, 20],
              iconAnchor: L.Browser.retina ? [17, 17] : [10, 10],
              icon: ''
          },
          icon: {
              iconSize: L.Browser.retina ? [34, 34] : [20, 20],
              iconAnchor: [0, 0],
              icon: ''
          },
          content: {
              iconSize: L.Browser.retina ? [34, 34] : [20, 20],
              iconAnchor: [0, 0],
              content: '',
              'style': {
                  'color': '#fff',
                  'font-weight': 'bold',
                  'font-size': L.Browser.retina ? '18px' : '11px'
              }
          },
          popupAnchor: L.Browser.retina ? [0, -8] : [0, -5]
      }, marker;

      if (!feature || !feature.properties) {
          return null;
      }

      iconOptions.background.icon = 'icon-circle-' +
          (feature.properties.incidentSeverity || 'unknown');

      if (feature.properties.clusterSize) {
          iconOptions.icon = null;
          iconOptions.content.content = feature.properties.clusterSize < 100
             ? feature.properties.clusterSize:'99+';
          marker = L.marker(latlng, {icon: L.svgIcon(iconOptions)}); marker.on('click',
              clusterClickHandler(feature.properties.clusterBounds, latlng));
      } else {
          iconOptions.content = null;
          iconOptions.icon.icon = 'icon-' + iconsMapping[feature.properties.incidentCategory] +
             '-white';
          marker = L.marker(latlng, {icon: L.svgIcon(iconOptions)});
          marker.bindPopup(trafficIncidentMessage(feature.properties, imperialDistance),
             {className: 'incidents-popup'});
      }
      return marker;
  };
});