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.
After populating the details window with the attributes of the selected location, I know had to find a way to create a buffer that could be used to find nearby US Bank locations and competitor locations. The API has a couple of options for creating buffers around points, including using the geometry service of the ArcGIS Server or creating it client side. I chose to create the buffer client side, as I found that easier to do and did not want to add another call to the server for something that could be accomplished client side. There are also a number of ways to do this client side, but I found using the “esri.circle” function the most straightforward. All I needed to do was supply the function with a center (geometry of the selected location), a distance, and then choose a unit of measurement.
Now that I had a polygon that represented the five mile buffer around the selected location, I was able to create and send another identify task to the ArcGIS Server and return all the features that intersected that polygon. The resulting feature set that was returned by the ArcGIS Server contained all the US Bank locations, competitor (TCF and Wells Fargo) locations, and census tracts within five miles. Some of you might be thinking this already, but I do want to point out that the identify task uses a spatial “intersect” which means that census tracts that intersect, but that are not completely within the buffer would also be returned. I was okay with this because the project was more to compare my experiences building with ESRI and Open Source, than it was to develop a high quality analysis tool. If I had more time, I would probably use a smaller census unit such as census blocks and maybe even calculate how much of each polygon was within the buffer and adjust the population number to match. That still would not be perfect, but would give you a more accurate number.
Now that I had an identify task response that contained every feature within five miles, I just had to parse the response and update the details window. To accomplish this I first had to loop through the entire returned feature set and separate the features into three arrays (US Bank, Competitors, Census Tracts) based on the layer they were in. Once I had the three separate arrays I just had to use the length attribute of each array to get the count of nearby features. The “Nearby US Bank Locations” element used the length of the US Bank array minus one to account for the location that was actually clicked on. The “Nearby Competitor Locations” element used the length of the competitors array. Finally, I had to build a JavaScript function that looped through the census tracts array and calculated a total population within the five mile buffer. The function basically went one by one through the array and grabbed the attribute within the population field of each feature and added them all together. Since this function was plain JavaScript, and did not utilize the ArcGIS API, I will be able to re-use it within the open source version of the project. Once I had the total population, all I had to do is update the HTML element with that number.
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!