GEOG 677 FINAL PROJECT: PRACTICAL USES OF ONLINE MAPPING APPLICATIONS

Transcription

1 GEOG 677 FINAL PROJECT: PRACTICAL USES OF ONLINE MAPPING APPLICATIONS ArcGIS App Builder vs. ArcGIS JS API vs. Google Maps API Cynthia Hartley 2/22/2015 University of Maryland: MPS in GIS GEOG 677: Internet GIS

2 Motivation In my work I communicate spatial information in multiple formats ranging from written reports, grant applications, posters at GIS day, presentations and websites. Online maps should be a part of this lineup, but with no background in web programming it has always been a challenge. This was part of the decision to pursue a graduate level GIS degree at the University of Maryland. So I used the Geog677 final project to apply the course material to two of my current projects. I compared ArcGIS Application Builder to ArcGIS JavaScript API on one project in a head to head comparison using the same map service. On a second project I created an online map using Google Maps API. I compare and contrast all of the platforms for utility and best use. Project Topic- Practical Uses of Online Mapping Applications ArcGIS Application Builder vs. ArcGIS API: The 2013 Guide to the Ventura River Parkway trail map was published in paper format. It was created by Friends of the Ventura River with support from a National Park Service Rivers, Trails & Conservation Assistance Program grant award. A working group was formed to complete this project and I was part of the team as a GIS specialist. I created GIS layers of all the Parkway features identified by the working group and these were incorporated into the final hard copy map. However there is no web version of this map other than a pdf download. The working group wants to create an online version. In preliminary tests, using several GEOG 677 assignments, I tested a subset of the layers in all the platforms presented to decide the best approach for this project. I decided to explore both the ArcGIS application builder and JavaScript API. Google Maps API: This platform wasn t practical for something as complex as the Parkway online trail map; however, I still wanted to explore its use. I had a project requiring a webpage advertising a beach cleanup in an area where endangered shorebirds nest. I created an interactive web map that shows the actual locations of nests from past years to incorporate with the beach cleanup webpage. Platform Selection: I wanted to embed all of these maps into webpages with additional content. Each of these projects have significant non-spatial information so a standalone map is not sufficient. Google Maps and ArcGIS API maps can readily be embedded, and ArcGIS app builder provides an embedding link. This is the primary reason I selected these platforms. The icons available with Google API are not attractive or conducive to complex symbology. Since I already had it set up in an ArcMap project I needed something that could make use of this work. This eliminated it from use in the Parkway Map, but I like the flexibility of the platform and felt it was a good option for the simpler nest map. The platforms I rejected where Silverlight and Flex. I liked the looks of the Silverlight maps and how they could be customized, but decided to stick with the other platforms. I thought Flex tools offered less options. A big reason not to go with 1

3 Flex or Silverlight if there is a choice is that the API and viewers are being deprecated and ESRI is encouraging the exploration of web solutions based on JavaScript or HTML5. Decision process for selecting platform for comparisons Platform Embed in webpage? Tools Options Use Google API yes many "Guide to the Ventura River Parkway" trail map ArcGIS JS API easiest many "Guide to the Ventura River Parkway" trail map ArcGIS AppBuilder yes restrictive nest map for beach cleanup Flex possible several no Silverlight possible best of app builders no platform selected for final project Background Information Guide to the Ventura River Parkway: ArcGIS AppBuilder/Viewer This concept is part of a national movement to reconnect people with rivers. The Ventura River is a rare phenomenon in southern California because it is still largely natural, however many area residents have never even visited the river. The mission of the Friends of the Ventura River is to preserve adjacent land and create an interconnected trail system the length of the river. The first step is to raise awareness of existing access opportunities and to this end the 2013 map was created. The map features already existing trails and points of interest along the river in the hopes of attracting local residents to explore the river, and then by raising awareness create support for further land protection. Ten thousand copies have been printed and distributed at local recreational outlets and conservation groups. The map has been very well received by the local community, but the team really wanted to expand it to a new medium. Nest Map/Beach Cleanup Webpage: Google Map API I am a principle investigator with the Ventura Audubon Endangered Shorebird Recovery program and we are leading a pre-season beach cleanup on a beach where endangered shorebirds will be nesting soon. We are removing trash so the beach is clean before nesting season starts. I wanted to create a webpage that not only gave information about the cleanup, but showed nest locations from past years to attract volunteers by demonstrating that our beach cleanup directly benefits the breeding areas. Importance Guide to the Ventura River Parkway: ArcGIS AppBuilder/Viewer While the hardcopy map has been successful, a better approach would be to create an online interactive version. The printed version has done well; however, it is approaching market 2

4 saturation. An online map would be a way to reach a bigger audience. The Friends of the Ventura River has a website and an online map could be added as a new webpage component. Nest Map/Beach Cleanup Webpage: Google Map API Beach cleanups are an effective opportunity to educate volunteers about recycling and reducing plastic use; however this beach cleanup approach adds a new dimension. In this case, we are removing trash that attracts nest predators, and helping to improve nesting success of endangered birds. To the casual observer it s hard to understand from an empty quiet beach that it s an important nesting area because the birds aren t present yet. Furthermore, even if birds are there and nesting, they are difficult to find. I felt a visually attractive and user friendly web map would be a powerful communication tool to get this point across and not only attract more volunteers, but empower those who want to help endangered species. Target Audience Guide to the Ventura River Parkway: ArcGIS AppBuilder/Viewer Users will include people local to the Ventura County area and tourists. We anticipate that this application will be used by recreational hikers or cyclists looking for opportunities to explore the Ventura River. Undoubtedly there will be users who access the map from mobile devices. It is likely there will be people who are in the process of using the trail who will be looking for information online on their phones, so it is important to make the map mobile compatible. Nest Map/Beach Cleanup Webpage: Google Map API The site with the map has already been shared in advertisements for the beach cleanup which is on Feb 28, 2015, a week after winter GEOG677 is over. It went out to the general public in both Surfrider Foundation and Audubon Society newsletters, as well as many other local conservation groups websites and newsletters and it was advertised by the Surfrider club at the local CA State University campus. It has also been published in the newspaper in the event section and printed on posters and handouts. So the audience is a wide cross section of the entire community and will include young to old and an entire range of technological savvy. Most in the audience have probably heard about this beach, but many have never have visited it. Few know about the endangered birds. We needed to communicate all the details of the cleanup, directions and show nest locations on the beach, in a clear user-friendly way. 3

5 Existing Data Guide to the Ventura River Parkway: ArcGIS AppBuilder/Viewer The printed map is a 3 X1 fold out map (appendix 1) and is what I am duplicating in an online map. The Ventura River Parkway is divided into upper and lower river sections, with the two parts printed on either side of the fold out. For this project, I focused on the lower river portion. If this is successful and the Friends of the Ventura River chooses to incorporate the internet map in their website, the upper river can be completed using the methods worked out for the lower river. My role on the Ventura Parkway working group was to create GIS layers for all of the features of the Ventura River Parkway that the group could identify. So I have most of the map features in an assortment of shapefiles. Link to online map pdf: Nest Map/Beach Cleanup Webpage: Google Map API We have many years of nesting data in the form of shapefiles created form GPS waypoints representing actual nest locations. Showing all twelve years of nest locations would be too great for an online map, so, I limited it to just three recent years. There are two species of endangered birds, the western snowy plover and the California least tern. There are fences around the breeding areas that were marked with GPS tracks and converted into shapefile format. Methodology Guide to the Ventura River Parkway: ArcGIS AppBuilder/Viewer Because I used the ArcGIS application builder and the ArcGIS API in a head to head comparison, I used the same map service for both. I also created a webpage that I intended to use in unchanged format for both with the two different maps inserted at the bottom. In the end this didn t work out, see Mobile Compatibility below. Map Service: Linking map icons to detailed information was called out as extremely important by the working group. In order to be able to create pop-up windows, I added a field with general information about each feature. I also created a file of jpeg images, uploaded it to Terpconnect and re-formatted the shapefiles to include these URLs as well as a field with external links for more info, all for linking to icon pop-ups later. These same shapefile fields can be used to create popup windows with both the AppBuilder and the API JavaScript. (Fig. 1 below): Figure 1 Shapefile fields added to create pop-up windows 4

6 The shapefile was uploaded to the UMD ESRI server as a tiled service. Before uploading I modified the symbology so it didn t display at large scale (>1:200,000 all features, >100,000 for map icons). Webpage template for both maps: Because there is a lot of information on the hard copy map, I wanted to make all of the same information available on the online map. Some of this information could not be incorporated into the online map. Therefore I created a webpage with an introduction and drop down text boxes (using JavaScript) with space at the bottom that either map could be inserted into. This whole webpage can later be incorporated as a standalone page in the Friends of the Ventura River website. Mobile compatibility: This was called out as a requirement by the working group. So the webpage was designed to be mobile compatible using the Skelton template. This worked well for the ArcGIS app map, but there were problems with the ArcGIS API. There were numerous styling conflicts with the esri.css templates and the skelton.css stylesheet. I ended up not using the skeleton.css sheet for the ArcGIS API map. I created a special css file for the webpage that used the ArcGIS JS map and designed this webpage with fixed widths on the map divs. As a result, this page has slightly different styling look, but more critical it is not mobile compatible. Results Platform ArcGIS AppBuilder ArcGIS JS API Google Map API Online map/webpage link e/finalproject/arcgis_app_map.html e/finalproject/arcgis_js.html e/finalproject/beachcleanup_nestmap.html 5

7 ArcGIS AppBuilder vs. ArcGIS API JS: Webpage Features Webpages overall look: 6

8 General website components, other than minor styling differences, are the same: One important difference, the webpage using the ArcGIS API map is not mobile compatible: 7

9 ArcGIS AppBuilder vs. ArcGIS API JS: Map Features Legends: The Javascript legend could be customized, so I was able to get it to look more like the hardcopy map. The AppBuilder legend can t be altered, so it had to remain as the default. 8

10 The problem with the ArcGIS JS API legend was that the skeleton styling sheet conflicted with the styling. I ended up creating a different styling sheet for the API JS map in order to make the legend work. I also ran into styling conflicts with the way the map displayed. Ultimately my solution was to dispense with skeleton and not have the API JS map mobile compatible: Basemap Toggle: Both maps had the same basemap toggle options: 9

11 Parkway features are symbolized and display labels at different scales. Both maps import the same map service as a tiled map service layer: 10

12 ArcGIS App Builder more features I was able to add several features to the App Builder map that could also be added to the JS map as digits, but due to time constraints I was just able to try them out on the App Builder map. The most important feature was the ability to link map features to pop-up windows. All of the icons, trails and river polygons are linked to windows with additions info, photos and links: There were several features easily added in the map viewer before exporting the map from ArcGIS Online: link to a larger map, scale bar, search window and a home button: 11

13 Google Maps API: Webpage Features Webpage overall look: 12

14 KML layers created from ArcMAP shapefiles can be toggled off and on Mobile Compatible: 13

15 Clicking on nest icons displays the year of the nest: Custom marker indicating location of beach cleanup start. Mouse-over shows description. 14

16 Basemap toggle option, default is imagery with option to switch to google map: 15

17 Conclusions: ArcGIS Application Builder: Pros: 1. Professional ESRI look, intuitive map good for general users 2. As long as icons aren t 3-D, it s possible to use the same symbology created in an ArcMap project. This means complex symbology can be used. Data can be linked in the shapefile. 3. Easy to setup and to embed in a website, no conflicts with website styling so this was the easiest to integrate into an existing webpage already styled with a skeleton boilerplate. 4. Popup windows, which were important to my Parkway Map project, were easy to create once the shapefile had been setup correctly. Cons: 1. Can t customize tools, e.g. legend look is static. It isn t possible to change fonts, position, background, size etc. 2. Limited to just the tools offered in the Map Viewer. This is very restrictive. 3. I wanted to have a way that users could move the map to a pre-selected area in case they don t know where Big Rock Preserve is located and want to know. There is no bookmark option. I included a search tool, but this only works for places that are geo-coded. If you search on Big Rock Preserve the search engine can t doesn t find it. ArcGIS API JavaScript: Pros: 1. Big selection of tools 2. Tool format is customizable 3. Like the App Builder, look is professional and as long as icons aren t 3-D, it s possible to use the same symbology created in an ArcMap project and incorporate information from shapefile fields. 4. The sandbox feature that ESRI makes available for testing and exploring code is very helpful Cons: 1. Difficulty with formatting using skeleton. The ESRI css formatting added a level of complexity. It s probably possible to get them to work together and retain mobile compatibility, but it will take a lot of time to carefully go through the formatting and sort out. Alternatively it is probably possible to make it work with a different mobile styling formats. 2. The more digits that are added the more complex it is to combine tools and formatting. Each one comes automatically with ESRI css formatting. 3. ESRI Developer s website is difficult to use. Hard to figure out which digits to use, especially if there are several that are similar. Using their site it is more difficult to follow JavaScript logic compared to the Google site. Also, there is poor flow between the code 16

18 samples and digit description pages. For example, in order to create pop-up windows on the map icons, each layer needs to be imported as a FeatureLayer. The legend digit can be created with either a tiled (or dynamic) map service or individual feature layers. I imported my data as a tiled map service because that was the digit sample code I followed. But then later I was unable to create the pop-ups for the icons. My only option was to start from the beginning and bring in the data using FeatureLayers and start over on the legend digit. The sample code and JavaScript code documentation nor the digit documentation never addressed this. I never found documentation explaining the utility of the different ways of importing map services and their components. I eventually figured this out, but after much trial an error and when it was too late to change. Google s developer site is superior in this regard. Google Map API Pros: 1. Worked easily with the skeleton boilerplate, less complex formatting than the ArcGIS API Javascript. 2. A large number of widgets are available 3. Google developer s website is user friendly. Very good code documentation, makes it easy to follow the JavaScript logic. Cons: 1. Icons are clunky, not very professional looking. Limited choice of colors and styles. 2. Not very compatible with an ArcGIS map service. It s possible to create a mash-up, but other than displaying a map service there isn t a lot of tool options. Not possible to create a legend or popup icons. This is more compatible with kml layers. Next Steps I think the way forward is to spend more time with ArcGIS JavaScript API. If the mobile compatibility issue can be resolved that would make this method usable. The greater selection of digits and the ability to customize the style make it a better option. For this project I brought the map service in as a tiled service. To create icon pop-ups, each individual layer needs to be brought in as a FeatureLayer. Once this is done the ArcGIS AppBuilder is a nice option, but I think it s better for simpler projects than the Parkway Map Guide. I like Google Maps API, it s simpler, but because so much of my work is in ArcMap what I can do with Google is limited. 17

19 Appendix I. pdf of the Guide to the Ventura River Parkway, hardcopy map 18