Assignment 11

Leaflet map from Google Sheets

There are many repositories of free, open-source code on Github. For some projects, you don’t need to start from scratch, you can fork someone else’s project as a template.

In this assignment, we will create a web map by forking an existing project and changing only a few lines to make it work with our own data. The map will draw its data directly from a Google Sheets spreadsheet and update as the spreadsheet is modified.

Table of Contents

• Finished Example
• Data
• Steps
  • Part 1: Create a Google Sheet
  • Part 2. Clone a Github repo
• Try It
• Checklist
• Submit

Finished Example

Data

This app will accept the URL to a spreadsheet in CSV format with the following attributes:

 
These are some of the same columns used in the ArcGIS Online Story Map Tour template. That means you can use the same CSV from Assignment 3 or start fresh with different locations.

However, the rows and columns must be copied to a spreadsheet in Google Sheets so the app can connect to it. Changes made to the sheet will be reflected on the map when refreshed.

Steps

Part 1: Create a Google Sheet

1. Create a new blank spreadsheet on Google Drive.
2. You can either paste your CSV values from Assignment 3, which should still be saved in your ArcGIS Online account, or create new locations with name, description, lat, long, and pic_url columns. Other columns are not needed.
   
3. After you have locations entered in the sheet, click File > Publish to the web, and select Sheet1 and Comma-separated values (.csv) in the dropdowns. You will be provided with a public URL, which should look like the URL below. Note the output=csv at the end.
   https://docs.google.com/spreadsheets/d/e/long-ID-here/pub?gid=0&single=true&output=csv
   
   We will copy this URL later, so keep the tab open for now.

Part 2: Clone a Github repo

1. Sign into Github, go to the Photomap repository. “Photomap” is a simple web map application made for this exercise.
2. Click Fork. This asks you to make a copy of the project in your Github account as a new repository at yourusername/photomap.
3. After creating the forked repository, go to the Settings tab, click Pages in the settings menu. Select main as the source and click Save.
   
   It might take a few minutes, but eventually your site will be live at yourusername.github.io/photomap. You can change the repository name in the settings to change the address. At the bottom of the settings page, you can delete the repository if needed.
4. Add a link to your live map in the README.md of your yourusername.github.io repository, the same as “Try It” Step 3 in Assignment 10.
   

Try It

The “Photomap” web map should already work after forking it, but it will display example locations in Baton Rouge. Customize it by connecting to your own Google Sheets and photos, center and zoom the map accordingly, and choose a different basemap.

1. To connect the map to your own Google Sheets, click on the Code tab in Github for your photomap repository and click the file photomap.js. Click the pencil icon to edit it.
2. Look for the line of code that saves a Google Sheets URL to a variable, beginning var csvUrl... Replace the URL with your own sheet’s public URL from Part 1 Step 3.
3. You’ll also need to change the map center and zoom to focus on your own locations. You can use Google Maps to get latitude and longitude by right-clicking on the map in Google Maps. For zoom level, here is a rough guide:
   • 4 fits the continental U.S.
   • 8 fits Louisiana
   • 13 fits Baton Rouge

4. Choose a basemap that is appropriate for your locations and the overall theme of your map. For example, if you have locations within walking distance or a short ride, a detailed street map might be useful. A topographic basemap could work well for hiking locations, and an imagery basemap goes well with a variety of maps.

   See the Leaflet basemap demo for ideas and the code to add to your map. Note that some require signing up for a service.

   The example basemap code in Photomap looks like this. You need to change it:

   var basemap = L.tileLayer('https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 16,
    attribution: 'USGS'
   }).addTo(map);
   

   warning_amber When you copy a basemap code sample from the Leaflet basemap demo, you will need to make sure it ends with .addTo(map); like the example above, or it won't be visible on the map. The semicolon goes at the very end of the line.
5. Next, deal with the photos. If you copied the CSV from Assignment 3, you will already have working images with a full URL in the pic_url column of your spreadsheet. However, you might wish to remove your map’s dependence on images hosted on ArcGIS Online, and instead upload your photos to Github.
   • To add images to Github, go to the Code tab of your photomap repository and click the images folder.
   • If you have your own photos saved on your computer, you can choose Add file > Upload files, then drag and drop the files from your computer to the page. Commit changes.
     

Checklist

1. A fork of the “photomap” repository on Github.
2. A live Github website published from the photomap repository.
3. Map of locations loaded from your own Google Sheets spreadsheet (from Assignment 3 or new ones).
4. Appropriate center and zoom.
5. Popups showing location name, description, and photo.
6. Choose your own basemap, not the “USGSImageryTopo” from the example.
7. Link to this map in your README on Github.

Submit

1. A URL to your main repository page showing the README file with a link to your map. The URL you submit should look like https://github.com/yourusername/yourusername.github.io. This is the same URL you submitted for Assignment 10.

   Your Assignment 10 and 11 maps should both be accessible from that page now.