I am learning web mapping. I created tiles with TileMill, exported them to .mbtiles, and used MBUtil to unpack them. This gives me a hierarchy of folders of png files. I then added the tiles to Leaflet map using L.tileLayer('<path to top folder>/{z}/{x}/{y}.png').addTo(map). This works. I found there was a metadata.josn file at the top folder, which contains information on bounds and so on. I removed the json file, and the tile layer still works perfectly. This surprised me. Where does Leaflet get the spatial information from PNG files to decide which images to show?

  • What is the map area covered by tiles? Try to put a marker with known lat,long coordinates on the map. Does it show in the right place? See answer to this question: gis.stackexchange.com/questions/354329/… – TomazicM Mar 23 '20 at 7:08
  • Thx for pointing to the post. It did help. So I guess it's because the way the folders are structured contains location information. – Sara Mar 23 '20 at 16:34
  • Yes, folder structure + coordinates of upper left corner of map area + (resolution or map area bounds). – TomazicM Mar 23 '20 at 17:22
  • I think in this case the map area wasn't provided with the files. Or maybe it did, but even after I removed it (the json file), the map still seems to work. I think it may be because Leaflet and the data both follow the map area and zoom level conventions used by Google Maps and Open Street Map. – Sara Mar 24 '20 at 1:43
  • Did you try to put a marker with known lat,long coordinates on the map. Was it shown at the right place? – TomazicM Mar 24 '20 at 6:31

Your Answer

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

Browse other questions tagged or ask your own question.