1

I have a problem with including path of the local tileLayer (generated in OpenStreetMap) in Leaflet.

Here is the code in which I define path to the map.png

var map = L.map('map', {
    zoom: 8,
    layers: L.tileLayer('/tiles/{z}/{x}/{y}.png')
});

Errors in my console:

GET http://192.168.1.1:3000/tiles/8/139/92.png 404 (Not Found)   92.png:1 
GET http://192.168.1.1:3000/tiles/8/139/93.png 404 (Not Found)   93.png:1
GET http://192.168.1.1:3000/tiles/8/140/92.png 404 (Not Found)   92.png:1 
GET http://192.168.1.1:3000/tiles/8/139/91.png 404 (Not Found)   91.png:1 
GET http://192.168.1.1:3000/tiles/8/138/92.png 404 (Not Found)   92.png:1 
GET http://192.168.1.1:3000/tiles/8/138/91.png 404 (Not Found)   91.png:1 
GET http://192.168.1.1:3000/tiles/8/138/93.png 404 (Not Found)   93.png:1 
.......

Do I need to rename map.png file?

|improve this question
  • What do you mean by "map.png file"? Do you have a single PNG file? Usually you would have a folder structure with thousands of PNG files. – ghybs Dec 16 '15 at 15:59
  • Yes, I have only map.png file. I got only this one from openstreetmap.org when I click on download button. Is there some other way do to export? – user3265921 Dec 16 '15 at 16:05
1

If you have a single image to display, you would not use a Tile Layer, but an Image Overlay instead.

Used to load and display a single image over specific bounds of the map

Make sure you retrieve the bounds coordinates of the image you downloaded (on OSM website, open the "Export" tab; it should show the view port bounds coordinates).

For information, a "Tile Layer" is used when you have a map made up of different zoom levels (usually 1 folder per zoom level, referred to as {z}), and for each of these zoom levels, the map is split in thousands of "tiles" (small sub-images, usually square), usually arranged by their column number (1 folder per column, referred to as {x}) and which file name corresponds to their row number (referred to as {y}.png). Hence the usual URL template "/{z}/{x}/{y}.png".

On OSM map, do a right click and select "View image" to see an individual tile and its exact URL in the browser location bar.

For more explanations, please refer to Wikipedia and OSM wiki:

|improve this answer
  • Then if I need to show (and simulate) map locally, I need to download thousands of tiles? OSM provide export in XML and I didn't find a solution to download tiles :/ – user3265921 Dec 17 '15 at 10:06
  • 1
    The "export" functionality gives you the raw data (that is used to generate the tiles). With this raw data, you can generate all the tiles yourself (using software like Maperitive or directly set up a server). See OSM wiki for further details. Another possibility is to "scrape" tiles from a server. OSM wiki should also have a page on this (disclaimer: many tile sources specifically ask you not to do so - one notable exception is MapQuest Open). – ghybs Dec 17 '15 at 10:13
  • 1
    You also have some Leaflet Plugins (like TileLayer.PouchDBCached) that give you the possibility to cache tiles for offline usage. – ghybs Dec 17 '15 at 10:14

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.