Leaflet + local .osm file

Question

I've been using leaflet.js to render maps like it is shown in leaflet getting started page:

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { ...

I've download a .osm file (map.osm) from openstreetmap and I'm triying to figure our how can I use this file from leaflet like:

L.tileLayer('file:///./map.osm/{z}/{x}/{y}.png/{z}/{x}/{y}.png', { ...

In other cases I've used Mobile atlas creator to download map layer and use them in leaflet. It downloads selected maps in a directory structure like zoom - x - y .png files (like: file_system\local_maps_dir\13\4049\2999.png where 13 is zoom latitude 4049 and longitude 2999).

But now I need to load or use these .osm files with leaflet.

Is there any way to do this? Do I need to convert this .osm file?

Thanks everyone for your time.

Answer 1

You can't. Leaflet requires raster tiles whereas a .osm (or .pbf) file contains raw vector data. In order to produce raster tiles out of vector data you have to render it. This can't be done by Leaflet directly but requires external tools instead.

Rendering tiles locally can be done for example by using Maperitive or TileMill. You might need another step for extracting individual tiles from the produced MBTiles.