Building a Web Map

Several technology vendors provide the means for nonprogrammers to create web maps without writing any code, and the capabilities of these map authoring applications are increasing constantly. In this part of the lesson, we will explore Google's My Maps and Esri's ArcGIS Online.

Google's My Maps

Google has come full circle with My Maps.  Several years ago, they developed an online app called My Maps that allowed users to manually digitize their own point, line and polygon overlays on top of Google's basemaps.  These custom maps were stored on Google's servers and could be shared easily.  Around this same time, Esri came out with their ArcGIS Online platform, a step up from what was offered by My Maps in its ability to mash up layers published through map services, to import shapefile and tabular data, and to incorporate geoprocessing capabilities.  Google responded with an analogous product called Google Maps Engine and at the same time rebranded their My Maps app as Maps Engine Lite.  Fast forward to 2015, when Google announced that it would be discontinuing support for Maps Engine -- apparently ceding the online GIS platform market to Esri.  Support for Maps Engine Lite continues, though part of the strategic rebranding was to change the name back to My Maps.

As you'll see in a moment, today's My Maps offers users greater data input capabilities than it did in its original incarnation.  It provides a good web mapping option in situations where more fully-featured platforms would be overkill.

1. Navigate to Google My Maps.
2. On the opening splash screen, click Create a new map.  You will need to log in to a Google account at this point if you haven't already.
   
   You should see a blank map appear overlain by a small panel in the upper left. This panel shows that you begin with a new blank layer (called "Untitled layer").
   
   Your goal in the next few steps will be to create a map showing the places you've lived during your life. (If you have any qualms about sharing this information, you're welcome to create a different map, such as favorite vacation places, instead.)
3. Open Microsoft Excel. If you don't have Excel, you can instead use a plain text editor such as Notepad and enter values separated by commas.
4. Add the following column headers in the first row: Timespan, Length, Location
5. Fill in the spreadsheet with the Timespan value being the years you lived in the place (e.g., 1990-1992), Length being the number of years you lived there and Location being the town (e.g., Miami, FL).
6. Save your spreadsheet (or text file with a .csv extension).
7. Return to Google My Maps in your web browser and click on the Import button beneath the Untitled layer heading.
8. Click and drag your spreadsheet into the dashed box (e.g., if you have Windows Explorer opened to the spreadsheet's location) or click Select a file from your computer and browse to it.
   
   After the app scans your spreadsheet, you'll be prompted to specify the column(s) that should be used to position your placemarks.
9. Check the Location column and click Continue.
   
   My Maps will pass the values in the Location column to a geocoder, which will determine the coordinates of the points you're adding to the map. Note that we could have also uploaded a file containing actual latitude/longitude values. In that scenario, you'd have one column labeled "X" or "Lon" and another labeled "Y" or "Lat."
   
   You're next asked to specify a column that will be used to title your markers.
10. Check the Timespan column and click Finish.
    
    After the app processes all of your uploaded data, you should see all of the locations added to the map with a red teardrop-shaped symbol. You should also see that the panel in the upper left lists each marker by its Timespan value. Finally, note that the layer has taken on the name of your spreadsheet.
    
    Let's change the layer's name to something user friendly, like "Towns."
11. Click on the layer's name, enter the new name, and click Save.
12. Hovering your mouse over the first marker in the panel, you should see a paint bucket icon. Click on that icon to change the symbology of that marker.
    
    Note: In the symbology dialog, you can change the marker's color and its icon. Available icons include basic shapes like circle, square, diamond and star, and more elaborate shapes (found by clicking More icons).
13. Click on the Individual styles link beneath your layer. Your layer is currently set up so that you can style each marker individually. Note the other styling options:
    
    Uniform style - all markers are given the same symbology,
    Sequence of color and letters - each marker gets its own color and letter, and
    Style by data column - markers can be symbolized based on ranges (for numeric columns) or categories (for text columns).
14. The Sequence of color and letters option is not a bad choice for a map like this, so select that option.
15. Click on Set Labels beneath your layer, and change the map from having No labels to labels based on the Length column.  Close the dialog after setting the label column.
16. At the bottom of the panel, you should see a Base map layer. Click on the drop-down arrow to the right of the Base map layer, and note the various base map styles that are available. A light base map can be preferable for many mashups like this one as it allows the data you want the viewer to focus on to stand out.  Close the dialog after selecting your basemap.
17. Click on the title (Untitled map), enter something appropriate, such as Where I've lived (your name), and click Save.
18. Click on the Share link (near the top of the panel). In the Who has access section of the dialog, you should see that the map is Private and that you are the owner.
19. Click the Change link and on the next dialog, set the map's visibility to either Public on the web or Anyone with the link, whichever you prefer. (The main difference between the two is that the Public option makes the map discoverable by search engines.)
20. Click Save to commit your visibility selection.
21. Note that the URL of your map can be found at the top of the Sharing settings dialog. You'll need to provide a link to the map later as part of the lesson deliverables. Here is where the course author has lived.
22. To confirm that others will be able to see your map, try opening the URL in another browser (e.g., use Chrome if you're currently working in Firefox, or vice versa).

With that, you've produced your first web map of the class! Before moving on to ArcGIS Online, here are a few miscellaneous notes about My Maps:

• It's possible to view/edit the data associated with a layer by clicking on the three vertical dots to the right of the layer and selecting Open data table.
• You can have up to 3 layers per map.
• It is possible to manually digitize points, lines, or polygons using the tools just to the right of the main panel.
• Lines and polygons can only be added to a map using the digitizing tools.
• Spreadsheet uploads are limited to 2000 rows each.

ArcGIS Online

As with Google's My Maps, Esri's ArcGIS Online allows users to build a multi-layer map without the need for programming.

1. Go to the Penn State GIS home page at ArcGIS Online and sign in.  (You should have received an invitation to join the "Penn State Online Geospatial Education" group through your Penn State e-mail.  Or you may have already had an account established as part of one of our other courses.)
2. Click on Map to begin work on a new map.  If this opens some other map you've worked on previously, select New Map > Create New Map to start with a clean slate.
   
   If you completed GEOG 483, your first hands-on GIS project involved helping "Jen and Barry" find the best place to open an ice cream shop in a parallel universe where the cities and counties of Pennsylvania have different names. We're going to work with the data from that scenario again here (and later in the course), since it contains examples of each geometry type and some good attribute data for demonstration purposes.
3. Download the Jen and Barry's data.  (Even if you still have these shapefiles from an earlier course, you may want to download this copy since the shapefiles are zipped and ready for uploading to ArcGIS Online.)
   
   This zip file contains a point shapefile (cities), a line shapefile (interstates) and two polygon shapefiles (recareas and counties). You can check out these shapefiles if you haven't encountered this scenario before, but hang on to the zip files since we'll be uploading them to ArcGIS Online.
4. In ArcGIS Online, click the Add menu, then select Add Layer from File.
   
   As explained in the dialog, this option enables you to upload zipped shapefiles, delimited text files, and GPX (GPS interchange) files.
5. Click the Browse button, then navigate to your copy of the Jen and Barry's cities zip file.
6. Accept the default Generalize features option.
   
   We're importing these data purely for display purposes, so it makes sense to take advantage of the improved drawing speed that generalization provides. If we were conducting analysis that relied on highly accurate feature geometries, we would select the Keep original features option instead.
7. Click Import Layer to complete the upload process.
   
   ArcGIS Online will automatically get you started symbolizing your data by providing a two-step dialog for styling the cities layer.  The first step involves selecting an attribute to show, while the second presents drawing style options based on the selection made in the first step.
   
   By default, the layer is shown as graduated symbols based on the POPULATION column using the "Counts and Amounts (Size)" option.  Note that symbolizing the cities with a color ramp would be done using the "Counts and Amounts (Color)" option.  Let's change the display of the cities so that they are all drawn with the same symbol.
8. Under Choose an attribute to show, select Show location only.  
9. Under Select a drawing style, select OPTIONS. 
   
   We'll change the symbol used for the cities in a moment, but first notice that it is possible to set the transparency and the scale range at which the layer is visible on this panel. 
10. Click Symbols and select any icon that grabs you. Note that there are a number of icon categories, that it is possible to customize the icon's size, and that you can also use your own image as the icon.
11. Click OK to dismiss the symbology options and DONE to finish modifying the cities layer.  You should see the cities layer listed under the Content heading of the Details panel.
12. Note the buttons that appear beneath the layer name, allowing you to see the layer's legend, open its attribute table, change the layer's style, perform analysis, and access a host of other miscellaneous options.
13. Return to the Add Layer from File dialog and add the interstates shapefile as a layer.  Again, ArcGIS Online will immediately launch into styling the new layer.
14. Choose TYPE as the attribute to show and note that ArcGIS Online intelligently applies the Unique symbols drawing style (based on the field holding text strings rather than numbers).
15. Click OPTIONS.  You should see a separate symbol for each of the two unique values in the TYPE field: State Route and Interstate.
16. Modify the two symbols to your liking. (A thicker line is intuitive for the Interstate features.)
17. Again, click OK and DONE to return to the Details panel when you're finished symbolizing the interstates layer.
18. Following the same sort of procedure, set the symbology of the counties layer so that the county features are drawn using a hollow fill.  (Under the color palette is an empty square with a red line through it, which is used to specify "No color.")
    
    Next, let's explore the pop-up windows that appear when the user clicks on a map feature.
19. Click on one of the cities features to bring up a pop-up window.
    
    Because the cities features overlap counties features, the pop-up results will include features from both layers. You should see text at the top of the window like "1 of 2" or "1 of 3" indicating this.
20. Click on the right arrow to cycle through the pop-up results and note that the matching feature is highlighted on the map.
    
    There are a number of improvements that could be made to the information displayed in this pop-up.
21. Click on More Options (3 dots) next to the cities layer and select Configure Pop-ups.
    
    Values from columns in the layer's attribute table are displayed in the pop-up by enclosing the column within braces. Thus, the Pop-up Title is set to display the value from the layer's NAME column using the expression {NAME}.
22. Click on the Configure Attributes link just below the list of fields.
23. Uncheck the checkboxes next to the FID, ID, X and Y fields to exclude those values from the pop-up content.
24. Click on the TOTAL_CRIM field alias and give it a new alias that makes the pop-up more human friendly. Do the same for CRIME_INDE.
    
    The POPULATION, TOTAL_CRIM and UNIVERSITY values display with two digits after the decimal point, but that is meaningless for those fields.
25. Click on the {POPULATION} field, then change the Format option from 2 decimal places to 0 decimal places. Do the same for {TOTAL_CRIM} and {UNIVERSITY}.
26. Click OK to dismiss the Configure Attributes dialog, then OK again to save your pop-up changes.
    
    Test your changes by clicking once again on a cities feature.
    
    Note that it is also possible to customize pop-ups further (e.g., to string together values from multiple columns) or to display media such as images and charts.
    
    As with Google's My Maps, it's also possible to utilize a different base map.
27. Click on the Basemap button and choose one of the options. (Again, a light base map is often preferable to a dark one, since your layers will stand out better.)
28. Save your work by going to Save > Save As.
29. To make it easy for me to find your map, please give it a Title of Jen and Barry - <your name>.
30. Enter a logical Tag or two (e.g., GEOG 863) and an appropriate Summary (e.g., A map for GEOG 863, Project 1), then click SAVE MAP.
31. Finally, make your map visible to others by clicking Share.
32. Set the map's visibility to either Everyone (public), as we'll be embedding this map in a web page in a moment.
33. To confirm that others will be able to see your map, try opening the URL in another browser (e.g., use Chrome if you're currently working in Firefox).

In this section, we've been able to build a pair of useful interactive web maps 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.