Leaflet Maps

October 8, 2024

Leaflet Maps

Leaflet is a JavaScript library for interactive maps
Makes maps with markers and pop-ups
- Markers-shapes that show the location of something
- Pop-ups-fields that display information about a location or event
Can see information without navigating away from current view

Leaflet Map with One Marker

Code

library(leaflet)

leaflet() |>
  addTiles() |>  # Add default OpenStreetMap map tiles
  addMarkers(lng = -77.05257716288175, lat = 38.8894121430393, label = "Watergate Steps")

Your Turn

Make a leaflet map with one marker
Find the coordinates (longitude and latitude) of your high school
Or some favorite place
Enter coordinates into addMarkers() call and label the marker

05:00

Our Goal

Conflict Data

Download the data from UCDP and load.

library(readr)
library(dplyr)

ged_data <- read_csv("data/GEDEvent_v22_1.csv")

Conflict Data Wrangling

ged_yemen <- ged_data |> 
  filter(
    country_id == 678, #gw country code
    year == 2021,
    date_start < "2021-03-01", 
    where_prec < 3, # keep if certain where event occurred
    event_clarity == 1, # keep if event reporting is clear
      ) |> 
  mutate(deaths = deaths_a + deaths_b + deaths_civilians + deaths_unknown) |>
  select(event_id = id,
         country_id,
         date = date_start,
         gov_deaths = deaths_a, 
         rebel_deaths = deaths_b, 
         civilian_deaths = deaths_civilians, 
         deaths, 
         place = where_coordinates,
         latitude, 
         longitude) |>
  sf::st_as_sf(coords = c("longitude", "latitude"))

Basic Conflict Map

Code

leaflet(data = ged_yemen) |> # map points in ged_yemen data frame
  addTiles() |> # add default tile
  setView(lng = 44.1910, lat = 15.3694, zoom = 6) |> # Sana'a coordinates
  addMarkers(
    popup = ~as.character(deaths), # when user clicks, show deaths
    label = ~place # when user hovers, show town
    )

Add Awesome Icons

Code

# save icon
icon <- awesomeIcons(
  icon = "ios-close",
  iconColor = "black",
  markerColor = "red", 
  library = "ion" 
)

# Build map
leaflet(data = ged_yemen) |>   
  addTiles() |> 
  setView(lng = 44.1910, lat = 15.3694, zoom = 6) |> # Sana'a coordinates
  addAwesomeMarkers(
    icon = icon, 
    popup = ~as.character(deaths), 
    label = ~place
    )

Change Content of Popup

ged_yemen$popup_text <- sprintf(
      "Date: %s <br> 
       Total Deaths: %.0f <br> 
       Govt. Deaths: %.0f <br> 
       Rebel Deaths: %.0f <br> 
       Civilian Death: %.0f <br>",
      ged_yemen$date, 
      ged_yemen$deaths, 
      ged_yemen$gov_deaths, 
      ged_yemen$rebel_deaths,
      ged_yemen$civilian_deaths
    ) |> lapply(htmltools::HTML)

Use the New Labels

Code

leaflet(data = ged_yemen) |>  
  addTiles() |> 
  setView(lng = 44.1910, lat = 15.3694, zoom = 6) |> # Sana'a coordinates
  addAwesomeMarkers(
    icon = icon, 
    popup = ~popup_text, 
    label = ~place
    )

Add Provider Tiles

Code

leaflet(data = ged_yemen) |> # Jan and Feb  
  addProviderTiles("OpenTopoMap") |> # include name of provider here
  setView(lng = 44.1910, lat = 15.3694, zoom = 6) |> # Sana'a coordinates
  addAwesomeMarkers(
    icon = icon, 
    popup = ~popup_text, 
    label = ~place
    )

Your Turn

Load the data
Reproduce Yemen map
Then try another country