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 is the commercial Esri Arcgis Runtime for Qt. However, creating tile packages requires using the Arcgis stack, either desktop or server (please correct me if I am mistaken).

https://developers.arcgis.com/qt/

I am looking for an open source and easy to use alternative.

QtLocation has just been improved in Qt 5.5, but there seems to be no out of the box solution for offline tile packages there:

http://doc-snapshots.qt.io/qt5-5.5/qtlocation-index.html

Answer 1

@Marco Piccolino, following our conversation from this other thread, here's the detailed workaround I've found so far, using only QtLocation, an offline tile cache, and a simple http server:

• You need to place your png tiles into a folder tree like this: ".../tiles/1.0.0/sat/{z}/{x}/{y}.png", cf this link

• You have to run an http server on that folder (you might want to use this command: sudo python -m SimpleHTTPServer 80)

• You will have to edit your hosts file to map the following domain to your server's IP address (most probably 127.0.0.1): otile1.mqcdn.com. This trick is quite dirty but as this url is hardcoded inside the QtLocation OSM plugin we don't really have much of a choice with the current available QML API.

• Finally the easiest part, in the QML code you should have something like this:

Plugin {
    id: mapProvider
    name: "osm"
}


Map {
    anchors.fill: parent
    plugin: mapProvider
    gesture.enabled: true
    activeMapType: supportedMapTypes[1]
}

Answer 2

Using offline maptiles is now possible through the ArcGIS Runtime library, starting from version 10.2.6:

https://developers.arcgis.com/qt/qml/api-reference/class_tiled_map_service_layer.html

Answer 3

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]
}