The Web Duel – ESRI Implementation

This is a continuation of Mark Balwanz’s blog posts on his creation of web mapping sites using both ESRI and Geoserver. Today he will talk about his experience creating the site using ESRI technology.

The ESRI Implementation

As I mentioned in the previous blog post, all of my educational and work experience has been with ESRI software, so I started the Web GIS Duel by creating the ESRI based system first. Below you will find a list of all the technology I used to create this first web mapping application.

ArcGIS for Desktop

ArcGIS for Server

ArcGIS API for JavaScript

Although I could have used ArcGIS Online for creating a web map or using one of their application templates (or WebApp Builder), I chose to use the stack listed above because it offered me more flexibility and would make for a better head to head comparison with the open source stack I will use later in this blog series.

ArcGIS Map Services

The first task I needed to complete was to create the map service that I would use within the web mapping application. I accomplished this task by adding all the data layers into ArcGIS for Desktop and styling them. I chose to just use a light gray outline for the Census Tracts as I did not want the user to focus in on them, but instead just wanted them to be barely visible and be utilized for the population search. Once I had the layers styled it was actually very easy to publish them to ArcGIS for Server. I connected to the ArcGIS Server (hosted by Salisbury University) and share my data as a map service. I could have allowed feature access and then loaded the data into the web mapping application as feature services, but decided to just use map services instead. As mentioned in my previous post, all of my background is with ESRI technology, so this task was something I had done many times in the past and I was able to complete this without any issues.

HTML Template

Now that I had my data available for consumption over the web, I had to start building my application’s user interface. I choose to build this from scratch rather than use any of the pre-built templates that ESRI offers (although I have done that in the past and they are quite handy) because I had a pretty good idea of what I wanted the end product to look like and thought it would be quicker than stripping out all of the ESRI based code from a template. I went with a fairly basic design that involved a header bar, a map, and a details window that would update with bank specific information as the user clicked on the map. I used standard HTML and CSS to build this portion of the project. After completing this step, I now had an HTML file that I could use for both the ESRI and the Open Source versions of my project. I probably spent more time than I needed trying to come up with a logo and color scheme for my application, but in the end I think the overall design turned out pretty cool.

ArcGIS API for Javascript

Once the HTML design was finalized, I was able to move onto the JavaScript portion of the build and that is where I focused in on the ArcGIS API for JavaScript. The first step I completed was to create the map that I would than add my map service to. I decided to use the light gray basemap provided by ESRI because it matched my blue / gray color scheme and I thought it would help the users to focus in on the bank locations and not the underlying basemap. The next step was to add my map service to the map and that was accomplished by using the API to add a dynamic map service layer. As mentioned earlier, I made a choice to use dynamic map services rather than feature layers. I do recognize though, that everything I am doing in this application could also be done with feature layers, although it might require a slightly different workflow.

Now that my map service was loaded into my application, I had to find a way for the user to get information about the US Bank location that they clicked on. Using the API, I was able to tie a “click” event to my map that would fire off a function and send an identify task request to the ArcGIS Server map service. Thanks to the samples provided by ESRI it was very easy to create the identify task and send the request. The only thing I had to tweak was the tolerance of the identify task spatial search, since I wanted a bank location to be found even if the user did not click exactly on the point. Identify tasks by default will search every layer within the map service, so I also had to make sure to limit the search to only the US Bank layer. The result of this first identify task was the basis of all the remaining code and will be referred to throughout the rest of this blog as the “selected location.” Using the attributes of the selected location I was able to update the details window to show the bank name and the address.

There it was, a working web mapping application that would update the details window whenever the user clicked on a US Bank location. That is an important thing to point out because due to my use of a “map” on click function I had to build logic that would only run when a US Bank feature was returned from the first ArcGIS Server identify request. If instead I had used a feature service, then I could have instead tied the click event to that feature layers features. Either way, I have a working application that was pretty quick and easy to develop.

Amazon Cloud Web Hosting

Now that I had the web mapping application working on my local computer, I wanted to find a way to allow others to view it as well. That is when I stumbled upon the Amazon AWS services and specifically the S3 service. I was able to upload my html file, along with the supporting image files, to the Amazon S3 bucket I created and after tweaking some settings I had a directory that allowed others to view my working web map. There are many tutorials online that explain how to do this, but basically you have to specify which file is the main index file (my html file) and then set a security policy that lets anyone from the internet connect to your “bucket.” I will be digging into Amazon AWS more during my next post in this series, since I actually used it to host and run a GeoServer instance.

I hope you enjoyed the information I shared in this post and feel free to post comments if you have any questions or would like more detailed information. During the last post in this blog series I will be sharing what I liked / disliked about both the ESRI technology stack I discussed today and the Open Source stack I will discuss in my next post. Thanks for reading!