Community
Select to view content in your preferred language

TomTom traffic api integration in ESRI js api

739
1
12-11-2023 12:11 AM
abdelrahmanazzam
by
New Contributor
‎12-11-2023 12:11 AM

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.

0 Kudos
1 Reply
Mahfouz
by
New Contributor
‎12-11-2023 02:40 PM

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',
              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,                  
              }
            }
          ],
        },
      });
0 Kudos