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


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.

| improve this answer | |

I use leaflet offline with apache cordova and electron http://geodataexplorer.world http://geodatacollector.xyz

Integrated tile server for local mbtiles and gpkg

| improve this answer | |

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.