AnsweredAssumed Answered

How to use a tpk in a webmap?

Question asked by FriediL on Apr 17, 2016

Hi. I want to add an satellite image as .tpk to a webmap (using javascript API). I found the following github site: https://github.com/Esri/offline-editor-js/blob/master/doc/howtousetpklibrary.md which should make it easy. But unfortunately I am still having difficulties to use it. I have the feeling there is something missing in my code. I think the problem is that I don't quite understand the use of the BlobReader and what Blob actually should refer to.
Could anyone explain it to me?

      var map;
      require(["esri/map",
          "dist/offline-tpk-min.js",
          "dojo/domReady!"], 
       function(Map ) {
       //unzip the tpk-file
          O.esri.zip.createReader(new O.esri.zip.BlobReader(blob), function (zipReader) {
               zipReader.getEntries(function (entries) {
                    initMap(entries);
                    zipReader.close(function(evt){
                         console.log("Done reading zip file.")
                    })
               }, function (err) {
                    alert("There was a problem reading the file!: " + err);
               })
          })
       //create a new instance of TPKLayer
        tpkLayer = new O.esri.TPK.TPKLayer("localImage.tpk");

    //Listen for progress events to provide UX feedback
          tpkLayer.on("progress", function (evt) {
               evt == "start" ? loading.style.visibility = "visible" : loading.style.visibility = "hidden";
          })
          tpkLayer.extend(entries);
          map = new Map("map");
          map.addLayer(tpkLayer);
       tpkLayer.on("validationEvent", function(evt){
               //evt.msg is the string message
               //evt.err is the error 
               if(evt.msg == tpkLayer.NO_SUPPORT_ERROR){
                    //Let the user know the library isn't supported.
               }
          });
     // Listen for errors
          tpkLayer.on("databaseErrorEvent", function(evt){
               //evt.msg is the string message
               //evt.err is the error 
               if(evt.msg == tpkLayer.DB_INIT_ERROR){
                    //Let the user know there was a db problem.
               }
          });
      });

Outcomes