Generate styled Map Tiles

Question

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.

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');