2

I'm using Openlayers v6.1.1 and I'm trying to get URLs of all tiles in the current map extent. I was trying to do it in the following way:

var tileUrlFunction = tileSource.getTileUrlFunction(),
    grid = tileSource.getTileGrid(),
    extent = map.getView().calculateExtent(map.getSize()),
    zoom = map.getView().getZoom();

grid.forEachTileCoord(extent, zoom, function (tile) {
    console.log(tileUrlFunction(tile.getTileCoord(), 1, ol.proj.get('EPSG:3857')));
});

But forEachTileCoord loop is never triggered. What I'm doing wrong?

I also tested different approach to get the URLs like that:

tileSource.on('tileloadend', function (evt) {
   console.log(getTileUrlFunction(evt.tile.getTileCoord(), 1, ol.proj.get('EPSG:3857')));
});

But this also doesn't give me an URL's - just undefined's.

1

The parameter for the forEachTileCoord callback is a tileCoord

grid.forEachTileCoord(extent, zoom, function (tileCoord) {
    console.log(tileUrlFunction(tileCoord, 1, ol.proj.get('EPSG:3857')));
});

For the tileloadend event you need to get the function using this.getTileUrlFunction() - this inside the callback will be tileSource - then call it so you need two pairs of brackets this.getTileUrlFunction()(...)

tileSource.on('tileloadend', function (evt) {
   console.log(this.getTileUrlFunction()(evt.tile.getTileCoord(), 1, ol.proj.get('EPSG:3857')));
});

This sample code is working for me

  var tileSource = new ol.source.OSM();

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: tileSource
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });

  var tileUrlFunction = tileSource.getTileUrlFunction(),
    grid = tileSource.getTileGrid(),
    extent = map.getView().calculateExtent(map.getSize()),
    zoom = map.getView().getZoom();

  grid.forEachTileCoord(extent, zoom, function (tileCoord) {
    console.log(tileUrlFunction(tileCoord, 1, ol.proj.get('EPSG:3857')));
  });
4
  • After your changes the tileSource.on('tileloadend... works fine, I get the URL's. But in fact I would like to get the fist code to work as I need to the all URL's for tiles in the current extent. And the forEachTileCoord loop is not working. You fixed the callback function (change of pram) but the problems is somewhere else. The loop is not triggered at all (like if there would be no tiles in the extent which is not possible) Jan 23 '20 at 20:35
  • I have added some sample code which works for me.
    – Mike
    Jan 23 '20 at 20:51
  • I created a sample HTML page just with a few lines of the script to render the map and get the URLs it works fine. For some reason, the same code is not working on my project. Don't know why. I've layer's split across files as there is my more logic for each layer but that should not be the problem. Jan 24 '20 at 12:53
  • I will mark this an answer. Although, it didn't solve my problem directly but showed me the right path. Jan 27 '20 at 17:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.