Place a layer with traffic jams on our J.Map map
The Yandex.Maps API currently does not allow “automatically” mapping a layer with traffic jams ( UPD : meaning the officially documented method, accompanying controls, etc ...) However, this problem is still solved quite simply using API.
The API has methods for placing its own layer on the map. The map layer is characterized by the source of tiles ( YMaps.TileDataSource ). To create a source, you must specify a URL pattern with tiles.
The first problem is to find out the source address used by Ya.karty. It is easy to solve - we look at the map with traffic jams using FireBug and see at the very top <img /> with [src = http: //trf.maps.yandex.net/tiles? L = trf & x = 2500 & y = 1244 & z = 12 & tm = 1267986241] Here x, y and z are tile coordinates and map zoom information. tm - time stamp for which data on traffic are given. Without the tm parameter, the tile server gives 404 ...
The second problem is to find out the current time stamp for which traffic jams are given. Let's use FireBug again.
')
You can find a request to the address of trf.maps.yandex.net/trf/stat.js in the exchange log with the server . In response, a script comes with a call to YMaps.TrafficLoader.onLoad ('stat', "JSON_packed_data"); Inside the data transmitted by the second argument, there is a timestamp parameter that coincides with the current tm parameter when loading tiles. PROFIT!
On the main Ya. Map, YMaps.TrafficLoader is defined, on a normal page with a map - no.
As a result, code was written that defines the YMaps.TrafficLoader object, the onLoad method in it and uses the obtained information to create a new layer, a TileDataSource for it, and add a layer to the map. Data is updated every 5 minutes.
Download traffic.js .
You need to connect after loading the API, before loading the code that creates the map on your page. In the map initialization code, you need to call YMaps.TrafficLoader.init (mapObject), where mapObject is the instance of YMaps.Map containing your map. In my case, I invoke initialization on the event geocoder.Events.Load .
UPD : Transferred from the Yandex blog to Web development.
The API has methods for placing its own layer on the map. The map layer is characterized by the source of tiles ( YMaps.TileDataSource ). To create a source, you must specify a URL pattern with tiles.
Tile source
The first problem is to find out the source address used by Ya.karty. It is easy to solve - we look at the map with traffic jams using FireBug and see at the very top <img /> with [src = http: //trf.maps.yandex.net/tiles? L = trf & x = 2500 & y = 1244 & z = 12 & tm = 1267986241] Here x, y and z are tile coordinates and map zoom information. tm - time stamp for which data on traffic are given. Without the tm parameter, the tile server gives 404 ...
Traffic updates
The second problem is to find out the current time stamp for which traffic jams are given. Let's use FireBug again.
')
You can find a request to the address of trf.maps.yandex.net/trf/stat.js in the exchange log with the server . In response, a script comes with a call to YMaps.TrafficLoader.onLoad ('stat', "JSON_packed_data"); Inside the data transmitted by the second argument, there is a timestamp parameter that coincides with the current tm parameter when loading tiles. PROFIT!
On the main Ya. Map, YMaps.TrafficLoader is defined, on a normal page with a map - no.
As a result, code was written that defines the YMaps.TrafficLoader object, the onLoad method in it and uses the obtained information to create a new layer, a TileDataSource for it, and add a layer to the map. Data is updated every 5 minutes.
Download traffic.js .
You need to connect after loading the API, before loading the code that creates the map on your page. In the map initialization code, you need to call YMaps.TrafficLoader.init (mapObject), where mapObject is the instance of YMaps.Map containing your map. In my case, I invoke initialization on the event geocoder.Events.Load .
UPD : Transferred from the Yandex blog to Web development.
Source: https://habr.com/ru/post/86857/
All Articles