Monday, March 19, 2012

Offline TPK viewer in a Flex Mobile Application

In this post I will demonstrate how to write a Flex mobile application that displays a map with a tiled layer, where the tile source is the unpacked content of a tpk file. A tile package or tpk is generated using ArcMap and is a zip file that contains a couple of configuration files holding tile metadata and a set of ISAM files where the variable length files contain the tile images. The mobile application enables a user to download one or more tpk files from a web server to the local storage and disconnect from the “network” for offline viewing. When the user selects a local tpk, it will be unpacked and a map will render a tiled layer whose tile source is the local file unpacked images, enabling the user to zoom in and out and pan over the available levels as defined in the metadata file. This is possible due to the availability of the ByteArray class in AS3 and the capability to read and write binary files. The application is based on the Holistic Framework and is linked with the fast airzip library and the ArcGIS API for Flex. The TPKLayer in the map view is a subclass of the Esri TiledMapServiceLayer class where the getTileURL function is overridden to return a URLRequest instance with a custom ‘data’ scheme. This ‘data’ scheme informs the super class that the tile data is in a byte array referenced by the URLRequest instance ‘data’ property. In the TPKLayer, the getTileURL is invoked with a level, a row and a column value that are used to seek using the File API to a specific location to read the binary image at that location into a byte array. Using an iOS deployment, a user can drag and drop a tpk file onto the application's iTunes document folder for a later sync. This is possible due to the UIFileSharingEnabled declaration in the xml application manifest (CaheApp-app.xml). Like usual, all the source code is available, and you can download it from here. BTW, I was able to build the app using FlashBuilder 4.6 and the ArcGIS API 2.5 and upcoming 3.0 for Flex without issues. Have fun and keep me posted on your implementations.

24 comments:

mikeciz said...

This works great! Thanks so much Mansour!

krntom said...

great creation, since a number of person asking for offline content in mobile gis application. thanks

Casey Bentz said...

Do you have any idea when map package might be possible? We would really like to be able to be completely offline due to some very remote work sites, but still use Flex as compared to using wpf.

thunderhead said...

Using 10.1, u will be able to create tpk files.

Brendan said...

Awesome! Really impressive...but whats the deal with the URLRequest.url = 'data://LRC...'? Blew my mind that that is possible.
Is that an ESRI Flex API 2.5 specific thing? In the 2.4 API I got some sort of security error about trying to script the browser.

Really great work here. Thanks so much for sharing.

thunderhead said...

Yeap - 2.5 plus

Casey Bentz said...

Mansour, great news on tpk files, what about mpk files? The ability to take the dynamic map data with us to the field and edit it or select it to make related records is going to be the deciding factor in where we go with our mobile gis platform.

And thanks for getting back into the blogging spirit, 3 posts this week is awesome!

Casey Bentz said...

Mansour, great news on tpk files, what about mpk files? The ability to take the dynamic map data with us to the field and edit it or select it to make related records is going to be the deciding factor in where we go with our mobile gis platform.

And thanks for getting back into the blogging spirit, 3 posts this week is awesome!

Casey Bentz said...
This comment has been removed by the author.
thunderhead said...

"Official" Replica API is coming soon that will enable Feature packaging with offline editing

Casey Bentz said...

That sounds perfect. Any idea on a time frame?

Jeremy said...

Mansour,

Is there a size limit on the tpk. Hav e you run into any memory issues unpacking the tpk files?

Thanks,

Jeremy

Jeremy said...

Mansour,

Is there a size limit on the tpk. Hav e you run into any memory issues unpacking the tpk files?

Thanks,

Jeremy

thunderhead said...

There is another way to do this - where u do not have to place a TPK - but u can do the unpacking urself - on an android device with SDCard, used the external storage for that.

Zach said...

Is it possible to read TPK from a local storage, like SD Card in android...can you post some sample...

thunderhead said...

Yes it is possible, use the /mnt/sdcard as your mount point - did that for project with a huge TPK - and BTW, in upcoming 3.1 API, there will be native TPKLayer that u can point to the above - cool ?

Conry Lavis said...

so in short, yes you CAN make a business mobile app in flex or air but you probably shouldn't. For a standard app you can simply tell customers that only this or that platform is supported but for business purposes you want it to run on the most platforms possible and unfortunately right now adobe technology only runs on very limited mobile platforms.

Thanks:
Mobile Application Development

Casey Bentz said...

Mansour,

There appears to be a problem with how the code builds the path to the bundles. When I get to detail level 18, it stops working. When I trace it out, I see that the path it is building for the row and column is incorrect. The functions in question are buildCacheFilePath and toHexString. It appears to trim off a necessary character. The path it builds for me is, Inspection/v101/Layers/_alllayers/L18/R1758CB500. But the actual path is, Inspection/v101/Layers/_alllayers/L18/R17580Cb500. It is trimming the last 0 off the row.

Casey

Casey Bentz said...

FYI, my solution was to comment out the line

return text.substr(0, 4);

and used

return text;

I have not had any problems so far, but I assume you were trimming it down to 4 characters for a reason. I just haven't found that reason yet.

Unknown said...

Mansour is the best. We've extended this work and included both offline FeatureLayers and editing:

http://www.webmapsolutions.com/offline-editing-mobile-arcgis

--Rory

Unknown said...

@Casey Bentz the following code fixed the Level 18, Level 19 cache levels viewing issue.
1. Open up the TPKLayer.as file.
2. Find the function toHexString(value:int):Object
3. Change the bottom return line to:
return text.substr(0, text.length);

That will solve your woes. Let me know if that works for you.

Thanks,

Steve

Abdelhameed Hamdy said...
This comment has been removed by the author.
Abdelhameed Hamdy said...
This comment has been removed by the author.
Abdelhameed Hamdy said...

Awesome Mansour,

but I got two errors while trying to build the project in Flash Builder 4.6:

- Could not resolve to a component implementation. in Registry.mxml

- Multiple markers at this line:
-1023: Incompatible override.
-public
overridescom.esri.ags.Map.staticLayer
in SnapMap.as : Line 26

Regards