Leaflet Offline Map – How to Get Leaflet Map to Work Offline

javascriptleaflet

I am interested in how to create a base map for Leaflet offline with XAMPP.

Is this just a picture of what you draw from the Internet and then specifies the path with L.tileLayer?

I'm still a bit new about Leaflet and JavaScript

Best Answer

Tile layers are a set of image files, usually about 256x256 pixels, that are accessed via a URL like /path/to/map/$x/$y/$z.png, so that, for example, /path/to/map/3/2/4.png returns the tile (part of the bigger image) that is 3 tiles along, 2 tiles down, of zoom level 4 of the tile layer (I might have the x,y,z, order wrong here, but you get the idea).

The map you see on screen when using something like OpenStreetMap, will be a number of these images placed together like a set of square tiles to show a map larger than 256x256 pixels.

The advantage of this system is that you don't need to have a single gigantic file to show the whole world at every scale. As you zoom in, the client system (eg leaflet), asks for tiles at a different zoom level, and only has to get 16 files to show a map of 1024x1024 pixels.

If you want to create a base map from an image you need to generate all the tiles that make up the zoom levels of your map - you don't just take a single image file and serve it from the web server.

With a web server running an XAMPP stack you could possibly do this dynamically - leaflet will ask for a URL like /map/4/3/2.png and then your server would generate that image file, perhaps by slicing from a single source image. Some basic mathematical skills are needed to work out which pixels.

Or you can build a set of tiles and serve them as static images under those URLS - there are tools that can do this based on the GDAL library, and there are questions on here with answers.

Related Question