Building a JavaScript Web app to geocode our customer database

August 6, 2014

Jonathan Nowlan

Esri Canada’s Associate Program provides opportunities for recent graduates of college GIS programs to work in Technical Support and other departments within the organization. This allows for customer interaction and in-depth learning of Esri technologies. Building a Web app with the JavaScript API was all part of the learning and GIS fun.

This post was contributed by guest blogger Adam Marinelli, Associate GIS Analyst, Product Service & Support, Esri Canada

I first heard about the Esri Canada Associate GIS Professional Program when the Manager of the National Training team and one of the previous year’s Associates came to my college to present the opportunity to the graduating class. The Program is designed to hire students who complete a graduate certificate in GIS from select colleges across the country and from my perspective, offered the ideal way to extend my classroom learning into a paid, full-time gig. Although the competition was fierce, I was pleased to learn of my acceptance to the Program’s sixth year cohort along with Brandon Strongman and Tyler Wilson. The Program has presented an incredible opportunity to learn a variety of different GIS and Esri technologies and apply them to the real world situations our customers are engaged in. The usual starting point for Associates is in Technical Support, where we build a good foundation of knowledge on ArcGIS for Desktop. This allows for great customer interaction, software troubleshooting and hands-on experience. Associates then undertake work terms with other teams within the company, including Training, Community Maps, Professional Services and other support departments.

With the abundance of customers starting to use ArcGIS Online and an increase in technical cases, this year, our mentors decided it would be fun and engaging to develop a new activity. They had Associates build ArcGIS Online-inspired Web applications to learn more about the technology and produce a creative, final output to share internally. Creativity was certainly a requirement as well as integrating a variety of online and Web mapping functionality.

After about a month of working on the project, we emerged with three unique Web mapping applications. My idea involved working with the wealth of information we maintain about the users of our software. During my work in Technical Support it became apparent that we keep a lot of data pertaining to customer locations (addresses), points of contact, incident tracking, and so on. I decided I would create a useable app for our Technical Support Analysts to query this database and map the locations of their current customers and support cases.

To begin my project I looked to the ArcGIS for Developers site for the JavaScript API. I downloaded the Geocode an address sample to serve as a starting point for geocoding our customer’s work addresses. The final application stripped most of this starting code and interface, but the logic to get an address, send it to the World Geocoding Service and return coordinates was a helpful starting point. I began to rely heavily on the samples and API reference to build and configure the application as I could not claim much experience using it. I added a handful of widgets (Location Button, Basemap Toggle, etc.) as well as the main accordion menu on the left of the map for handling the bulk of user input. This menu included a list of our current technical support analysts, support teams, date queries and the buttons to send the information out for geocoding.

The main accordion menu on the left of the map handles the bulk of user input. This menu includes a list of current technical support analysts, support teams, date queries and the buttons to send the information out for geocoding.

The second half of my project focused on the database that housed our customer data. I needed a way for my Web application to select customer postal codes based on a specific date frame, Technical Support team or individual Analyst. For this, I used an ASP.NET Web Service that was hosted on my local Internet Information Services (IIS) Web Server. This Web Service contained two methods: one that took no input and returned the list of current Technical Support Analysts and the other that required an Analyst’s username (or team) and returned a string of postal codes for their current cases.

These methods were called from the Web application to return the data from our database. Once I had it in my application I could work with the data to present information to the user. The list of Analysts in the accordion menu was populated dynamically in this way. If an analyst changed teams, this would be reflected automatically. When a user of the application queried by a date or Analyst name, the Web Method would be called, return a string of postal codes, and the World Geocoding Service would return a Lat/Long coordinate point for each address. The only thing that was left was to display the point marker symbol at the desired location and keep a numeric case total and dynamic legend.

Technical Support cases, by customer address, mapped in a JavaScript Web app.

Ultimately, the task to develop an ArcGIS Online application proved to be a useful and exciting project for us. Our Web applications were useful demos of the current technology that actually had practical applications. Specifically, I had the opportunity to learn about our Web Mapping API which would lead to my further interest in Web Mapping and Associate position on the Development Support team. As the use of ArcGIS Online becomes more prevalent with our customers, applications such as these will not only become easier to build, but incredibly functional for displaying, querying and creating new data (see the Web AppBuilder for ArcGIS).

The HTML, CSS and JavaScript pages of my project have been posted on GitHub for those interested in seeing how it was built or contributing to make it better (the underlying Web Service hosted on my machine was not made publically available). I certainly make no claims that it is written efficiently (I am not a highly trained developer!), but that was not the purpose of our exercise and I continue to make changes to the project to make it better.

My fellow Associates also came up with some interesting applications. Tyler’s idea was conceived during the December 2013 ice storm that affected the Greater Toronto Area. His idea incorporated geotagged tweets displayed using the Social Media Web Mapping Template from ArcGIS Online. Despite using fabricated data for his demo, his idea of mapping currently trending keywords is certainly a powerful use of geotagged information as integration with social media is a trending practice.

Tyler Wilson used the Social Media Web Mapping Template from ArcGIS Online to map currently trending keyword using geotagged tweets.

Brandon opted to use a story map to show the different routes visitors to the Toronto Zoo can take through the park. Each unique route was built using data from the Toronto Zoo and included point locations at each attraction with photos and descriptions of the animals. This story map served as a virtual tour of the zoo for those planning their visit. Brandon did some back-end configuration of the template to manipulate the look and feel of the story map and gained an understanding of how a template functions and is configured.