leaflet - tutorial

library(tidyverse)

Registered S3 methods overwritten by 'dbplyr':
  method         from
  print.tbl_lazy     
  print.tbl_sql      
── Attaching packages ───────────────────────────────────────────────────────────── tidyverse 1.3.2 ──✔ ggplot2 3.3.6     ✔ purrr   0.3.4
✔ tibble  3.1.7     ✔ dplyr   1.0.9
✔ tidyr   1.2.0     ✔ stringr 1.4.0
✔ readr   2.1.2     ✔ forcats 0.5.1── Conflicts ──────────────────────────────────────────────────────────────── tidyverse_conflicts() ──
✖ dplyr::filter() masks stats::filter()
✖ dplyr::lag()    masks stats::lag()

library(sf)

Linking to GEOS 3.9.1, GDAL 3.4.3, PROJ 7.2.1; sf_use_s2() is TRUE

library(leaflet)

Leaflet is a javascript library. If yoy know your way around js it goes something like this:

##This is javascript code, DO NOT RUN!

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();

You should also know to configure a CCS file and include the Leaflet library in the header section of a html file:

##This is html code, DO NOT RUN!

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

     
 ##<!-- Make sure you put this AFTER Leaflet's CSS -->
 
     <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""> </script>

Fortunately, in the html widgets for R there is a Leaflet for R that let you use most of the capabilities of Leaflet with your regular R code. To create maps with leaflet you can use data.frame objects, sf objects, raster objects and json files.

Leaflet for R is methodologically easy to use and you can get farther by exploring the arguments of the functions. A nice feature of Leaflet is that is integrated with shiny.

---

1 Rudiments

To create a leaflet object you only have to call the leaflet() function. If you have an object (think about an sf) which you want to plot you should pass it through the function as leaflet( -YourObject- ). To add layers the %>% operator is used before a new function defining a new characteristic of the map. As a background layer leaflet enables to use different maps providers with addProviderTiles or addTiles.

leaflet() %>% 
  addProviderTiles(providers$Esri.NatGeoWorldMap)

You can see the Tiles options here. In the previous map you can zoom in and zoom out all around the world. You can set the specific view you want with the setView() function as in the following examples where the maps are centred in Plaza de la indepencia (Montevideo, Uruguay)

leaflet() %>% 
  addProviderTiles(providers$Esri.NatGeoWorldMap) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 8)

leaflet() %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16)

Of course, the main benefit of using leaflet is getting your own data into the map. You can add a marker with addMarkers and specifying the long and lat arguments

leaflet() %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16) %>% 
  addMarkers(-56.199735, -34.906543)

You can even assign a pop-up by setting the popup argument.

leaflet() %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16) %>% 
  addMarkers(-56.199735, -34.906543, popup = "Plaza Independencia")

Add many more markers can be a matter of calling the addMarker function multiple times.

leaflet() %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16) %>% 
  addMarkers(-56.199735, -34.906543, popup = "Plaza Independencia") %>% 
  addMarkers(-56.198309, -34.906563, popup = "Palacio Salvo")

Off course, it does not make sense to add geographic information one by one; rather, a better option is give to the function an object and automatically plot all the markers.

Sites <- data.frame(longitud = c(-56.199735, -56.198309, -56.201037), 
                    lattitud = c(-34.906543, -34.906563, -34.907896), 
                    Name = c("Plaza Independencia", "Palacio Salvo", "Teatro Solis"))

leaflet(Sites) %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16) %>% 
  addMarkers(lng = ~longitud, lat = ~lattitud, popup = ~Name)

NA

In the last example we configured our data in the leaflet() function, but is also possible to do it in the addMarkers() function. What do you think is the difference?

leaflet() %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16) %>% 
  addMarkers(data = Sites, lng = ~longitud, lat = ~lattitud, popup = ~Name)

A marker can also be a circle:

leaflet() %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16) %>% 
  addCircleMarkers(data = Sites, lng = ~longitud, lat = ~lattitud)

---

2 Points and Circles

But is time to plot more natural “geometric-vectorial” elements as a circle (addCircles())

leaflet() %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16) %>% 
  addCircles(data = Sites, lng = ~longitud, lat = ~lattitud,
                   radius = 100)

What is the difference among addCircleMarker() and addCircle().?

leaflet() %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16) %>% 
  addCircles(data = Sites, lng = ~longitud, lat = ~lattitud,
                   radius = 100, opacity = 1, fillOpacity = 1)

Within the arguments of the function there are option to set elements like the radius, the opacity or the colour.

leaflet() %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  setView(lng = -56.199735, lat = -34.906543, zoom = 16) %>% 
  addCircles(data = Sites, lng = ~longitud, lat = ~lattitud,
                   radius = 100, opacity = 1, fillOpacity = 0.7, color = "black", fillColor = "green")

---

3 Using our shapes

Uruguay <- st_read("Montevideo_Data/Vectoriales_2011/ine_depto.shp")

Reading layer `ine_depto' from data source 
  `C:\Users\Orlan\Dropbox\Teaching\SpatialAnalysis\Tutorials\03_MapMaking\Montevideo_Data\Vectoriales_2011\ine_depto.shp' 
  using driver `ESRI Shapefile'
Simple feature collection with 20 features and 5 fields
Geometry type: MULTIPOLYGON
Dimension:     XY
Bounding box:  xmin: 366582.2 ymin: 6127919 xmax: 858252.1 ymax: 6671738
CRS:           NA

#ine_depto.shp

Accidents <- st_read("Montevideo_Data/Accidentes2006-2010/accidentes2006-2010.shp")

Reading layer `accidentes2006-2010' from data source 
  `C:\Users\Orlan\Dropbox\Teaching\SpatialAnalysis\Tutorials\03_MapMaking\Montevideo_Data\Accidentes2006-2010\accidentes2006-2010.shp' 
  using driver `ESRI Shapefile'
Simple feature collection with 41121 features and 7 fields
Geometry type: POINT
Dimension:     XY
Bounding box:  xmin: 558003.5 ymin: 6134508 xmax: 588206.1 ymax: 6157857
CRS:           NA

Uruguay = st_set_crs(Uruguay, 32721)
Accidents = st_set_crs(Accidents, 32721)

Uruguay <- st_transform(Uruguay,4326)
Accidents = st_transform(Accidents, 4326)

Intuitively, perhaps you already know that to get our Uruguay map we only need to use the leaflet() function, pass the sf object and then use the specific function to create areas. This function is addPolygons().

leaflet(Uruguay) %>% 
  addPolygons()

And then again, a tile can provide some context to your map.

leaflet(Uruguay) %>% 
  addProviderTiles(providers$CartoDB.Positron) %>% 
  addPolygons()

leaflet(Uruguay) %>% 
  addProviderTiles(providers$Stamen.Watercolor) %>% 
  addPolygons()

leaflet(Uruguay) %>% 
  addProviderTiles(providers$Stamen.Watercolor) %>% 
  addPolygons(color = "black", weight = 2, fillColor = "white")

A taste of the power of Leaflet is in highlighting the polygons of the shape and perform some operations.

leaflet(Uruguay) %>% 
  addProviderTiles(providers$Stamen.Watercolor) %>% 
  addPolygons(color = "black", weight = 2, fillColor = "white", fillOpacity = 1,
              highlightOptions = highlightOptions(color = "blue", fillColor = "blue", 
                                                  weight = 0, bringToFront = TRUE))

leaflet(Uruguay) %>% 
  addProviderTiles(providers$Stamen.Watercolor) %>% 
  addPolygons(color = "black", weight = 2, fillColor = "white", fillOpacity = 1,
              label = ~NOMBRE, labelOptions = labelOptions(
                style = list("font-weight" = "normal"), 
                textsize = "10px"),
              highlightOptions = highlightOptions(color = "blue", fillColor = "blue", 
                                                  weight = 0, bringToFront = TRUE))

After you get used to leaflet you realize that is easy to create awesome maps. You may struggle a little with the inside function-arguments and probably will iterate a few times, but you will get it done.

#source: https://rstudio.github.io/leaflet/choropleths.html &
# From http://leafletjs.com/examples/choropleth/us-states.js

#install.packages("geojsonio")

#states <- geojsonio::geojson_read("json/us-states.geojson", what = "sp")
#see: https://github.com/rstudio/leaflet/issues/498

states <- geojsonio::geojson_read( 
        x = "https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json"
        , what = "sp"
    )


bins <- c(0, 10, 20, 50, 100, 200, 500, 1000, Inf)
pal <- colorBin("YlOrRd", domain = states$density, bins = bins)

labels <- sprintf(
  "<strong>%s</strong><br/>%g people / mi<sup>2</sup>",
  states$name, states$density
) %>% lapply(htmltools::HTML)

leaflet(states) %>%
  setView(-96, 37.8, 4) %>%
  addProviderTiles("MapBox", options = providerTileOptions(
    id = "mapbox.light",
    accessToken = Sys.getenv('MAPBOX_ACCESS_TOKEN'))) %>%
  addPolygons(
    fillColor = ~pal(density),
    weight = 2,
    opacity = 1,
    color = "white",
    dashArray = "3",
    fillOpacity = 0.7,
    highlight = highlightOptions(
      weight = 5,
      color = "#666",
      dashArray = "",
      fillOpacity = 0.7,
      bringToFront = TRUE),
    label = labels,
    labelOptions = labelOptions(
      style = list("font-weight" = "normal", padding = "3px 8px"),
      textsize = "15px",
      direction = "auto")) %>%
  addLegend(pal = pal, values = ~density, opacity = 0.7, title = NULL,
    position = "bottomright")

NA
NA

Accidents2009 <- Accidents %>% filter(ANIO == "2009")
leaflet(Accidents2009) %>% 
  addProviderTiles(providers$CartoDB.Positron) %>% 
  addCircles()