Qt/Qml: how to include map tiles for offline usage?

Question

I need to include offline tiles (slippy map) into a Qt/Qml mobile application that mainly runs on Android and iOS.

The only well-documented and working solution I found

Answer 1

I know this answer is late, but I had the same challenge with client supplied offline maps on Linux

You need to create the directory structure for your map tiles. As I used openstreetmaps I copied the directory structure that they use i.e. root/zoom_level/area_level_1/area_level_2/tile.png

e.g. :

~/osmTiles/12/3820/2078.png

I used marble (https://marble.kde.org/install.php?) to download the map tiles into the correct directory tree (cached), which I then copied to the target hardware and replaced the osm tiles with the client's .png files

I then used npm from node.js to install http-server and hosted the root tile directory as an http server at http//localhost:port (this answer explained it very well: https://stackoverflow.com/a/12905427/5452614)

e.g. :

http-server ~/osmTiles -p 8080

which served osmTiles on http//127.0.0.1:8080

finally I modified the standard QML Plugin thusly

Plugin {
  id: osmPlugin
  name: "osm"
  PluginParameter { name: "osm.useragent";         value: "My Company Name" }
  PluginParameter { name: "osm.mapping.host";      value: "http://127.0.0.1:8080/" }
  PluginParameter { name: "osm.mapping.copyright"; value: "MyCompany" }
}

where I told QML where to look for my offline tiles. I had to specify that the map should be a custom map, which was harder. Through trial and error I found that supportedMapTypes[7] is custom map. I don't know why, but that's just how it worked out

Map{
  plugin: osmPlugin
  activeMapType: supportedMapTypes[7]
}