PGATLAS

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.

Project Details

Date: Apr 15, 2014

Client: The Maryland-National Capital Park and Planning Commission

Website: http://www.pgatlas.com/mobile/

Related Works

Eleat

Eleat

CDC NPIN

CDC NPIN

Callr

Callr

About

BLEN Corp is a small, minority, and veteran-owned information technology firm located in Washington D.C. Since 2004, we have been ahead of the curve in early adaption and implementation of cutting edge technologies including web and mobile development, service-oriented architecture, and other innovative web based solutions. Look at some of our projects.

Social Links

Our Bunker

WeWork Wonder Bread Factory
641 S St. NW
3rd Floor
Washington, DC 20001
United States.