MOBILE APPLICATION DEVELOPMENT
WITH OPENLAYERS AND SENCHA TOUCH
Bart van den Eijnden
https://twitter.com/bartvdeijnden
https://github.com/bartvde
ENFORCEMENT APPLICATIOn
- Developed for SFMTA
- Parking sensors
- Oracle data warehouse
- GeoServer (WMS and WFS-T)
- Assist parking citation officer
- Find unpaid vehicles
TECHNOLOGY
- OpenLayers 2
- Sencha Touch 2.0.1.1
- GXM (GeoExt Mobile)
- Android (3.2 -> 4.0.3)
- http://www.appsgeyser.com
- Motorola XYBoard 8.2" tablet
MOBILE
DEVELOPMENT
IS NOT SO EASY
AND CAN TAKE
A LOT OF YOUR TIME
ANDROID
STOCK
BROWSER IS
BUGGY
DEBUGGING
CAPABILITIES
ARE LIKELY
WORSE
THAN ON THE DESKTOP
(TIME CONSUMING)
USE A
DIFFERENT
WORKFLOW / INTERACTION
THAN ON
DESKTOP
MAIN ISSUES FOR THE MAP
Problematic feature selection
Performance of map drag
OpenLAYERS
Feature Selection:
- Canvas seems buggy on Android
- Larger hit target in canvas
- Use markers (marker renderer)
- Headless renderer
Other:
- Use TileManager (tile queue and reuse images)
Headless renderer
Render points as WMS
Retrieve vector data through WFS but don't display
Touch selection: find closest hit in vector data
Display selected feature with canvas
Best touch selection whilst having acceptable panning performance
Sencha TOUCH
Android is not so well supported
Sencha Cmd: hard to find cause of issues
Did like the MVC part
Geolocation in ST was buggy (used OpenLayers.Control.Geolocate instead)
Used singleton for config
Not sure if I would use it again
INTEGRATE OPENLAYERS in ST
- app.json -> resources -> add OpenLayers.js
- add script tag in index.html
- use trimmed down build profile of OL
QUESTIONS?
THANKS FOR YOUR TIME!
bartvde@boundlessgeo.com
MOBILE APPLICATION DEVELOPMENT WITH OPENLAYERS AND SENCHA TOUCH
By bartvde
