Defining and including local tileLayer in Leaflet

Question

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?

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

• https://en.wikipedia.org/wiki/Tiled_web_map
• http://wiki.openstreetmap.org/wiki/Tiles