Introduction to WebMaps

class: center, middle, inverse, title-slide

.title[
# Introduction to WebMaps
]
.subtitle[
## Lesson 4: Leaflet maps with R
]
.author[
### Dr. <strong>Cyrille Médard de Chardon</strong>
]
.institute[
### <br>University of Luxembourg &<br>Luxembourg Institute of Socio-Economic Research (LISER)
]
.date[
### <br>May 8, 2023
]

---

class:

# Lesson 3

.pl[
## Agenda
- Making a Leaflet WebMap with R
- Custom base maps
]

.pr[
## Homework reminder

Class activities, homework, and assignments are due next week by the end of the day.

]

---
# Create a Leaflet WebMap with R

.pull-left[
We will quickly demonstrate how you can create a WebMap in R using the KnitR package.

Create a new Rstudio project and add the `RLeaflet.Rmd` document to it, then open it in RStudio.

You need to install the KnitR, and Rgdal packages.

This file is a **mark-down** file (the same used to create this lesson content) that allows the easy styling of text into HTML. The `R` component allows the blending of R code with HTML (or PDF and other formats). This allows you to embed a narrative for your map very easily.

To test the code simply click the `Knit` button in the toolbar above your code.

This will create an HTML file in the same location as your Rmd file.
]

.pr[
You can see the full [documentation for making WebMaps with Leaflet in R](https://rstudio.github.io/leaflet/).

The code is relatively simple and requires many of the **same inputs** as done using JS.

.ts[

```r
leaflet(width='100%') %>% 
  setView(lng=lux_lng,lat=lux_lat, zoom=9) %>% 
  addTiles() %>% 
  addMarkers(lng=points_lng, lat=points_lat, popup=popup_content)
```
]
]

---
class: inverse, center, middle, activity
# Activity 1: Create a WebMap using the R Leaflet package

.pl[
See the [resources](rsrcs/l4/lesson4.zip) for this week.

Have Knitr build the WebMap for you.

Add it to your website.
]

---
# Using a Mapbox base map

.pull-left[
## Get your Mapbox token
To get your base Mapbox map token:
- Go to [MapBox](https://www.mapbox.com/) and create an account.
- Go to your account to copy your token.
  - It should look like **pk.eyJ1Ij...yeGwQRd4m8r9mQQ**

### Like in Lesson 2
Following the [Leaflet quick-start instructions](https://leafletjs.com/examples/quick-start/#setting-up-the-map) and add your key at the line:

```js
accessToken: 'your.mapbox.access.token'
```

Remember that I provided WebMap templates in the lesson 2 [resources](rsrcs/l4/lesson4.zip).

]

.pr[
## Creating your own map style
You can customize your own map style if you would like.
- Go to [Mapbox Studio](https://studio.mapbox.com/) under the Products heading.

We will not cover that here, but be aware of it.
]

---
# Multiple data sources and styling

.pull-left[

**It's possible to add multiple data sets**

Just create the styles:
.ts[

```js
let line_style = {
    "color": "black",
    "dashArray": "4 4",
    "weight": 2
            };

let tunnel_style = {
    "color": "black", 
    "weight": 4
            };
```

let tunnel_style = {
    "color": "black", 
    "weight": 4
            };
</script>
]

Then retrieve the data.
]

.pull-right[
.ts[

```js
fetch("lines.geojson")
    .then(function(response) { return response.json(); })
    .then(function(data) {
        L.geoJSON(data, {style: line_style}).addTo(map);
});

fetch("stations.geojson")
    .then(function(response) { return response.json(); })
    .then(function(data) {
        L.geoJSON(data, {
            pointToLayer: function(point, latlng) {
                return L.marker(latlng);
                //return L.circle(latlng, 1000);
            },
            onEachFeature: function(feature, layer) {
                layer.bindPopup(feature.properties.NOM_GARE);
            }
        })
        .addTo(map);
});

fetch("tunnels.geojson")
    .then(function(response) { return response.json(); })
    .then(function(data) {
        L.geoJSON(data, {style: tunnel_style}).addTo(map);
});
```

fetch("tunnels.geojson")
    .then(function(response) { return response.json(); })
    .then(function(data) {
        L.geoJSON(data, {style: tunnel_style}).addTo(map);
});
</script>
]
]
 
---
class: inverse, center, middle, activity
# Activity 2: Create a CFL WebMap using Mapbox

.pull-left[
See the [resources](rsrcs/l4/lesson4.zip) for this week.

Use the CFL GeoJSON data to display Luxembourg's:
- Train lines
- Train stations
- Train tunnels

Use the Mapbox basemap:
- Update the tileLayer source `L.tileLayer(MAPBOX_TILE_URL, {...})`
- Update the token `accessToken: YOUR_TOKEN`
- Update the map id `id: 'mapbox/streets-v11'`
]

.pr[
The easiest option is to use the [async method](Lesson3.html) for loading multiple GeoJSON data sets to your WebMap.

**Remember this will only function when on your server**

See the previous slides for additional information.
]

---
class: inverse, center, middle, activity
# Homework and final assignment

---
# Final homework assignments WebMap

Like previous lessons your homework is to complete all activities but also reproduce what you have learned but using independent data and ideas.

.pl[
## Leaflet full feature map
You will create a WebMap of a topic of your choice.
You will create a Leaflet map that contains:
- A Mapbox basemap (of your choice)
- A legend
- An interactive info box
- A context for the map - what's the purpose of the map? The story?
- This map is worth about a **quarter** of your WebMap course-section grade
]

.pr[
Your **final homework assignment** is due .... when?  
Let's discuss.
]

---

# Homework

.pl[
## Exercises
Finish the exercises from today's lecture.
- Create the Lux Pop leaflet WebMap in R
- Create the CFL WebMapx:
  - Using a Mapbox base map and token 
  - Add a legend (tunnel, rail, station?)
]

.pull-right[
## Replication
You must create **another** Leaflet WebMap in R with **data and theme** of your choice.
  - use data/topic outside of that covered in this course.
  
## Final assignment
- Se previous slide
]

**Like all previous lessons, only homework on the server is evaluated.**

Make sure that your index page links to your individual WebMaps correctly so that they can be found.