Raster Flow Tiles API image bounds

Hi,

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.

/Omar

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

Any help will be appreciated.
/Omar

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

And why aren’t you using Tile Layer?
https://leafletjs.com/reference-1.6.0.html#tilelayer

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.

Hi,
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
}).addTo(map);

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'
    }).addTo(map);

L.tileLayer('https://{s}.api.tomtom.com/traffic/map/4/tile/flow/absolute/{z}/{x}/{y}.png?key=myapikey').addTo(map);
1 Like

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

L.tileLayer(‘https://{s}.api.tomtom.com/traffic/map/4/tile/flow/absolute/{z}/{x}/{y}.png?key=myapikey’).addTo(map);

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