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 Answer 1

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, 2020 at 20:35
  • I have added some sample code which works for me.
    – Mike
    Jan 23, 2020 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, 2020 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, 2020 at 17:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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