PGAtlas
The Maryland-National Captial Park and Planning Commission needed a location-based mobile application that could allow its surveyors to find property information. The project consisted of two components: the Planning Board and the Zoning Finder.
Our Approach
We built each component in single-page web apps, powered by AngularJS. The data for both apps come from external web services, which our app consumes. There are some shared tools used by each application, such as the Esri interactions, and the PGAtlas factory. The PGAtlas factory provides a wrapper around Angular's $http service, to simplify our interactions with the web service. The PGAtlas factory also has a fancy "canceler" feature, which cancels an unresolved ajax request when a new one is made. This was useful to prevent strange things from happening when the user performs a new action while a previous one is still "thinking". I imagine it also speeds up the application. The PGAtlas factory also helped us solve a very annoying problem that the web service folks couldn't fix, which was that every AJAX request returned the desired data wrapped inside of a "d" variable, like {"d": "encoded JSON object"}. Thus, in our success callback, we could parse this out of every request, and make it easier to work with the data. The application interacts with the Esri mapping software, both as a web service to request data out of their database for the search feature, and to render maps when requested, and destroy them when no longer needed. The search feature takes advantage of the HTML5 geolocation API, which makes it easy for users on-the-go to find properties and cases near their physical location. The search results are often long, and we didn't use a separate view/page for each search result, but instead used an expand/collapse interaction to show each search result's detail. Since we are limited with space using a mobile device, we needed a way to contextually communicate which search result was being used, so we opted for a sticky header. We created an Angular directive called "stickylist" to make search results "stick" when expanded during scrolling.