Offline GIS App using Cordova Part I


The application needs inputs from the user such as his/her location (this is optional), estimated amount of rainfall (rainfall intensity) and lastly the estimated time the rain has started.  The estimated time the rain has started is an important input from the user as it is the basis in computing when the flood water will arrive on the area. After providing the data, depending on the selected rainfall amount, the application will check if this data is present on the phone memory, otherwise, it will be downloaded. After a successful download, the user can now draw on the map. It can either be points, polygon or multipolygon. The drawn layer will be assessed by the application, if it is affected, it will provide the above information with rainfall amount and its location and it will be saved onto the phone memory for future reference, if not, throws a prompt that the area is not flooded.  
Software/program used:
  • mbutil
  • TileMill
  • Cygwin Terminal
  • leaflet-pip
  • leafletjs
  • Cordova
  • ogr2ogr

Preparing the Base Map

I need map tiles for my base map. Fortunately I have the resources, I collected all the necessary shapefiles and using TileMill I was able to "design" a map and exported it as a ".mbtiles" files. It was then converted as tiles(png format) using mbutils of Mapbox. Unfortunately, mbutils does not run in Windows, so we need Cygwin Terminal to make it to work. Installed it, then follow the documentation of mbutils.

In exporting the designed map using TileMill, I limited the zoom level between 13 to 19 to save space/memory as it is not necessary also for the app that I'm developing to include a much higher zoom level or lower.

Integrating the tiles in leafletjs

This gives me pain in the head (HAHA), tiles are not showing in the browser(although I'm developing an android app, I always test it first in the browser). So, after reading some docs about it, I interchange the center value that can be found in "metadata.json"(textfile included when converting mbtiles files into images). Then, voilĂ !!!

For example: metadata.json
    "attribution": "",
    "description": "CBR4326",
    "center": "125.59,9.1204,14",
    "bounds": "125.521,9.078,125.6726,9.1501",
    "minzoom": "14",
    "version": "1.0.0",
    "template": "",
    "maxzoom": "17",
    "name": "CBR4326"

And in leaflet, it should be:
map ='main').setView([9.1204, 125.59], 14);
cbr_tile = L.tileLayer('./tile/cbr_new_design_tms2/{z}/{x}/{y}.png', {
        minZoom: 14,
        maxZoom: 16,
        tms: true

Choosing IDE and UI Framework

I am using Intel XDK 3522 as an IDE and App Framework 3 for UI.

Intel XDK is fine, it's lightweight compares to other IDE and debugging is easy (too many tiles give errors though, had to limit the zoom level to 14-16 when debugging). My only complain is when building an APK. It requires an internet connection because first, the project is uploaded into the Intel's Build Server and then APK is sent through email in which you can download it.

As suggested by Intel, I used AF3. Now, it has poor documentation, and few examples. You have to explore it on your own. That's the risk, but if your building a simple app, it will do. 

Cordova Plugins 

corodova plugins
Several plugins other than the core ones,such as File, File Transfer, and SQLite Data Storage were used. 
When using Splashscreen, sometimes it makes the app (map tiles)  misplaced, and I don't know why. So, for the meantime, I disabled the splashscreen by setting it to 0 (intelxdk.config.additions.xml).

<preference name="SplashScreenDelay" value="0" />


As of now(beta version) you can download the APK here, and give me critics and suggestion on how to improve it.

Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables