Raster Flow Tiles API image bounds


Using Raster Flow Tiles API, its required to pass x, y.

When we get the images (png) now I need to lay it on top of my map. So i need image bounds so I can use it to lay the image on my leaflet map. How to generate the image bounds:

var imageUrl = ‘http://localhost:55058/images/route/start-1.png’,
imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(mymap);

Hope to get some help.


Currently its tiled like that because I am missing the image bounds.

Any help will be appreciated.

Any help please On how to fit the returned image on the map?

And why aren’t you using Tile Layer?

Can give example please on how?

There is an example on https://leafletjs.com/examples/quick-start/ with other provider, but if you adjust the url then you can use TomTom Traffic API Flow Tiles.

I did fast test as below:

L.tileLayer(‘https://api.tomtom.com/traffic/map/4/tile/flow/absolute/{’ + zoom + ‘}/{’ + xy[0] + ‘}/{’ + xy[1] + ‘.png?key=***********************************?{foo}’,
foo: ‘bar’,
attribution: ‘Map data © OpenStreetMap contributors, CC-BY-SA

But it did not work.

I would leave {z}/{x}/{y} because those are calculated by Leaflet.

Then I will get this:

Its repeated image

It is hard to investigate with so little details.

I managed to get it working:

What is the code please. Can you post sample?
And how did you get the traffic for the entire map?

That is the code I used

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

1 Like

What is the value for {s}
{z}: is the zoom level for the map.
{x},{y} : are calculated from the lat,long.


It is used to cycle hostname. Multiple browsers have a limit for connections towards one hostname. Leaflet with use of {s} make a split for requests and one part of them use a.api.tomtom.com, second part use b.api.tomtom.com and the rest use c.api.tomtom.com.
With this your browser can retrieve 3 times more tiles at once.
It is described in the documentation: https://leafletjs.com/reference-1.6.0.html#tilelayer

So what should I put as a value?

Leaflet is calculating the value in runtime.

Many thanks for the help.

1 Like