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?
Best Answer
If you have a single image to display, you would not use a Tile Layer, but an Image Overlay instead.
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: