In this course, we'll be spending the bulk of our time learning how GIS web applications can be built using a mapping Application Programming Interface (API) created by Esri in combination with the core web development technologies of HTML, CSS, and JavaScript. However, before digging into those programming languages and that API, it's worth noting that Esri also provides non-programming tools for creating mapping apps. These tools don't provide the same level of control over the final product as one developed using code written on top of the API, but they might meet some of your app development needs. And as we'll see later in the course, a smart workflow is to use tools in ArcGIS Online to handle certain parts of the app development (layer symbology, popup window content, etc.) and develop the rest of the app through coding.
At the successful completion of this lesson, you should be able to:
Conversation and comments in this course will take place within the course discussion forums. If you have any questions now or at any point during this week, please feel free to post them to the Lesson 1 Discussion Forum. (That forum can be accessed at any time by clicking on the Discussions tab.)
Lesson 1 is one week in length. (See the Calendar in Canvas for specific due dates.) To finish this lesson, you must complete the activities listed below. You may find it useful to print this page out first so that you can follow along with the directions.
Step | Activity | Access/Directions |
---|---|---|
1 | Work through Lesson 1. | Lesson 1 |
2 | Create a mapping app of your own choosing using Esri's Web AppBuilder or one of their configurable templates. | Post a link to your app in the Lesson 1 Discussion Forum. |
3 | Review another web mapping platform. | Post a link to your video review in the Lesson 1 Discussion Forum. |
4 | Take the Lesson 1 Quiz after you read the course content. | Click on "Lesson 1 Quiz" to begin the quiz. |
Several GIS technology vendors provide the means for non-programmers to create web maps without writing any code (e.g., Google's My Maps, CartoDB, ArcGIS Online), and the capabilities of these map authoring applications are increasing constantly. In this part of the lesson, we will explore Esri's ArcGIS Online (which I'll abbreviate as AGO hereafter).
Figure 1.4 Displaying interstates by type
Figure 1.6 Making the pop-ups more user-friendly
Following a similar process, make similar improvements to other fields as appropriate.
Figure 1.7 Changing the basemap
In this section, we've been able to build a useful interactive web map without any programming. Move on to the next page to see how to take your ArcGIS Online map further -- still without programming -- by embedding it within a web page and using it as the basis for a web application.
Note: This page walks through creation of the same web map as the previous page, just with the "Classic" version of the ArcGIS Online Map Viewer. You're welcome to skip over this page if you've already completed the Jen and Barry's web map on the previous page.
Several GIS technology vendors provide the means for non-programmers to create web maps without writing any code (e.g., Google's My Maps, CartoDB, ArcGIS Online), and the capabilities of these map authoring applications are increasing constantly. In this part of the lesson, we will explore Esri's ArcGIS Online.
In this section, we've been able to build a useful interactive web map without any programming. Move on to the next page to see how to take your ArcGIS Online map further -- still without programming -- by embedding it within a web page and using it as the basis for a web application.
The map created earlier in the lesson offers interactivity in the form of zooming in/out, toggling layers on/off, accessing information about map features by clicking on them, changing the base map, etc. This part of the lesson will begin by showing you how to embed your map within a separate web page. After that, we'll look at tools developed by Esri that make it possible to incorporate even more interactivity -- to turn your map into an app.
While it's sometimes preferable to share the link to your map -- allowing it to fill the viewer's browser window -- it can also be useful to embed the map within a web page.
The interactivity offered by this map is nice, but you may find yourself in situations where you need to go further. For example, maybe you want end users to be able to query the map's underlying data for features meeting certain criteria or to be able to edit the underlying data. Esri offers a couple of different non-programming options for those looking to build apps with greater functionality. The first of these is a set of templates that each meet a narrowly focused need (e.g., Basic, Nearby, Sidebar). As the app developer, you select the desired template and make a relatively small number of configurations to tailor the app to your needs. The second option is to use Web AppBuilder. This option is more open-ended, allowing you to build a less narrowly focused app by picking and choosing from a set of widgets.
We'll start with configurable app templates and to demonstrate their use we'll create an app for locating buildings on the Penn State Main Campus.
As with the Map Viewer, Esri has an older set of configurable app templates and a newer one (which they've branded as Instant Apps). In this walkthrough, I'd like to show you how to include a logo and an opening splash screen in your app. It turns out that building such features into an Instant App is more difficult to do. A logo can only come from an organization-level shared theme setting and I don't see a splash screen option (though some Instant Apps templates offer a Details panel that can serve a similar purpose). So in this section, you'll be led through creating an app with an older template (with the logo and splash screen) and in the next section you'll see how a similar app can be built with one of the newer Instant Apps templates.
Remember that there are many configurable app templates available to you as an app developer. Often there are multiple templates that can serve as logical starting points, and depending on the widgets employed by the template, you'll see different customization options.
Now let's see how a similar app can be built using one of the newer Instant Apps templates. (You can skip steps 1-5 if you already created and saved a PSU Buildings web map in the previous section.)
Now that you've seen how to quickly put together an app using a couple of different configurable templates, let's have a look at an option that provides a bit more flexibility.
Now let's try one of Esri's more open-ended options for creating apps, the Web AppBuilder.
As we saw with the Map Viewer and configurable app templates, there is also a newer technology for building apps from scratch -- Experience Builder. Let's walk through creating a similar app on that platform.
With that, you've built a few apps that could be implemented in real-world scenarios using both newer and older Esri technologies. Best of all, you didn't have to write a line of code. One thing I hope you'll take away from this exercise is to remember that these no-coding tools exist and to look for opportunities to take advantage of them.
Move on to the next page of the lesson to solidify what you've learned here with an assignment that requires you to build another app using data and requirements of your own choosing.
This lesson's graded assignment is in two parts. Here are some instructions for completing the assignment.
First, I'd like you to build a web mapping app with Esri technology (using either a configurable template, Instant App, the Web AppBuilder, or the Experience Builder). You are welcome to select the app's subject matter (perhaps something from your work) and the functionality it provides. If you're unsure of what to map, you might try searching ArcGIS Online, where there is a wealth of data.
Details matter! Make sure your app looks professional by modifying anything that looks unfinished. Text a user sees, whether in a widget, popup, or elsewhere should be human-readable (or have good aliases) and not look like a default or coded name. Also choose appropriate symbology and consider hiding unneeded fields.
You will have another opportunity to select your own final project at the end of the term. Keep that in mind when selecting data and/or functionality to incorporate into this project.
There are other web mapping platforms that offer features similar to ArcGIS Online (e.g., CARTO [14], MapBox [15], SimpleMappr [16], MangoMap [17], MapHub [18], and MapLine [19]). For the second part of this week's assignment, I'd like you to experiment with one of these platforms, then share your thoughts on it in a recorded video. Here are some detailed instructions:
This project is one week in length. Please refer to the Canvas course Calendar for the due date.
With that, you've finished working through the content on developing geospatial apps without programming. For some of you, especially those who work in an organization with an ArcGIS Online account, what you've learned in this lesson will sufficiently meet your app development needs. However, if you find that the available widgets can't quite be added together to form the app you want, you'll need to learn about web programming technologies. In the next lesson, you'll learn about HTML and CSS, languages that are used to define the content and presentation style of web pages. With that foundation laid, you'll be ready to spend the rest of the course learning about Esri's JavaScript-based Application Programming Interface (API), which provides developers a finer level of control over their apps than is possible with their non-programming options.
IMPORTANT: Beginning in Lesson 2, you'll be expected to post some of your assignments to a web server. If you haven't already done so, please have a look at the page on e-Portfolios [20]. In particular, the application for web space from PSU can take a business day or two, so you should get this taken care of in advance of having to post your Lesson 2 assignment.
Links
[1] http://pennstate.maps.arcgis.com/
[2] https://www.e-education.psu.edu/geog863/sites/www.e-education.psu.edu.geog863/files//jb_data.zip
[3] https://www.e-education.psu.edu/geog863/sites/www.e-education.psu.edu.geog863/files/lesson1_embed.html
[4] http://pennstate.maps.arcgis.com
[5] http://pennstate.maps.arcgis.com/apps/Embed
[6] https://mapservices.pasda.psu.edu/server/rest/services/pasda/PSU_Campus/MapServer/1
[7] https://www.e-education.psu.edu/geog863/sites/www.e-education.psu.edu.geog863/files/psu-facebook-avatar-180x180.jpg
[8] http://www.psu.edu
[9] http://doc.arcgis.com/en/web-appbuilder/create-apps/widget-overview.htm
[10] http://www.e-education.psu.edu/geog863/sites/www.e-education.psu.edu.geog863/files/PSU_UPO_RGB_2C.png
[11] https://doc.arcgis.com/en/experience-builder/configure-widgets/sidebar-widget.htm
[12] https://support.esri.com/en/bugs/nimbus/QlVHLTAwMDE0MDg0Ng==
[13] https://www.psu.edu
[14] https://carto.com/builder/
[15] https://www.mapbox.com/mapbox-studio/
[16] http://www.simplemappr.net
[17] https://mangomap.com/
[18] https://maphub.net/
[19] https://mapline.com/
[20] https://www.e-education.psu.edu/geog863/node/2062