@tomtom-org/maps-sdk 0.30.2 → 0.31.1

package/map/dist/map.cjs.js

@@ -2289,6 +2289,14 @@ class GeoJSONSourceWithLayers extends AddedSourceWithLayers {
   clear() {
     this.show(emptyFeatureCollection);
   }
+  findFeature(options) {
+    if ("index" in options) {
+      return this.shownFeatures.features[options.index];
+    } else if ("id" in options) {
+      return this.shownFeatures.features.find((f) => f.id === options.id);
+    }
+    return void 0;
+  }
   putEventState(options) {
     const mode = options.mode ?? "put";
     if (mode === "put") {
@@ -2298,7 +2306,7 @@ class GeoJSONSourceWithLayers extends AddedSourceWithLayers {
         }
       }
     }
-    const feature = this.shownFeatures.features[options.index];
+    const feature = this.findFeature(options);
     if (feature) {
       feature.properties = { ...feature.properties, eventState: options.state };
     }
@@ -2307,7 +2315,7 @@ class GeoJSONSourceWithLayers extends AddedSourceWithLayers {
     }
   }
   cleanEventState(options) {
-    const feature = this.shownFeatures.features[options.index];
+    const feature = this.findFeature(options);
     if (feature?.properties?.eventState) {
       delete feature?.properties?.eventState;
       if (options?.show !== false) {
@@ -2789,15 +2797,16 @@ const toMapDisplayPOICategory = (category) => (
   // if it's one of the different categories between search and poi layer, use poi layer category
   category in mapDisplayPoiCategoryMappings ? mapDisplayPoiCategoryMappings[category] : category.toLowerCase()
 );
+const MAP_BOLD_FONT = "Noto-Bold";
+const MAP_MEDIUM_FONT = "Noto-Medium";
+const DEFAULT_TEXT_SIZE = ["interpolate", ["linear"], ["zoom"], 10, 14, 18, 16];
+const PIN_ICON_SIZE = ["interpolate", ["linear"], ["zoom"], 8, 0.6, 22, 0.8];
+const SELECTED_PIN_ICON_SIZE = ["interpolate", ["linear"], ["zoom"], 8, 0.8, 22, 1];
 const isClickEventState = [
   "in",
   ["get", "eventState"],
   ["literal", ["click", "contextmenu"]]
 ];
-const MAP_BOLD_FONT = "Noto-Bold";
-const MAP_MEDIUM_FONT = "Noto-Medium";
-const DEFAULT_TEXT_SIZE = ["interpolate", ["linear"], ["zoom"], 10, 14, 18, 16];
-const PIN_ICON_SIZE = ["interpolate", ["linear"], ["zoom"], 8, 0.6, 22, 0.8];
 const TITLE = "title";
 const ICON_ID = "iconID";
 const pinIconBaseLayout = {
@@ -2817,7 +2826,8 @@ const pinTextBaseLayout = {
   "text-field": ["get", TITLE],
   "text-justify": "auto",
   "text-variable-anchor": ["top", "left", "right"],
-  "text-variable-anchor-offset": ["top", [0, 0.5], "left", [1.3, -1.4], "right", [-1.3, -1.4]],
+  // NOTE: make sure to text against pins and waypoints, in a way that there's enough distance from the pin so the text doesn't disappear
+  "text-variable-anchor-offset": ["top", [0, 0.7], "left", [1.4, -1.4], "right", [-1.4, -1.4]],
   "text-size": DEFAULT_TEXT_SIZE,
   "text-padding": 5
 };
@@ -2849,8 +2859,7 @@ const selectedPlaceLayerSpec = {
   filter: hasEventState,
   layout: {
     ...pinLayerBaseSpec.layout,
-    // Increased sizes from PIN_ICON_SIZE (from shared default pin)
-    "icon-size": ["interpolate", ["linear"], ["zoom"], 8, 0.8, 22, 1],
+    "icon-size": SELECTED_PIN_ICON_SIZE,
     "text-allow-overlap": true
   },
   paint: {
@@ -2858,30 +2867,27 @@ const selectedPlaceLayerSpec = {
     "text-color": SELECTED_COLOR
   }
 };
-const clickedPlaceLayerSpec = {
-  ...selectedPlaceLayerSpec,
-  filter: isClickEventState
-};
-const withConfig = (layerSpec, config, id) => {
-  const textConfig = config?.textConfig;
+const withConfig = (layerSpec, config, layerName) => {
+  const textConfig = config?.text;
+  const customLayer = config?.layers?.[layerName];
   return {
     ...layerSpec,
-    id,
     layout: {
       ...layerSpec.layout,
-      ...textConfig?.textSize && { "text-size": textConfig.textSize },
-      ...textConfig?.textFont && { "text-font": textConfig.textFont },
-      ...textConfig?.textOffset && { "text-offset": textConfig.textOffset },
-      ...textConfig?.textField && typeof textConfig?.textField !== "function" && {
-        "text-field": textConfig?.textField
+      ...textConfig?.size && { "text-size": textConfig.size },
+      ...textConfig?.font && { "text-font": textConfig.font },
+      ...textConfig?.offset && { "text-offset": textConfig.offset },
+      ...textConfig?.title && typeof textConfig?.title !== "function" && {
+        "text-field": textConfig?.title
       }
     },
     paint: {
       ...layerSpec.paint,
-      ...textConfig?.textColor && { "text-color": textConfig.textColor },
-      ...textConfig?.textHaloColor && { "text-halo-color": textConfig.textHaloColor },
-      ...textConfig?.textHaloWidth && { "text-halo-width": textConfig.textHaloWidth }
-    }
+      ...textConfig?.color && { "text-color": textConfig.color },
+      ...textConfig?.haloColor && { "text-halo-color": textConfig.haloColor },
+      ...textConfig?.haloWidth && { "text-halo-width": textConfig.haloWidth }
+    },
+    ...customLayer
   };
 };
 const getTextSizeSpec = (textSize) => {
@@ -2902,14 +2908,36 @@ const buildPoiLikeLayerSpec = (map) => {
     }
   };
 };
-const buildPlacesLayerSpecs = (config, idPrefix, map) => {
-  const layerSpecs = config?.iconConfig?.iconStyle === "poi-like" ? [buildPoiLikeLayerSpec(map), clickedPlaceLayerSpec] : (
-    // TODO: 'circle' config could take the icon properties from the poi layer as well (size, offsets, etc) and just try to make text bolder
-    [placesLayerSpec, selectedPlaceLayerSpec]
-  );
-  return layerSpecs.map(
-    (spec, index) => withConfig(spec, config, `${idPrefix}-${index === 0 ? "main" : "selected"}`)
-  );
+const buildPlacesLayerSpecs = (config, map) => {
+  let layerSpecTemplates;
+  if (config?.theme === "base-map") {
+    const poiLikeLayerSpec = buildPoiLikeLayerSpec(map);
+    layerSpecTemplates = {
+      main: poiLikeLayerSpec,
+      selected: {
+        ...poiLikeLayerSpec,
+        filter: hasEventState,
+        layout: {
+          ...poiLikeLayerSpec.layout,
+          "text-allow-overlap": true
+        },
+        paint: {
+          ...poiLikeLayerSpec.paint,
+          "text-color": SELECTED_COLOR
+        }
+      }
+    };
+  } else {
+    layerSpecTemplates = {
+      main: placesLayerSpec,
+      selected: selectedPlaceLayerSpec
+    };
+  }
+  return {
+    main: withConfig(layerSpecTemplates.main, config, "main"),
+    selected: withConfig(layerSpecTemplates.selected, config, "selected"),
+    ...config?.layers?.additional
+  };
 };
 const supportedPinSubcategories = /* @__PURE__ */ new Set([
   7339002,
@@ -2966,9 +2994,9 @@ const toMapDisplayPin = (place) => {
   return categoryID.toString().substring(0, 4);
 };
 const buildPlaceTitle = (place) => place.properties.poi?.name ?? place.properties.address.freeformAddress;
-const getIconIDForPlace = (place, config = {}, map) => {
-  const iconStyle = config.iconConfig?.iconStyle ?? "pin";
-  const customIcons = config.iconConfig?.customIcons;
+const getIconIDForPlace = (place, config = {}) => {
+  const iconStyle = config.theme ?? "pin";
+  const customIcons = config.icon?.customIcons;
   const classificationCode = place.properties.poi?.classifications?.[0]?.code;
   const matchingCustomIcon = customIcons?.find((customIcon) => customIcon.id === classificationCode);
   if (matchingCustomIcon) {
@@ -2997,7 +3025,7 @@ const preparePlacesForDisplay = (placesInput, map, config = {}) => {
   return {
     ...places,
     features: places.features.map((place) => {
-      const title = typeof config?.textConfig?.textField === "function" ? config?.textConfig?.textField(place) : buildPlaceTitle(place);
+      const title = typeof config?.text?.title === "function" ? config?.text?.title(place) : buildPlaceTitle(place);
       const extraFeatureProps = config.extraFeatureProps ? Object.fromEntries(
         Object.entries(config.extraFeatureProps).map(([prop, value]) => [
           prop,
@@ -3015,9 +3043,7 @@ const preparePlacesForDisplay = (placesInput, map, config = {}) => {
           id: place.id,
           title,
           iconID: getIconIDForPlace(place, config),
-          ...config?.iconConfig?.iconStyle === "poi-like" && {
-            category: getPOILayerCategoryForPlace(place)
-          },
+          ...config?.theme === "base-map" && { category: getPOILayerCategoryForPlace(place) },
           ...extraFeatureProps
         }
       };
@@ -3049,15 +3075,28 @@ const _PlacesModule = class _PlacesModule extends AbstractMapModule {
       this.sourceID = `${PLACES_SOURCE_PREFIX_ID}-${this.instanceIndex}`;
       this.layerIDPrefix = `placesSymbols-${this.instanceIndex}`;
     }
-    const layerSpecs = buildPlacesLayerSpecs(config, this.layerIDPrefix, this.mapLibreMap);
-    this.layerSpecs = layerSpecs;
-    return { places: new GeoJSONSourceWithLayers(this.mapLibreMap, this.sourceID, layerSpecs) };
+    this.layerSpecs = this.buildLayerSpecs(config);
+    return {
+      places: new GeoJSONSourceWithLayers(this.mapLibreMap, this.sourceID, [
+        this.layerSpecs.main,
+        this.layerSpecs.selected
+      ])
+    };
+  }
+  buildLayerSpecs(config) {
+    const layerSpecTemplates = buildPlacesLayerSpecs(config, this.mapLibreMap);
+    return Object.fromEntries(
+      Object.entries(layerSpecTemplates).map(([key, spec]) => [
+        key,
+        { ...spec, id: `${this.layerIDPrefix}-${key}` }
+      ])
+    );
   }
   /**
    * @ignore
    */
   _applyConfig(config) {
-    if (config?.iconConfig || config?.textConfig) {
+    if (config?.theme || config?.icon || config?.text) {
       this.updateLayersAndData(config);
     } else if (config?.extraFeatureProps) {
       this.updateData(config);
@@ -3073,6 +3112,35 @@ const _PlacesModule = class _PlacesModule extends AbstractMapModule {
     this.config && this._applyConfig(this.config);
     this.show(previousShownFeatures);
   }
+  /**
+   * Updates the visual theme for displayed places.
+   *
+   * @param theme - The theme style to apply to place markers.
+   *
+   * @remarks
+   * **Available Themes:**
+   * - `pin`: Traditional teardrop-shaped map pins
+   * - `circle`: Simple circular markers
+   * - `base-map`: Mimics the map's built-in POI layer style with category icons
+   *
+   * Changes apply immediately to all currently shown places. Other configuration
+   * properties (icon config, text config) remain unchanged.
+   *
+   * @example
+   * ```typescript
+   * // Switch to pin markers
+   * places.applyTheme('pin');
+   *
+   * // Use simple circles
+   * places.applyTheme('circle');
+   *
+   * // Match map's POI style (ideal to blend in)
+   * places.applyTheme('base-map');
+   * ```
+   */
+  applyTheme(theme) {
+    this.applyConfigPart({ theme });
+  }
   /**
    * Updates the icon configuration for displayed places.
    *
@@ -3086,21 +3154,14 @@ const _PlacesModule = class _PlacesModule extends AbstractMapModule {
    * @example
    * ```typescript
    * places.applyIconConfig({
-   *   iconStyle: 'circle'
-   * });
-   *
-   * // Add custom icons
-   * places.applyIconConfig({
    *   customIcons: [
-   *     { category: 'RESTAURANT', image: '/icons/food.png' }
+   *     { category: 'RESTAURANT', id: 'restaurant-icon', image: '/icons/food.png' }
    *   ]
    * });
    * ```
    */
   applyIconConfig(iconConfig) {
-    const config = { ...this.config, iconConfig };
-    this.updateLayersAndData(config);
-    this.config = config;
+    this.applyConfigPart({ icon: iconConfig });
   }
   /**
    * Updates the text/label configuration for displayed places.
@@ -3114,19 +3175,22 @@ const _PlacesModule = class _PlacesModule extends AbstractMapModule {
    * ```typescript
    * // Use function
    * places.applyTextConfig({
-   *   textField: (place) => place.properties.poi?.name || 'Unknown'
+   *   field: (place) => place.properties.poi?.name || 'Unknown'
    * });
    *
    * // Use MapLibre expression
    * places.applyTextConfig({
-   *   textField: ['get', 'title'],
-   *   textSize: 14,
-   *   textColor: '#333'
+   *   field: ['get', 'title'],
+   *   size: 14,
+   *   color: '#333'
    * });
    * ```
    */
   applyTextConfig(textConfig) {
-    const config = { ...this.config, textConfig };
+    this.applyConfigPart({ text: textConfig });
+  }
+  applyConfigPart(partialConfig) {
+    const config = { ...this.config, ...partialConfig };
     this.updateLayersAndData(config);
     this.config = config;
   }
@@ -3153,13 +3217,15 @@ const _PlacesModule = class _PlacesModule extends AbstractMapModule {
     this.config = config;
   }
   updateLayersAndData(config) {
-    for (const customIcon of config?.iconConfig?.customIcons ?? []) {
+    for (const customIcon of config?.icon?.customIcons ?? []) {
       addImageIfNotExisting(this.mapLibreMap, customIcon.id, customIcon.image, {
         pixelRatio: customIcon.pixelRatio ?? 2
       });
     }
-    const newLayerSpecs = buildPlacesLayerSpecs(config, this.layerIDPrefix, this.mapLibreMap);
-    changeLayersProps(newLayerSpecs, this.layerSpecs, this.mapLibreMap);
+    const newLayerSpecs = this.buildLayerSpecs(config);
+    const newLayerSpecsArray = [newLayerSpecs.main, newLayerSpecs.selected];
+    const oldLayerSpecsArray = [this.layerSpecs.main, this.layerSpecs.selected];
+    changeLayersProps(newLayerSpecsArray, oldLayerSpecsArray, this.mapLibreMap);
     this.layerSpecs = newLayerSpecs;
     this.updateData(config);
   }
@@ -4213,7 +4279,7 @@ const buildGeometryLayerSpecs = (fillLayerId, outlineLayerId, config) => {
   };
   return [fillLayerSpec, outlineLayerSpec];
 };
-const buildTitle = (feature, config) => {
+const buildTitle$1 = (feature, config) => {
   if (config.textConfig?.textField) {
     return config.textConfig.textField;
   }
@@ -4251,7 +4317,7 @@ const buildGeometryTitleLayerSpec = (layerId, config) => {
 const prepareGeometryForDisplay = (geometry, config = {}) => ({
   ...geometry,
   features: geometry.features.map((feature, index) => {
-    const title = feature.properties?.title ? feature.properties.title : buildTitle(feature, config);
+    const title = feature.properties?.title ? feature.properties.title : buildTitle$1(feature, config);
     const color = feature.properties?.color ? feature.properties.color : buildColor(config, index);
     return { ...feature, properties: { ...feature.properties, title, color } };
   })
@@ -4969,9 +5035,7 @@ const EXTRA_FOREGROUND_LINE_WIDTH = [
 ];
 const routeIncidentsBGLine = {
   type: "line",
-  layout: {
-    "line-join": "round"
-  },
+  layout: { "line-cap": "round" },
   paint: {
     "line-width": EXTRA_FOREGROUND_LINE_WIDTH,
     "line-color": [
@@ -4991,9 +5055,7 @@ const routeIncidentsBGLine = {
 const routeIncidentsDashedLine = {
   type: "line",
   filter: ["in", ["get", "magnitudeOfDelay"], ["literal", ["unknown", "indefinite"]]],
-  layout: {
-    "line-join": "round"
-  },
+  layout: { "line-join": "round" },
   paint: {
     "line-width": EXTRA_FOREGROUND_LINE_WIDTH,
     "line-color": [
@@ -5007,28 +5069,6 @@ const routeIncidentsDashedLine = {
     "line-dasharray": [1.5, 1]
   }
 };
-const routeIncidentsPatternLine = {
-  type: "line",
-  filter: ["in", ["get", "magnitudeOfDelay"], ["literal", ["minor", "moderate", "major"]]],
-  layout: {
-    "line-join": "round"
-  },
-  paint: {
-    "line-width": EXTRA_FOREGROUND_LINE_WIDTH,
-    "line-pattern": [
-      "match",
-      ["get", "magnitudeOfDelay"],
-      "minor",
-      "traffic-incidents-minor-pattern",
-      "moderate",
-      "traffic-incidents-moderate-pattern",
-      "major",
-      "traffic-incidents-major-pattern",
-      // other
-      "traffic-incidents-no_delay-pattern"
-    ]
-  }
-};
 const magnitudeOfDelayTextColor = [
   "match",
   ["get", "magnitudeOfDelay"],
@@ -5043,29 +5083,48 @@ const magnitudeOfDelayTextColor = [
   // other
   UNKNOWN_DELAY_COLOR
 ];
-const routeIncidentsSymbol = {
+const routeIncidentsSymbolBase = {
   filter: SELECTED_ROUTE_FILTER,
   type: "symbol",
   minzoom: 6,
   layout: {
     "symbol-placement": "point",
     "symbol-avoid-edges": true,
-    "icon-anchor": "bottom",
-    "icon-ignore-placement": true,
-    "icon-size": ["interpolate", ["linear"], ["zoom"], 6, 0.8, 12, 1],
-    "icon-image": ["get", "iconID"],
+    "icon-ignore-placement": true
+  }
+};
+const routeIncidentsJamSymbol = {
+  ...routeIncidentsSymbolBase,
+  filter: ["all", ["has", "jamIconID"], routeIncidentsSymbolBase.filter],
+  layout: {
+    ...routeIncidentsSymbolBase.layout,
+    "icon-image": ["get", "jamIconID"],
+    "icon-anchor": "bottom-left",
+    "text-anchor": "bottom-left",
+    // Jam symbols have delay labels in them:
     "text-field": ["get", "title"],
     "text-font": [MAP_BOLD_FONT],
-    "text-optional": true,
-    "text-anchor": "top",
-    "text-size": ["interpolate", ["linear"], ["zoom"], 6, 11, 10, 13]
+    "text-offset": [3.9, -1.4],
+    "text-size": 13
   },
   paint: {
+    ...routeIncidentsSymbolBase.paint,
     "text-color": magnitudeOfDelayTextColor,
     "text-halo-color": "#FFFFFF",
     "text-halo-width": 1
   }
 };
+const routeIncidentsCauseSymbol = {
+  ...routeIncidentsSymbolBase,
+  filter: ["all", ["has", "causeIconID"], routeIncidentsSymbolBase.filter],
+  layout: {
+    ...routeIncidentsSymbolBase.layout,
+    "icon-image": ["get", "causeIconID"],
+    "icon-anchor": "bottom-right"
+    // Cause symbols have no label in them.
+  },
+  paint: { ...routeIncidentsSymbolBase.paint }
+};
 const routeTunnelsLine = {
   filter: SELECTED_ROUTE_FILTER,
   type: "line",
@@ -5290,27 +5349,26 @@ const buildRoutingLayers = (config = {}) => {
     },
     sections: {
       incident: {
-        routeIncidentSymbol: {
-          ...routeIncidentsSymbol,
+        routeIncidentJamSymbol: {
+          ...routeIncidentsJamSymbol,
           beforeID: "routeChargingStopSymbol",
-          ...configSectionLayers?.incident?.routeIncidentSymbol
+          ...configSectionLayers?.incident?.routeIncidentJamSymbol
+        },
+        routeIncidentCauseSymbol: {
+          ...routeIncidentsCauseSymbol,
+          beforeID: "routeChargingStopSymbol",
+          ...configSectionLayers?.incident?.routeIncidentCauseSymbol
         },
         routeIncidentBackgroundLine: {
           ...routeIncidentsBGLine,
-          beforeID: mapStyleLayerIDs.lowestLabel,
+          beforeID: "routeIncidentDashedLine",
           ...configSectionLayers?.incident?.routeIncidentBackgroundLine
         },
         routeIncidentDashedLine: {
           ...routeIncidentsDashedLine,
           beforeID: mapStyleLayerIDs.lowestLabel,
           ...configSectionLayers?.incident?.routeIncidentDashedLine
-        },
-        routeIncidentPatternLine: {
-          ...routeIncidentsPatternLine,
-          beforeID: mapStyleLayerIDs.lowestLabel,
-          ...configSectionLayers?.incident?.routeIncidentPatternLine
-        },
-        ...configLayers?.sections?.incident?.additional
+        }
       },
       ferry: {
         routeFerryLine: {
@@ -5320,7 +5378,7 @@ const buildRoutingLayers = (config = {}) => {
         },
         routeFerrySymbol: {
           ...routeFerriesSymbol,
-          beforeID: "routeIncidentSymbol",
+          beforeID: "routeIncidentJamSymbol",
           ...configSectionLayers?.ferry?.routeFerrySymbol
         },
         ...configSectionLayers?.ferry?.additional
@@ -5500,14 +5558,14 @@ const e = { commonBaseURL: "https://api.tomtom.com", apiKey: "", apiVersion: 1 }
 };
 t.instance = new t();
 let r = t;
-const G = (e2) => e2?.minutes ?? "min", F = (e2, t2) => {
+const F = (e2) => e2?.minutes ?? "min", L = (e2, t2) => {
   if (e2) {
     const a = Math.abs(e2) / 3600;
     let o = Math.floor(a), i = Math.round(a % 1 * 60);
     60 === i && (i = 0, o++);
     const s = { ...r.instance.get().displayUnits?.time, ...t2 };
-    if (o) return `${o} ${n = s, n?.hours ?? "hr"} ${i.toString().padStart(2, "0")} ${G(s)}`;
-    if (i) return `${i.toString()} ${G(s)}`;
+    if (o) return `${o} ${n = s, n?.hours ?? "hr"} ${i.toString().padStart(2, "0")} ${F(s)}`;
+    if (i) return `${i.toString()} ${F(s)}`;
   }
   var n;
 };
@@ -5547,7 +5605,7 @@ const toDisplayChargingStops = (routes, config) => {
               iconID: getIconID(chargingStop, config),
               title: formatTitle(chargingStop),
               chargingPower: `${properties.chargingConnectionInfo?.chargingPowerInkW} kW`,
-              chargingDuration: F(
+              chargingDuration: L(
                 properties.chargingTimeInSeconds,
                 config?.displayUnits?.time
               ),
@@ -5560,42 +5618,71 @@ const toDisplayChargingStops = (routes, config) => {
   }
   return { type: "FeatureCollection", features: displayChargingStops };
 };
-const delayMagnitudeToIconPrefix = {
-  unknown: "traffic-incidents-no_delay",
-  minor: "traffic-incidents-minor",
-  moderate: "traffic-incidents-moderate",
-  major: "traffic-incidents-major",
-  indefinite: "traffic-incidents-no_delay"
-};
-const tecCauseToIconSuffix = {
-  1: "jam",
-  2: "accident",
-  3: "roadworks",
-  5: "road_closed",
-  9: "danger",
-  16: "lane_closed",
-  17: "weather_wind",
-  18: "weather_fog",
-  19: "weather_rain"
-};
-const trafficSectionToIconID = (sectionProps) => {
-  const tecCauseCode = sectionProps.tec.causes?.[0].mainCauseCode;
-  const tecIconSuffix = tecCauseCode && tecCauseToIconSuffix[tecCauseCode];
-  if (!tecIconSuffix) {
+const hasJam = (sectionProps) => sectionProps.categories.includes("jam");
+const buildTitle = (sectionProps) => {
+  if (hasJam(sectionProps)) {
+    return core.formatDuration(sectionProps.delayInSeconds);
+  }
+  return void 0;
+};
+const toTrafficJamIconSuffix = (title) => {
+  if (!title?.length) {
+    return "collapsed";
+  }
+  if (title.length < 6) {
+    return "small";
+  }
+  if (title.length < 8) {
+    return "medium";
+  }
+  return "large";
+};
+const toJamIconID = (sectionProps, title) => {
+  if (!hasJam(sectionProps)) {
     return null;
   }
-  const magnitudePrefix = (
-    // ("traffic-incidents-road_closed" is an exception)
-    tecIconSuffix === "road_closed" ? "traffic-incidents" : delayMagnitudeToIconPrefix[sectionProps.magnitudeOfDelay ?? "unknown"]
-  );
-  return `${magnitudePrefix}-${tecIconSuffix}`;
+  const magnitude = sectionProps.magnitudeOfDelay ?? "unknown";
+  return `traffic-jam-${magnitude}-${toTrafficJamIconSuffix(title)}`;
+};
+const toCauseIconID = (sectionProps) => {
+  const firstNonJamCategory = sectionProps.categories.find((category) => category !== "jam");
+  switch (firstNonJamCategory) {
+    case "accident":
+      return "traffic-incidents-accident";
+    case "roadworks":
+      return "traffic-incidents-roadworks";
+    case "road-closed":
+      return "traffic-incidents-road_closed";
+    case "danger":
+    case "animals-on-road":
+      return "traffic-incidents-danger";
+    case "broken-down-vehicle":
+      return "traffic-incidents-broken_down_vehicle";
+    case "lane-closed":
+    case "narrow-lanes":
+      return "traffic-incidents-lane_closed";
+    case "wind":
+      return "traffic-incidents-wind";
+    case "fog":
+      return "traffic-incidents-fog";
+    case "rain":
+      return "traffic-incidents-rain";
+    case "frost":
+      return "traffic-incidents-frost";
+    case "flooding":
+      return "traffic-incidents-flooding";
+    default:
+      return null;
+  }
 };
 const toDisplayTrafficSectionProps = (sectionProps) => {
-  const title = core.formatDuration(sectionProps.delayInSeconds);
-  const iconId = trafficSectionToIconID(sectionProps);
+  const title = buildTitle(sectionProps);
+  const jamIconID = toJamIconID(sectionProps, title);
+  const causeIconID = toCauseIconID(sectionProps);
   return {
     ...sectionProps,
-    ...iconId && { iconID: iconId },
+    ...jamIconID && { jamIconID },
+    ...causeIconID && { causeIconID },
     ...title && { title }
   };
 };
@@ -5974,11 +6061,12 @@ class RoutingModule extends AbstractMapModule {
     const mergedConfig = routeModuleConfigWithDefaults(config);
     if (this.config) {
       const newLayersSpecs = createLayersSpecs(mergedConfig.layers);
-      Object.keys(newLayersSpecs).forEach((layersSpecs) => {
+      Object.keys(newLayersSpecs).forEach((layersSpecID) => {
+        const id = layersSpecID;
         updateLayersAndSource(
-          newLayersSpecs[layersSpecs],
-          this.layersSpecs[layersSpecs],
-          this.sourcesWithLayers[layersSpecs],
+          newLayersSpecs[id],
+          this.layersSpecs[id],
+          this.sourcesWithLayers[id],
           this.mapLibreMap
         );
       });
@@ -6211,6 +6299,7 @@ class RoutingModule extends AbstractMapModule {
     return mapStyleLayerIDs.lowestLabel;
   }
 }
+const version = "5.12.0";
 const DEFAULT_PUBLISHED_STYLE = "standardLight";
 const URL_PREFIX = "${baseURL}/maps/orbis/assets/styles/${version}/style.json?&apiVersion=1&key=${apiKey}";
 const publishedStyleModulesValues = {
@@ -6260,7 +6349,7 @@ const baseMapStyleUrlTemplates = {
   monoDark: baseMapStyleUrlTemplate("basic_mono-dark"),
   satellite: baseMapStyleUrlTemplate("basic_street-satellite")
 };
-const buildBaseMapStyleUrl = (publishedStyle, baseUrl, apiKey) => baseMapStyleUrlTemplates[publishedStyle?.id ?? DEFAULT_PUBLISHED_STYLE].replace("${baseURL}", baseUrl).replace("${version}", publishedStyle.version ?? "0.*").replace("${apiKey}", apiKey);
+const buildBaseMapStyleUrl = (publishedStyle, baseUrl, apiKey) => baseMapStyleUrlTemplates[publishedStyle?.id ?? DEFAULT_PUBLISHED_STYLE].replace("${baseURL}", baseUrl).replace("${version}", publishedStyle.version ?? "0.6.0-0").replace("${apiKey}", apiKey);
 const withApiKey = (givenUrl, apiKey) => {
   const url = new URL(givenUrl);
   if (!url.searchParams.has("key")) {
@@ -6436,9 +6525,13 @@ class TomTomMap {
       return this._params.style;
     };
     this._params = core.mergeFromGlobal(mapParams);
+    this.ensureMapLibreCSSLoaded();
     this.mapLibreMap = new maplibreGl.Map(buildMapOptions(mapLibreOptions, this._params));
     this.mapLibreMap.once("styledata", () => this.handleStyleData(false));
     this._eventsProxy = new EventsProxy(this.mapLibreMap, this._params?.eventsConfig);
+    this.loadRTLTextPlugin();
+  }
+  loadRTLTextPlugin() {
     setTimeout(() => {
       if (!["deferred", "loaded"].includes(maplibreGl.getRTLTextPluginStatus())) {
         maplibreGl.setRTLTextPlugin(
@@ -6448,6 +6541,24 @@ class TomTomMap {
       }
     });
   }
+  /**
+   * Dynamically loads the MapLibre CSS stylesheet from CDN.
+   */
+  ensureMapLibreCSSLoaded() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const existingLink = Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).some(
+      (element) => element.textContent?.includes("maplibre")
+    );
+    if (existingLink) {
+      return;
+    }
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = `https://unpkg.com/maplibre-gl@${version}/dist/maplibre-gl.css`;
+    document.head.appendChild(link);
+  }
   _setLanguage(language) {
     this._params = { ...this._params, language };
     const mapLanguage = language?.includes("-") ? language.split("-")[0] : language;