Dynamically load tile package in QML

[ChristopherSwingley]

I've been able to load background tile packages using QML similar to this:

MapView {
  id: mapView

  Map {
    id: map
    
    Basemap {
      id: baseMap

      ArcGISTiledLayer {
        TileCache {
          id: tileCache
          path: file:///C:/tile_packages/landsat_2017.tpk
        }
      }
    }
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

But I don't like the idea of hard-coding the tile package path into the app and would prefer to allow users to set the path in a config/settings file or local storage database. But I can't seem to figure out the JavaScript needed to dynamically create the ArcGISTiledLayer + TileCache and add it to the Basemap/Map. Can anyone share some code to replicate what I have above in QML such that the tile cache path can come from a variable?

This is what I've tried in the ApplicationWindow Component.onCompleted, but I get the error "Cannot assign QObject* to QmlArcGISItem*" on line 5 below when I try to set the item property on the ArcGISTiledLayer to the TileCache object.

var tilePackage = ArcGISRuntimeEnvironment.createObject("TileCache");
tilePackage.path = tilePackagePath;  // from config/settings/local storage db

var tiledLayer = ArcGISRuntimeEnvironment.createObject("ArcGISTiledLayer");
tiledLayer.item = tilePackage;

tilePackage.loadStatusChanged.connect(function() {
    if (tilePackage.loadStatus === Enums.LoadStatusLoaded) {
        console.log("LoadStatusLoaded");
        mapView.map = tiledLayer;
    } else if (tilePackage.loadStatusChanged === Enums.LoadStatusFailedToLoad) {
        console.log("failed to load tpk", error.message, error.additionalMessage);
    }
});

tilePackage.load();
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks!

[LucasDanzinger · Accepted solution]

We now support loading an ArcGISTiledLayer directly by pointing it to a local file URL, so no need to mess with the TileCache anymore. 

import QtQuick 2.6
import QtQuick.Controls 1.4
import Esri.ArcGISRuntime 100.3

ApplicationWindow {
    id: appWindow
    width: 800
    height: 600   
    
    // add a mapView component
    MapView {
        anchors.fill: parent        

        // add a map to the mapview
        Map {
            Basemap {
                id: basemap
            }
        }
    }

    Button {
        text: "add basemap"
        onClicked: {
            var filePath = "file:///Users/username/ArcGIS/Runtime/UnitTests/tpks/Campus.tpk";
            var tiledLayer = ArcGISRuntimeEnvironment.createObject("ArcGISTiledLayer", {url: filePath});
            basemap.baseLayers.append(tiledLayer)
        }
    }
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[ChristopherSwingley]

Great, thanks Lucas. Much appreciated. Works in 100.2 as well.