Offline GIS App using Cordova Part I
OVERVIEW
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.
- 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.
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
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{
"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 = L.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
}).addTo(map);
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
When using Splashscreen, sometimes it makes the
<preference name="SplashScreenDelay" value="0" />
TO BE CONTINUED....
As of now(beta version) you can download the APK here, and give me critics and suggestion on how to improve it.
