I'm trying to create an app that contains a small map that should always work without internet connection for four different zoom levels.

To do this I know that I have to generate map tiles in png (or similar) to be used later on by Leaflet (or OpenLayers/Mapbox GL JS). This is no issue, because using Maperitive I can generate map tiles with given bounds and min and max zoom levels.

My problem is that I need to use a different style for roads, buildings, etc. To edit this style I used Mapbox Studio online editor and generated a JSON file with my custom styles.

What I need to do is apply this style before generating the resulting tiles, but I don't know how to do this.

Below there's a diagram for what I'm thinking about.



1 Answer 1


Solution is at @PlaneMad Answer in OSM Help website

I couldn't use the styles generated with Mapbox Studio but instead another solution was used.

What i did:

  1. Go to OpenStreetMap and export the boundingbox i wanted to work with.
  2. Open the downloaded osm file in Maperitive.
  3. Map > Switch to Rules > googlemaps
  4. Map > Edit Rendering Rules and now i edited the styles as a wanted.
  5. Run command: generate-tiles minzoom=14 maxzoom=17 resolution=2 bounds="..."

Now in Maperitive folder there's a new folder called Tiles and inside there's tiles for each zoom level. To use those tiles offline just point Leaflet to local filesystem with: L.tileLayer('./{z}/{x}/{y}.png');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.