Hunter College GIS, GeoInformatics, and Spatial Data Science
All the lab assignments will be released in this document, exported in HTML or PDF formats.
The document is a RStudio Quarto document, which can weave or knit content and executable code into a finished document in HTML, PDF, ePub, and many other formats.
The WebGIS course introduces three, among numerous possibilities, levels or types of Web applications.
Our lab assignments are mostly on the first and second levels. Because many advanced approaches in Python, R, and JavaScript are converging in the “Notebook” style environments, you have many options to tackle the final projects.
This assignment is optional, and aims to get you familiar with the format of the assignments to be used through the semester.
For the first week, just get the following development environment-related items ready:
But more importantly, prepare a well-processed spatial data setfor web applications. The spatial data set is expected to have:
at least one polygon and one point layers that are related to each other and are at the same scale.
diverse and meaningful columns with data types of text/string (e.g., names), real quantities (e.g., population, PM 2.5, number of incidents), and types/classes/categories (e.g., vegetation classes, land use types, building types, and school categories)
a large, but not huge, number of features in the polygon and point layers. A few hundred to a few thousands would be appropriate.
WebGIS in the course focuses on communicating and representing spatial information online with interactivity, not data processing or spatial analysis, although we would learn some necessary format conversions. You are expected to use the data set for some of the assignments and ideally for your final project.
The first lab is to understand the principles of WebGIS using ArcGIS.com web apps. Specifically, we use ArcGIS Dashboard and Experience Builder as examples of the programming-free or templates-based WebGIS. You can choose EITHER task for this lab assignment, but are encouraged to learn both.
While the assignment only requires one of two ArcGIS.com web apps, all, especially those mostly focus on programming-free WebGIS, should explore both web mapping tools. Although they share many features, it is critical to understand their differences, pros and cons, so that you could make an informed decision when you need to pick one for actual works.
Using your own data, create and publish an ArcGIS Dashboard application. The Dashboard must have at least:
Some of these elements such as indicator and map, list and map must be “linked”. For example, the quantitative indicator should be dynamic, i.e., its value must be “linked” or “synced” to the map extent. The item in the list and the feature in the map should also be “linked” or “synced” with “Zoom to”, “Pan to” and “highlighting”.
Of course, you are encouraged to add more appropriate elements based on the nature of your data and map purpose.
For ArcGIS Dashboard resources, please visit Dashboard Documentation.
Create an ArcGIS Experience Builder application. The application should include at least one map, one chart, one table, one query, and one multimedia item. Once more, feel free to explore any templates and widgets offered on ArcGIS.com.
Experience Builder Documentation: Get Started, Create First Web Experience, Build Apps, and Configure Widgets
Submit the URLs of your Dashboard and Experience Builder to Brightspace Discussions.
Note that they should be the Viewer URLs with public access, not the Editor ones that require logging in.
Set all relevant arcgis.com content, including the underlying web maps as well as the data/feature/map layers, public. ```
Log out arcgis.com and test the URLs to make sure they are publicly accessible. Alternatively, you can test it in a different browser/computer/device where you have never logged in arcgis.com.
In this lab, we will create a Quarto Document, from which an HTML web page could be “rendered”, or an online Observable Notebook with a variety of elements using HTML, Markdown, and basic JavaScript.
For the data that you have been using for ArcGIS.com dashboard, create a web-based “Dear Mayor” open letter using either HTML or Markdown. The letter is trying to bring attention to a specific issue in the city. If your data is not about the city or for the mayor, just change accordingly. The description should use one or a few cells to explain the background, purpose, data sources, and community need or policy recommendations. The following HTML/Markdown elements are required for the letter:
At least one ordered or numbered list
At least one table
One or more embedded images
At least one video from sites like YouTube
One or more external links such as to your ArcGIS.com dashboard
Create Observable Inputs to make some part of the letter in task 1 reactive. For example, a text or select input would allow the users to specify their names. The description in task one can then react to these changes and show the names dynamically.
Possible Inputs include:
Color
Date
Text (one line of simple text)
Text Area (multiple lines)
Checkbox
Range
Radio
As these Inputs work best with some JavaScript code, we only learn the basic ideas of “reactive” JavaScript for now. More will be covered in later lectures and labs.
// One example for the Color Picker using Observable Inputs.
1viewof fillColor = Inputs.color(
2 { label: "Fill",
3 value: d3.color("steelblue").formatHex()
4 })${fillColor} to specify the color of certain elements in the notebook.
We use this color to draw the border and set the text color. Check out Observable Plot for more plotting functions and examples.
Plot.plot({
marks: [
1 Plot.frame({stroke: fillColor}),
2 Plot.text(["Hello, Reactive Web Design!"],
{frameAnchor: "middle",
fill: fillColor,
fontSize: fontSizeVal
})
]
})We can also add a slider to change the font size.
// This one controls the font size.
// We show the code here so that you can learn. In the real production, the code can be hidden.
1viewof fontSizeVal = Inputs.range([9, 50],
2 {value: 36, step: 1, label: "Font Size"})For most reactive web apps, the location where you put the code does not matter. For example, the variable “fontSizeVal” from the slider is defined after we use it. This will be an error in some programming environments like Python or R. In reactive development like the one supported by Observable, the location does not matter and the “code” will find out the variables it needs.
Use the variable ${variableName} for dynamics or reactive content. For example, if we use The font size is ${fontSizeVal}. in Markdown, the result would be “The font size is ”, where the value will be automatically changed according to the output from the slider.
This one is to choose a date/time, and its value is directly used in Markdown.
// This is a simple example of datetime input
// We can use ${dueDateV} in Markdown or HTML to display the value.
viewof dueDateV = Inputs.datetime({label: "Due Date", value: "2024-02-26", max: "2026-02-26"});The recipient of the letter and the “due date” are controlled by the Inputs.
Please send the letter to by .
This one is to update names and other elements in a letter template.
Dear ,
I am writing this letter about in the city. … …
Yours,
viewof recipientTitle = Inputs.select(["Mayor", "Congressperson", "Borough President", "Council Member"],
{value:"Mayor", label:"Letter Recipient"})viewof issueDesc = Inputs.text({value:"mice", label:"Issue Description"})viewof letterAuthor = Inputs.text({value: "John Doe", label:"Your Name"})The markdown source code is as follows.
Dear ${recipientTitle},
I am writing this letter about ${issueDesc} in the city. ... ...
Yours,
${letterAuthor}Check out Observable Documentation on Inputs for more such controls.
The color and date pickers look and behave differently on different browsers. It looks better on Chromium-based ones like Chrome, Edge, and Brave. Firefox renders them not as well as on those platforms. This also tells us that we must test our websites in different browsers for maximum compatibility.
Complete one of the two tasks that you did not do for Lab Assignment 1. In other words, if you created a Dashboard, please develop an Experience Builder app. If you created an Experience Builder app, please develop a Dashboard. If you choose this task, you do not have to do tasks 1 and 2.
Submit your Observable Notebook, Dashboard/Experience Builder, or GitHub URL to Brightspace. If you used Quarto Document, you can host the web pages generated from Quarto on GitHub. Write at least one substantial comment to others’ work in the forum. Both will be considered for grading.
For this assignment, we will use Quarto Website Project to build a multi-page website with key elements like menu, table of content, etc. Within the website, each page is rendered from a Quarto Document written in Markdown, HTML, JavaScript, R, Python, etc.
Essentially, the Quarto engine renders all the separate Quarto Documents to HTML and then build the website using these HTML pages. Quarto automatically imports and utilizes many popular libraries in the web development worlds, including themes, templates, JS libraries, etc. One advantage of the Quarto approach is that all the details are handled by the program. We can use the simple Markup or Markdown languages to configure the website.
Create a Quarto Website Project for your project. The website must have at least the following pages:
Home, a landing page with basic introduction to the website
Map or Visualization, you can embed your ArcGIS.com web apps for this page
Data, explain the data sources and possibly data processing methods with links and tables
Open letter, include the open letter you created earlier for this page
About, information about the website
You can certainly add extra pages that you think might fit the website.
Configure the website using the yaml file and the head section of the qmd files.
Render the website on your local computer. RStudio has a built-in web server that allows us to view the rendered website.
Altertiavely, we can use a simple web server like this one on GitHub to view the website. You can also try a more powerful web server like Apache or Nginx.
Once you are satisfied with the site, upload the HTML file and the associated folders and resources to GitHub Pages. Open and test the website in various browsers.
Submit the GitHub url to Brightspace Discussions.
Refine your existing ArcGIS.com web map and dashboard, particularly the layout with techniques like tabs, range and category selectors, header, sidebar, etc. Share the Dashboard URL and explain the improvements that you had made.
For this assignment, we will learn and practice JavaScript. You can either use JavaScript in Quarto Document or Observable Notebook to accomplish the following tasks or finish the JavaScript tutorials, exercises, and quizzes on W3schools.com.
In Quarto Document or Observable Notebook, accomplish these tasks.
The assignment is more like a test or an evaluation tool. Go over the JavaScript basics and practice on w3schools.com website. The assignment is where you apply your JS knowledge and programming skills, not where you learn them. If you just focus on the specific tasks in the assignment, you will miss a lot of the JS fundamentals.
Calculate and show the number of days from now to the Championship match of the 2026 World Cup (July 19, 2026) in New York/New Jersey. This will use the data type of date and the getTime function in JavaScript. A very useful example is available at W3Schools.com website.
Here is an example of getting the number of weeks. While we are trying to make the assignments more accessible to you, make sure you really understand what is going on and have the ability to extend the example code.
viewof worldCupDateV = Inputs.datetime({label: "2026 World Cup Final", value: "2026-07-19T16:00"});weeksCount = {
// Calculate weeks in milliseconds
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const week = day * 7;
const year = day * 365;
// Divide Time with a week
const d = new Date();
return Math.round( (worldCupDateV.getTime() - d.getTime()) / week);
}The next World Cup Final is weeks away!
Bonus Point: make the countdown in a format of YEAR:MONTH:DAY:HOUR:MINUTE:SECOND format and automatically update it.
Create an interactive way of allowing users type in a name and find out its Soundex key. Soundex is a phonetic algorithm for indexing names by sound, as pronounced in English. For example, Washington is coded as W-252.
There are many source code publicly available for the Soundex algorithm, including JavaScript.
Create a reactive app in Quarto Document or Observable notebook, so that a user can type in a name and the app/cell show its Soundex code.
// Observable Input that allows a user to type in a name.
viewof nameVar = Inputs.text({label: "Name", value: "Washington"})soundexFunc = function(name) {
// This should be replaced by the Soundex function body
if (name.toUpperCase() == 'WASHINGTON')
return 'W-252';
else
return 'To be processed';
}The Soundex code of is .
Bonus Point: allow users to type in multiple names at one time such as Washington, Jefferson, Adams, instead of one name.
If the user type in a series of words separated by comma, the output should be well formatted. For example, if the user types “Washington”, the output should be Washington. If it is “Washington, Adams”, the output should be “Washington and Adams”. If it is “Washington, Adams, Jefferson”, the output should be “Washington, Adams, and Jefferson”. Make the function flexible and robust.
viewof multiNameVar = Inputs.text({label: "Name", value: " Washington,Adams, Jefferson"})printMultiNames = function(multiNames) {
let nameArray = multiNames.trim().split(',').map(x => x.trim())
// Your code here
return nameArray.join(", "); // replace the return with your own.
}
// Use a markdown or HTML cell to show the input ${multiNameVar} and
// output ${printMultiNames(multiNameVar)}A better presentation of names is .
Design inputs and functions in Observable Notebook to beautify ranking values, such as 1 to first or 1st, 11 to 11th or eleventh. Give user the option to choose the format of the output like first vs. 1st.
Read JavaScript Tutorials as much as you can. The following topics are strongly recommended:
Syntax
Variables
Operators
Data types
Functions
Objects
Arrays
If Else
For loops
Accomplish the corresponding JS Exercises. Finish the JS Quizzes.
Take a screenshot of your quiz results and post it to the Discussions. You are not expected to get full score on the quiz and your points for the course will not be based on your quiz results. The quiz is just a self-evaluation.
This is not an assignment and we will take a break this week. But you can take the time to go over what you have done and see if you can make further improvements.
Here are a few items that you can consider.
Move all the function definitions or other code heavy cells to the bottom, so that the final page has a clean presentation. Note that Observable Notebook does not run cells in sequence. It can find all the definitions and variables no matter where they are in the notebook.
Add some breakers/rulers/separators between sections. This could be done in many different ways such as ---, *** in markdown, <hr> in HTML, a SVG rectangle, or even an image containing separators.
Utilize the “built-in” width variable in Observable Notebook to make the webpage more responsive, such as making the text cell wider. For example,we can use <p style="max-width: ${width + 'px'}">This is a very long line.</p> to make the paragraph adapt to the cell width.
For this assignment, we still have two options for JavaScript and Dashboard, respectively
Add a Leaflet map to Observable Notebook or an independent web page. Complete the following tasks:
Replace the default base map with a different one.
You can check out the popular leaflet-providers package at its preview site.
The preview site generates the JS code that we can use directly for Leaflet.
Leaflet providers can also be imported as a library. It provides functions to add base maps to Leaflet map applications. See the documentation and examples at its GitHub pages. The course Dropbox site also contains examples using leaflet-providers.
Add at least five markers such as subway stations or restaurants
One uses the default Leaflet marker setting.
One uses a customized icon for the marker, e.g., the logo of MTA for subway station/entrance
Three use the CircleMarker, with varying colors, sizes, and transparency.
Make an array or other JS data structure for the properties (color, size, transparency) of the three CircleMarkers. Loop through the structure to create the CircleMarker objects. You can also use JS code to make random values for the properties and add more such CircleMarkers.
All markers should have appropriate tooltips and popup window information.
Use Arcade (the expression language similar to JavaScript) to customize your Dashboard for popup windows, styles, labels, feature symbolization, and list/table/indicator, etc. For some of the items like styles, the Map Viewer, instead of Dashboard, is where we should make changes.
Through the Dashboard settings, enable layer control, legend control, search, etc., where possible and applicable.
Add appropriate elements listed in lab assignment X.
Note that the basic syntax of Arcade is very similar to JavaScript, although it is case-insensitive. Most JS concepts and grammar are applicable in Arcade. You can check out the language features of Arcade.
This is our last assignment, still with two options with leaflet and Dashboard.
After finishing all assignments, we will then focus on YOUR projects. Each of you will be expected to present and share your projects-in-progress during the lecture times. We will discuss and propose specific improvement suggestions and methods. So, be proactive and be prepared.
Following the shared examples, create a leaflet-based web map either on Observable or as an independent application.
Having at least two base map layers. Add a layer control with which the user can choose one base map layer.
Creating at least two layers using GeoJSON files. Preferably, one is point layer and one is polygon layer.
Setting the styles of the GeoJSON features/layers based on their values, such as those in choropleth maps or proportional symbols.
Adding proper popup window information for all features
Including certain controls like full screen, coordinates, search, etc. where you see appropriate. Refer to the examples on Dropbox for clues.
Optional: Explore and utilize at least one extra leaflet extension to add functionality to your web map.
Continue to improve your Dashboard application. For this assignment, focus on the style and layout.
In Map Viewer, check layer symbols, color, transparency (opacity), visible range, etc.
Make sure all texts in tables, lists, and popup windows are reader-friendly. Do not accept the default column names such as “pop_20”, for example. Instead, change it to “Population 2020”.
Check if all the colors work well together. Use tools like ColorBrewer to specify colors. Choose colors that are colorblind safe, if you want that to be a feature of your map.
Adjust the layout and sizes of the elements on Dashboard so that all look nice as a whole. For example, it is bad to have very uneven sizes for similar elements like some charts are very big while some are very small. Try to utilize tabbed and group elements to optimize the layout.
One page or more is expected.
Generally, the proposal needs to describe
the background (what the topic is and why you want to map this topic),
data sources (make sure they are available in an appropriate spatial data format),
platform to use (Leaflet, Dashboard, Experience Builder, and etc.),
layout design (briefly describe the design with possible sketch or prototype), and
the interactive functionality (briefly discuss how users interact with your WebGIS with functions like search, full screen, resize, and etc.).
Note that the proposal is not to fix your path to your final product, but help you jump-start and plan your work. It should be a dynamic, evolving document, which you can use for course presentation and final report.
Create a presentation file (PowerPoint or PDF). You will use this file as well as the live website to present your project. The presentation should not be longer than 10 minutes.
Briefly introduce the background, data source, data processing, and key functionality. Leave some time for Q/A, where we may ask questions about the implementation details.
Write a brief report on your webgis, including title/name of the site, background, data sources, data processing, platform, main functionality, key source code (as appendix), and discussion on possible further improvements, TODO list etc.
Checking points for quality project:
Free of errors: no JavaScript errors on the browser console. HTML and CSS files are well formatted. For example, all HTML elements are closed correctly and form a well-structured DOM tree.
Good Design: Appealing interface and layout. Responsive to different screen sizes and media. Colors and fonts work together well. Appropriate contrast.
Functionality: Contain basic WebGIS components like basemap/layer control, Zoom, Full screen, search, etc. Extra features like marker clusters, alternative layer control, innovative interface, etc. Additional elements like charts and tables/lists.
Connection: where applicable, maps, charts, and lists must be links. For example, when a user selects a row in a table, the corresponding polygon should be highlighted.
Customization: Being innovative with customized elements, instead of the standard templates or examples.
Also check out the evaluation criteria, informed by this course, of the Interactive Maps for Alice Hudson Award in our department. ::::::