I'm trying to convert OpenStreetMap data (osm.pbf file) to "z/x/y.pbf" folder/file structure and show the map offline using Openlayers 6 and Ionic.
What I did so far is:
- Downloaded osm.pbf file (https://download.geofabrik.de/europe/netherlands/flevoland.html)
- Used Maperitive to open osm.pbf and used
generate-mbtiles [minzoom=0 maxzoom=16]to generate mbtiles - Used mbutil (https://github.com/mapbox/mbutil) with
mb-util --image_format=pbf input_folder output_foldercommand. After this I end up with pbfs inside proper folder structure - so far so great. - Show pbfs with openlayers (note that I'm using Ionic so here's some Angular code)
this.map = new Map({
layers: [
new VectorTileLayer({
declutter: true,
source: new VectorTileSource({
format: new MVT(),
url: 'http://localhost:8100/assets/downloaded-osm-pbfs/{z}/{x}/{y}.pbf'
}),
style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text)
})
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
After this I end up with "Error: Unimplemented type: 6" once I try to view map inside browser.

Interesting thing is that if I use https://openmaptiles.com/downloads and download mbtiles from there and do steps 3-4 (in step 3 I just do extra step and uncompress pbfs because openmaptiles gzip's the files) everything is displayed properly, but problem here is that openmaptiles provide 14 zoom levels and I need 16 zoom levels.
Any idea how to overcome this issue? Any help will be appreciated!