Assignment 3

Create your own geographic information and map it

Geographic information is the foundation of Web GIS. In this exercise, create your own simple datasets of geographic information following a standard data format and display them on a web map.

Contents

• Data
• Steps
  • Part 1: Prepare the CSV
  • Part 2: Prepare the GeoJSON
  • Part 3: Create a web service
  • Part 4: Create the App
  • Part 5: Edit the Map
  • Part 6: Metadata
• Submit

Data

Your datasets will consist of a CSV point layer and a GeoJSON polygon layer or line layer, though this tutorial uses polygons. Here are some ideas:

• Favorite restaurant locations (point layer) and parking areas (polygon layer)
• Boundaries of national/state/local parks you’ve visited or want to (polygon layer) and a point of interest in each (point layer)
• Trails or paths you’ve hiked/walked/run (line layer) and the starting point of each (point layer)

Elaborating on the restaurant example, you could choose four you like in a city you’ve visited and record each restaurant’s location and available parking. In this case, your layers would be a combination of:

• non-spatial data (restaurant name, description of the food and atmosphere)
• spatial data (latitude and longitude location, boundary of parking area)

You may use the restaurant example or choose your own topic. This tutorial uses four landmarks in Baton Rouge as an example, with placeholder text and images from Wikipedia.

We will use a spreadsheet to create the CSV point layer and Geojson.io to draw the polygon or line layer. We will then use ArcGIS Online to create a web service a Story Map.

Steps

After you decide on a topic and pick out your locations of interest, follow the steps below, substituting your own locations for the Baton Rouge examples.

Part 1: Prepare the CSV

Your first dataset will be in the simple comma-separated values (CSV) file format and will contain the names and descriptions of several places of interest along with their latitude and longitude coordinates (points).

To see a completed CSV for reference you can download this example CSV.

1. Open a blank spreadsheet (Excel, Google Sheets, etc.).

2. Type an attribute name in each column on the first row, using the attribute names specified and described below:
   • name - a short, descriptive title for the location
   • description - a sentence or a few describing the location
   • icon_color - R, G, B, or P
   • lat - the location’s latitude in decimal degrees (e.g., 30.12345)
   • long - longitude in decimal degrees (e.g., -90.12345)
   • pic_url - The web address of an image you want to represent the location.
   • thumb_url - The web address of a smaller preview image. Can be the same as pic_url.
     

3. Choose at least four places to use for this exercise and research enough about them to fill in the name and description in the CSV.

4. Locate the places on Google Maps. Right-click the map at the location to get the coordinates. Click the coordinates to copy, then paste into the lat and long fields in the CSV. You will have to separate latitude (the first number) and longitude (the second) and delete the comma.
   The latitude and longitude of a location can be copied from Google Maps by right-clicking the map.

5. Find a picture of each location or upload your own photos online. You can host images in ArcGIS Online by clicking Content > Add Item > From my computer.
   How to add an image to your ArcGIS Online content page.

6. To get the URL to paste into your CSV, see the picture’s Item Details page shown after uploading. Click Share and choose Everyone, then at the bottom of the Item Details page, a public URL will appear that you can copy and paste in the CSV pic_url field.
   Share an item to get the public URL to the item.

7. Optionally, you can also upload thumbnails—smaller, faster-loading preview versions of each image—and put their URLs in the thumb_url field. Otherwise, just use the same URL for pic_url and thumb_url.

8. After completing the spreadsheet, save it as a CSV.
   • Excel: File > Save as and for the file type select CSV (Comma delimited).
   • Google Sheets: File > Download > Comma-separated values.

   The completed spreadsheet might look something like this in Excel:
   

   And in a text editor it would look like this:
   

That completes the point layer.

Part 2: Prepare the GeoJSON

In this part you will draw your own features on a map and save the layer as a GeoJSON file.

1. Go to geojson.io and pan and center the map on the place you chose for your dataset.

2. In the drawing tools, click the Draw a polygon, Draw a rectangle, or Draw a polyline tool. Draw shapes on the map to complement your point layer, e.g., park outlines. As you draw, the GeoJSON code will appear in the code pane to the right of the map. These instructions will assume you drew polygons. Save your work often in case the site crashes!
   

3. After drawing your features, you can edit the attributes by either clicking the features on the map or clicking the Table tab on the top menu.
   

4. Create a new column called “name” and on each row in the table, type/paste the names of each location from your CSV.

5. Go to Save > GeoJSON and the file will download to your computer.

That completes the polygon layer.

Part 3: Create a web service

Next we will create a web service so that web mapping applications can access the GeoJSON layer we just created. However, unlike the Node.js assignment on CodeSandbox, we will not do any coding to create the web service. Instead, we will use the web interface of ArcGIS Online to automatically set up a web service when we upload our GeoJSON file.

(The CSV file will be added later)

1. Sign into ArcGIS Online using the details provided by your instructor.

2. In ArcGIS Online, go to your Content page to upload your GeoJSON file. Click New item > Your device and browse the files on your computer for the .geojson file you saved in the previous section.

3. For How would you like to add this GeoJSON?, choose the option to create a hosted feature layer and click Next, Next, Save. This will create a web service.

4. After adding, you will be shown the Item Details page. Click the Share button and choose Everyone to make your layer public. Also scroll down the page to see your web service’s URL. This is the URL that applications can use to request data from your web service. Keep this tab open; soon you will come back to copy this URL.
   

You now have a web service that will give applications access to your polygon layer. The data is completely self-contained within ArcGIS Online, and any changes you make to the GeoJSON file on your computer will not affect the layer in ArcGIS Online.

Part 4: Create the App

1. Go to https://storymaps-classic.arcgis.com/en/app-list/map-tour/ and click Build a map tour.
2. At the welcome page, click the gears icon for advanced options, then Import Tour data from a CSV file, then select the CSV file from your computer and click Import.
3. The app should now display your points on the map, the captions, and a photo for the first tour location. Optionally, you can click a map marker to change its color.
4. Edit the title at the top from Edit me! to something appropriate for your tour, such as Baton Rouge Tour.
5. Click the button in the top left to save the app. This will save a new Web Mapping Application item and Web Map item on your Content page using the title you just specified in the previous step.
6. Go to Content to see the new items.

Part 5: Edit the Map

1. In Content, click on the new Web Map item, then on the Item Details page click Open in Map Viewer Classic. Your point layer from the CSV will already be in the map’s table of contents.

2. Click Add > Add Layer from Web and paste the URL for your polygon layer’s web service (the URL from Part 3 Step 4).
   So far, the course lessons have stated many, many times that applications request data from web services through a URL. Well this is it! It’s happening! We are creating a map application and telling it the endpoint URL from which it can get data to display on the map.
   There are other ways to add layers to maps in ArcGIS Online, but this explicit use of a URL demonstrates that the map is using a web service endpoint.

3. Change the polygon layer symbols by clicking the Change Style icon, and in the Choose an attribute to show dropdown, select name. Click Done. This gives the layer a unique color and shows each feature’s name in the legend. Optionally, you could choose your own styles, such as removing the fill color so that only your polygon outlines are visible. You can see your symbols in the contents pane.
   

4. Click the More Options button under the polygon layer and choose Create Labels then OK.
   The More Options icon (three blue dots) gives you access to more settings, including the option to turn on labels.

   This will display text on the map for each feature. The text comes from the layer’s attributes. In this example, choose the name attribute.

5. If the layers need to be renamed to something more descriptive without underscores, click the More Options button again on each layer and choose Rename.

6. For both layers, click More Options once more and under Set Visibility Range move the sliders to the far ends of the bar. This keeps your layer visible no matter how far in or out the map is zoomed.
   For the Story Map Tour template to work in the next steps, the layers need to be visible at all scales.

7. Choose a basemap that suits your operational layers. The basemap is supposed to provide a reference background for users. I used a plain gray basemap in the example. A downtown tour might go well with the detailed street basemap, while a map of state park campsites might be better complemented by the topographic basemap. Whatever you choose, make sure the operational layers are still clearly visible against the basemap.

8. Finally, zoom and pan the map to fit your features into the viewer. The view you see now will be the default for apps you create with this map.

9. Click the Save button.

Part 6: Metadata

1. Go to your Content page to see that you have new Web Map and Web Mapping Application items.
   

2. Click on the item for your Web Mapping Application to see its Item Details page. The URL of the Item Details page is what you will submit for the assignment.
   Example of an Item Details page in ArcGIS Online: https://www.arcgis.com/home/item.html?id=cc2a69a4e6784a2baa203fec4fbc4f5c.

3. The green progress bar on the right side of the page indicates how many of the metadata fields you have completed. Complete these fields:
   • Summary - a short sentence saying what your app shows and does
   • Description - a more detailed explanation of the purpose of your app and the content of your layers
   • Thumbnail - if you are not satisfied with the default thumbnail, you can upload a screenshot or other graphic
   • Terms of Use - typically “None” in our case or a Creative Commons license such as CC BY-SA
   • Credits (Attribution) - similarly, give credit for any images or layers used in your map
4. At the bottom of the Description field, add the URL to your web service (the endpoints you added to the map). It should look like this, above the Terms of Use section:
   https://services2.arcgis.com/ABC123/arcgis/rest/services/YourLayer1/FeatureServer

From this page you can click View Application to launch the app, or click Configure App to make further changes to the app.

Submit

1. Copy the URL to the Item Details page of your Story Map. Make sure the description section has the URL to your web service at the bottom and your app is shared publicly. An Item Details page URL should look something like https://www.arcgis.com/home/item.html?id=ABC123 or https://arcg.is/123ABC.
   
2. Open an incognito/private browser window and paste your Item Details page URL. Click View Application.
3. If you can view your app and Item Details page in the incognito window, then submit the Item Details page URL on Moodle.

If you cannot view your app and are instead prompted to sign in, or just get an access error, make sure every component of your web app is shared with “Everyone”, including both feature layers, the map, and the app. You can check and share them all at once on your Content page.