1

I've a local map server that renders mbtiles file in the browser and I'm trying to access the source files generated by it and loaded on the document.

So far I've been able to get my hands on the respective HTMLcollection with the document.querySelector and document.getElementsByClassName() methods:

var collection = 
  document.querySelector(".featured")
  .getElementsByClassName("leaflet-tile");

console.log(collection);

I get the following log on Firebug:

0 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
1 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
2 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
3 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
4 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
5 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
6 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
7 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
8 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
9 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
10 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
11 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
12 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1540.png
13 img.leaflet-tile.leaflet-tile-loaded ./tiles/b...1541.png
length 14
__proto__ HTMLCollection { item=item(),  namedItem=namedItem()}

I tried everything I could remember to get hold of the paths for the png files. For instance:

var array = [];

for (var i = 0; i < collection.length; i++) {
    array.push([
        collection[i]
]);
    console.log(collection[i]);
}

console.log("lenght of collection is: " + collection.length);
console.dir("array is: " + array);

On my console I get the following:

lenght of collection is: 0
array is: undefined

A lenght of zero and nothing on my array. It's obvious that I'm doing something wrong on my iteration, but I cannot figure it out. What am I missing here?

1

I've got no problems outputting tile urls.

I've noticed this at the end of your for loop: ; i++) {{ - is the double curly bracket intentional?

  • Many thanks for the JsBin example, it's really helpful! Anyway, I changed the code according to your example and I still get nothing. This is weird. At least I know that the issue probably lies someplace else. Btw, the double curly bracket was unintentional, thanks for pointing it out! I since fixed the typo in the code above. – pierrebonbon Feb 16 '16 at 16:34
  • I finally got this solution to work. The problem was unrelated with the the question itself (it had to do with the scope of the variable for the L.tileLayer instance). As an alternative, leaflet's tileload and tileunload events do the trick as well, as suggested here by @iH8 . – pierrebonbon Feb 17 '16 at 0:24

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.