An open API service indexing awesome lists of open source software.

https://github.com/ucdavisdatalab/workshop_web_maps

Learn to build an interactive web map to display spatial data
https://github.com/ucdavisdatalab/workshop_web_maps

data-science geospatial-visualization teaching-materials ucdavis ucdavis-datalab workshop

Last synced: 3 months ago
JSON representation

Learn to build an interactive web map to display spatial data

Awesome Lists containing this project

README

          

# Workshop: Building Web Maps with Leaflet

_[UC Davis DataLab](https://datalab.ucdavis.edu/)_
_Winter 2022_
_Instructor: Michele Tobias <>_

* [Reader](https://ucdavisdatalab.github.io/workshop_web_maps/)
* [Event Page](https://datalab.ucdavis.edu/eventscalendar/)

# Description
In this workshop, attendees will be introduced to building an interactive web map to display spatial data using the Leaflet javascript library.

## Learning Objectives
In this workshop, attendees will learn

* Introductory HTML skills, in particular, the tags that are most commonly used to format text on a webpage
* How to load javascript libraries into a web page
* An introduction to the Leaflet javascript library
* Where to get additional help with HTML and Leaflet
* Best practices for communicating data distributions with a web map

## Skills
In this workshop, participants will be introduced to the following skills:

* HTML
* Javascript
* Leaflet Javascript Library

## Prerequisites
Learners should have a basic understanding of spatial data formats such as vector and raster data, as well as experience with any coding language. Learners with previous experience with coding in HTML and javascript will have an easier time learning, but these skills are not required.

# Template: Workshop Reader

This repository is a template for workshop readers for the UC Davis DataLab.
This template uses **bookdown** to knit the reader. You can also optionally use
**renv** to manage packages and Git Large File Storage to manage large files
(instructions included).

To get started, create a new repo on GitHub from this template
([instructions][gh]), then `git clone` your new repo.

[gh]: https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template

Once you've cloned the repo, here's a checklist of things to do to prepare the
repo:

1. **renv** (optional): To set up **renv**, open R at the top level of the repo
and run:

```r
renv::init()
```

Restart R. Then, to install the **bookdown** toolchain to the project
package library, run:

```r
install.packages("bookdown")
renv::snapshot()
```

You can skip this step if you're not going to use **renv**.

2. `index.Rmd`: Replace the all-caps text with your workshop details.
+ Title (in 2 places, 1 of them in the `output:` HTML block)
+ Author's name
+ Repo name (in 4 places, 2 of them in the `output:` HTML block)
+ Description, learning goals, & prerequisites

3. `README.md`: Replace the all-caps text with your workshop details.
+ Title
+ Quarter & year
+ Author's name & email
+ Reader URL
+ Event URL
+ Description, learning goals, & prerequisites

4. GitHub: In the repo's About section, add the reader URL and appropriate
tags.

5. GitHub: In the repo's Settings page, enable GitHub pages. Set the branch to
`master` and the directory to `docs/`.

6. `README.md`: Remove these template instructions, which end at the `#
Workshop:` header below

7. `git add` all changed files, then `git commit` and `git push`.

## Contributing

The course reader is a live webpage, hosted through GitHub, where you can enter
curriculum content and post it to a public-facing site for learners.

To make alterations to the reader:

1. Run `git pull`, or if it's your first time contributing, see
[Setup](#setup).

2. Edit an existing chapter file or create a new one. Chapter files are R
Markdown files (`.Rmd`) at the top level of the repo. Enter your text,
code, and other information directly into the file. Make sure your file:

- Follows the naming scheme `##_topic-of-chapter.Rmd` (the only exception
is `index.Rmd`, which contains the reader's front page).
- Begins with a first-level header (like `# This`). This will be the title
of your chapter. Subsequent section headers should be second-level
headers (like `## This`) or below.
- Uses caching for resource-intensive code (see [Caching](#caching)).

Put any supporting resources in `data/` or `img/`. For large files, see
[Large Files](#large-files). You do not need to
add resources generated by your R code (such as plots). The knit step saves
these in `docs/` automatically.

3. Run `knit.R` to regenerate the HTML files in the `docs/`. You can do this
in the shell with `./knit.R` or in R with `source("knit.R")`.

4. Run `renv::snapshot()` in an R session at the top level of the repo to
automatically add any packages your code uses to the project package
library.

5. When you're finished, `git add`:
- Any files you added or edited directly, including in `data/` and `img/`
- `docs/` (all of it)
- `_bookdown_files/` (contains the **knitr** cache)
* `renv.lock` (contains the **renv** package list)
- `.gitattributes` (contains the Git LFS file list)

Then `git commit` and `git push`. The live web page will update
automatically after 1-10 minutes.

### Caching

If one of your code chunks takes a lot of time or memory to run, consider
caching the result, so the chunk won't run every time someone knits the
reader. To cache a code chunk, add `cache=TRUE` in the chunk header. It's
best practice to label cached chunks, like so:

````
```{r YOUR_CHUNK_NAME, cache=TRUE}
# Your code...
```
````

Cached files are stored in the `_bookdown_files/` directory. If you ever want
to clear the cache, you can delete this directory (or its subdirectories).
The cache will be rebuilt the next time you knit the reader.

Beware that caching doesn't work with some packages, especially packages that
use external libraries. Because of this, it's best to leave caching off for
code chunks that are not resource-intensive.

### Large Files

If you want to include a large file (say over 1 MB), you should use git LFS.
You can register a large file with git LFS with the shell command:

```sh
git lfs track YOUR_FILE
```

This command updates the `.gitattributes` file at the top level of the repo. To
make sure the change is saved, you also need to run:

```sh
git add .gitattributes
```

Now that your large is registered with git LFS, you can add, commit, and push
the file with git the same way you would any other file, and git LFS will
automatically intercede as needed.

GitHub provides 1 GB of storage and 1 GB of monthly bandwidth free per repo for
large files. If your large file is more than 50 MB, check with the other
contributors before adding it.

### Github Actions

GitHub Actions can be set up to automatically render your reader when you push
new content to a repo. If you would like to use this function, download the
materials in [datalab-dev/utilities/render_bookdown_site][render-site] and
follow the instructions there.

[render-site]: https://github.com/datalab-dev/utilities/tree/main/render_bookdown_site

## Setup

### Git LFS

This repo uses [Git Large File Storage][git-lfs] (git LFS) for large files. If
you don't have git LFS installed, [download it][git-lfs] and run the installer.
Then in the shell (in any directory), run:

```sh
git lfs install
```

Then your one-time setup of git LFS is done. Next, clone this repo with `git
clone`. The large files will be downloaded automatically with the rest of the
repo.

[git-lfs]: https://git-lfs.github.com/

### R Packages

This repo uses [**renv**](https://rstudio.github.io/renv/) for package
management. Install **renv** according to the installation instructions on
their website.

Then open an R session at the top level of the repo and run:

```r
renv::restore()
```

This will download and install the correct versions of all the required
packages to **renv**'s package library. This is separate from your global R
package library and will not interfere with other versions of packages you have
installed.

[Back to Top](#top)