TomTom traffic api integration in ESRI js api

abdelrahmanazzam — Mon, 11 Dec 2023 08:11:27 GMT

I'm facing issues displaying results from the TomTom API in my ArcGIS JavaScript application. Despite configuring a Vector Tile Layer with TomTom traffic data, the results are not showing up on the map. I'm seeking assistance in identifying and resolving the problem.

Code Snippet:

javascript this does not show anything on the map but it makes requests for the traffic data and returns the data as .pbf file

 let vectorTileLayer = new VectorTileLayer({
    title: 'TomTom Traffic',
    style: {
      version: 8,
      sources: {
        tomtom: {
          type: 'vector',
          tileCompression: "gzip",
          tiles: ["https://c.api.tomtom.com/traffic/map/4/tile/flow/absolute/{z}/{x}/{y}.pbf?key=hCsMmqZyJdl2R0HmgbL02FmpQVGmAMnT"],
          minzoom: 0,
          maxzoom: 22,
        },
      },
      layers: [
        {
          id: 'Traffic flow',
          type: 'fill',
          source: 'tomtom',
          'source-layer': 'public',
          paint: {
            'fill-color': 'red',
            'fill-opacity': 0.2,
            'fill-outline-color': 'blue',
          },
        },
      ],
    },
  });

this works but it is an image tiles

 let tileLayer = new WebTileLayer({
    title: 'TomTom Traffic',
    urlTemplate: "https://c.api.tomtom.com/traffic/map/4/tile/flow/relative/{z}/{x}/{y}.png?key=hCsMmqZyJdl2R0HmgbL02FmpQVGmAMnT&thickness=8&tileSize=512",
    minZoom: 0,
    maxZoom: 22,
  });

Issue Details:

I have set up a Vector Tile Layer with TomTom traffic data using the ArcGIS API for JavaScript. The TomTom API URL and parameters have been configured correctly. There are no console errors or warnings, but the results are not visible on the map. Additional Information:

What steps should I take to troubleshoot and identify the reason why results from the TomTom API are not displaying? Are there common challenges or considerations when integrating TomTom API results with the ArcGIS JavaScript API? Are there specific debugging techniques or tools I can use to inspect the TomTom API response and understand why it's not rendering on the map?

I have verified the TomTom API key and ensured that it is valid. Other layers, such as WebTileLayer, are displaying correctly. I'm using version 4.21 of the ArcGIS API for JavaScript.

Re: TomTom traffic api integration in ESRI js api

Mahfouz — Mon, 11 Dec 2023 22:40:51 GMT

You Must correctly define the layers and give appropriate styling for the data

for example in your Case the correct style should look something like this

const vectorTileLayer = new VectorTileLayer({

title: 'TomTom Traffic',

style: {

version: 8,

sources: {

tomtom: {

type: 'vector',

tileCompression: 'gzip',

tiles: ['https://c.api.tomtom.com/traffic/map/4/tile/flow/relative/{z}/{x}/{y}.pbf?key=hCsMmqZyJdl2R0HmgbL02FmpQVGmAMnT&trafficLevelStep=0.1'],

minzoom: 0,

maxzoom: 22,

layers: [

// {

// id: 'Traffic',

// type: 'line', // Change type to 'line' for linestring geometries

// source: 'tomtom',

// 'source-layer': 'Traffic flow',

// paint: {

// 'line-color': [

// 'match',

// ['get', 'road_type'],

// 'Motorway', 'blue',

// 'International road', 'green',

// 'Major road', 'red',

// 'Secondary road', 'orange',

// 'Connecting road', 'yellow',

// 'Major local road', 'purple',

// 'Local road', 'black',

// 'Minor local road', 'gray',

// 'Other roads', 'brown',

// 'pink'

// ],

// 'line-opacity': 1,

// 'line-width': 8,

// },

{

id: 'Traffic_flow',

type: 'line',

source: 'tomtom',

'source-layer': 'Traffic flow',

paint: {

'line-color': [

'step',

['get', 'traffic_level'],

'red', // 0.0

0.1, 'darkred',

0.2, 'brown',

0.3, 'red',

0.4, 'orange',

0.5, 'darkorange',

0.6, 'gold',

0.7, 'yellow',

0.8, 'yellowgreen',

0.9, 'limegreen',

1.0, 'green', // 1.0

'line-opacity': 1,

'line-width': 4,

}

});

topic TomTom traffic api integration in ESRI js api in ArcGIS JavaScript Maps SDK Questions

TomTom traffic api integration in ESRI js api

Re: TomTom traffic api integration in ESRI js api