Section 1: Creating an interactive map

[1] Download the required datasets

We are going to recreate the following story map titled: “Short Revisit to the Cholera Outbreak in Soho, London (1854)”. In order to recreate it, please download the required data:

[DOWNLOAD DATA]

The shared folder contains the following data:

Data type Description
CSV Houses with Cholera Deaths
CSV Houses with no Cholera Deaths
CSV Pump locations
GPX Tracked route (Strava)
Icons 3 images
Pop-ups 4 images
SHP Zipped compressed folder containing shapefile of the area
DOCX A script to make your life less painful…

Let us go through these dataset more in-depth in the video:

Video: About the Datasets (Length: 11:57 mins)

[Watch on YouTube]

Alright - once you have watched the video, we can begin.

[2] How to log into ArcGIS Online

UCL has a licence for ArcGIS Online. You can easily access and start using it via main website at https://www.arcgis.com/. You will need to use your own UCL institutional login to be granted access to ArcGIS Online. Note that the process of logging into ArcGIS Online is same way when you are logging into your UCL email via MS Outlook.

Here are the steps for logging to ArcGIS Online:

  1. Go on https://www.arcgis.com/
  2. Click on the Sign In button
  3. Select the section “Your ArcGIS organization’s URL”
  4. Under the “Your ArcGIS organization’s URL” section, type UCLondon and click the Continue button.
  5. You should see a new button that says UCL SSO. Click on the UCL SSO button.
  6. Here, you will be prompted to type your UCL email and its corresponding password credentials. Type these information to finally be granted access.

You can view the video below which covers the steps in a detailed way.

Video: How to log into ArcGIS Online (Length: 05:32 mins)

[Watch on YouTube]

[3] Starting a new ArcGIS Map project

We will need to start a new project to build our interactive maps in ArcGIS online. Before we do so… here are the steps for getting the appropriate set-up. Please do this set-up so as to make the navigation through ArcGIS Map Viewer a lot easier and less painful experience!

Here are the steps:

  1. Head to your profile settings - you should see your user name (e.g., _UCLondon) at the top right corner - click this section.
  2. Click My settings
  3. Scroll down to the part titled Primary map viewer
  4. Select Map Viewer Classic (avoid selecting Map Viewer at all cost)
  5. Now, select Map located at the top menu bar to open a new project.

You can view the video below which cover these steps in a detailed way.

Video: Starting a new map project in ArcGIS Online & set-up (Length: 04:46 mins)

[Watch on YouTube]

[4] How to import spatial data & Customisation of symbologies into your new ArcGIS Map project

Here, we are going to start importing all our spatial data sets into ArcGIS Map. We will have to do this one file at a time. Let us import the data sets in the following order:

  • Houses_with_Cholera_deaths.csv
  • Houses_with_no_Cholera_deaths.csv
  • Pump_Locations.csv
  • Routes.gpx
  • Area.zip

We are going to start with the file titled Houses_with_Cholera_deaths.csv. Here are the steps for importing the data:

  1. Click on the +Add icon at the top of the viewer.
  2. A drop down menu should appear - select the option Add Layer from File
  3. A small window titled Add Layer from File will appear. Click on the button Choose File and navigate to the folder in your computer to select the first file in above list i.e., Houses_with_Cholera_deaths.csv
  4. Click the button Upload to upload the selected file.
  5. Finally, click on the button IMPORT LAYER to load the layer into the map project.

From this point, it is a matter of repeating the process to import the remaining files.

Upon loading the data, it will automatically take the first column (i.e, the house identification number) in the data and plot a proportional dot map which is obviously in incorrect. We want to plot this data as Location with a single symbol - preferably as a red colour to symbolise that these where homes with documented Cholera deaths. We can do the using the following steps:

  1. On the left hand side of the panel, scroll to the section that says: Location (Single symbol). Click SELECT
  2. It should remove the erroneous proportional dot map. Let us change the colours accordingly to Red. Under Location (Single symbol), click on the button OPTIONS
  3. Click on Symbols
  4. We can change Shape icons if we wish by selecting the desired Shape Category. However, we can leave this as a circle. Lets change the FILL colour from Black to Red so click on FILL.
  5. You will see a colour palette - click on the Red.
  6. Consistency we also want the OUTLINE of the circle shape to be RED as well. Lets change the OUTLINE colour to Red. Click on OUTLINE and also select Red in that colour palette.
  7. Click OK in the small window to confirm colour selection.
  8. Finally, click OK about the bottom, and then click DONE for the final confirmation.

Again, its all rinse and repeat. We can repeat the above steps for importing the point data for Houses_with_no_Cholera_deaths.csv and assign its symbology a Green colour. For the Pump_Locations.csv data, we can change the Shape Category and select one of the markers under the Points of Interest category. We can also apply the label names of the pumps from the Pump_Locations.csv to show using the Create Labels option. Watch the video carefully to see how this is done.

Note that when importing line and polygon data for the Routes.gpx and Area.zip, respectively, it is essentially the same steps as the above. You may choose to make the symbology for the routes data a thin line by reducing its width and render its line style as a dashed line. For the area - you can make its colour fill 100% transparent. We only want to see the borders of the Soho area only. Watch the video carefully to see how these customisation are done.

You can view the video below which cover these steps for importing data and customising the data in a detailed way.

Video [Tutorials]: How to import spatial data and apply various customisations and symbologies (Length: 29:18 mins)

[Watch on YouTube]

[5] How to import and configure pop-ups images for point of interest

We are going to take a look at how we can configure images to pop-up at features considered to be points of interest. But first, we will need to import them into a repository called Contents. Let us see how to import image files (.png or .jpeg etc.,) into my Contents in ArcGIS Online.

Here are the following steps:

  1. Click on the button New item
  2. A New item window should appear. Let us drag and drop the image Pump - interactive map.jpeg into the Drag and drop your file or choose an option section
  3. A window will appear where we can add more information about the photo. Here, we can alter the title by typing Broad Street Pump [image]. Click Next and the image should be uploaded into your list of Contents
  4. Now, make sure to click on the Share button. Here, we need to select the Everyone (public) option in order to get a URL link - this is what we need to configure the pop-ups to work. Without this option selected it would not work!.

Now, we should see the image stored in our My Contents list. We can repeat the above import steps for the remaining images:

  • Pub - interactive map.jpeg
  • Barbers - interactive map.jpeg
  • Market - interactive map.jpeg
  • Camera icon - interactive map.png
  • Death rate icon - interactive map.png
  • Footprint - interactive map.png

Now, let us add the images to our interactive map as a pop-up feature to points of interest. We are going to start with the adding the Broad Street Pump [image].

Here are the following steps:

  1. Click on the Web Map template we are currently working on i.e., Demonstration to continue the creation of interactive map.
  2. Next, click on the button Open in Map Viewer Classic to open it.
  3. Zoom in very close to the pump icon labelled Broad Street Pump. Here, we going add a Camera icon image and link whatever details we’ve described for this point of interest.
  4. Next, click on the +ADD button and select the option Add Map Notes
  5. An Add Map Notes will appear. Here, click the CREATE button.
  6. A list of icons will appear. Select Stickpin and hover the point close to the pump icon labelled Broad Street Pump, and click to add Stickpin point on the map.
  7. A Points window will appear. In the Title section, type: Broad Street Pump
  8. In the Description section, copy and paste the necessary information (see Word Document titled: Text Script)
  9. In a separate tab - go into My Contents and select Broad Street Pump [image]. Copy the URL and paste it in the URL sections in the window mentioned in Point 7.
  10. We are going to alter the symbology of the Stickpin with our own image of a Camera icon. Here, click on CHANGE SYMBOL and select Use an image
  11. In a separate tab - go into My Contents and select Camera icon [image]. Copy the URL and paste it in the URL sections in the symbology window mentioned in Point 10 and click + sign.
  12. Click on the new Camera Icon and set the Symbol Size to your preference and click OK, and click CLOSE.
  13. Lastly, click on Edit to close out of the editing mode.

If you click on the Camera Icon, a pop-up feature with the image and description of the location will appear. Now, we rinse and repeat for the other locations. Watch the video carefully to see how these customisation are done for the remaining images. Now, make the final save to complete the interactive map and progress to section 2.

Note that you can view the video below which cover these steps in a much detailed manner.

Video [Tutorials]: How to import and configure images to pop-up from interactive map (Length: 41:26 mins)

[Watch on YouTube]