class: center, middle, inverse, title-slide # A leaflet flipbook ### Gina Reynolds, June 2019 --- # Introduction Leaflet is an open source JavaScript library for embedding custom interactive maps. Leaflet for R "makes it easy to create Leaflet maps from R." There is a really helpful [website]( https://rstudio.github.io/leaflet/) introducing this package. And this [flipbook](https://github.com/EvaMaeRey/little_flipbooks_library) draws a lot from its examples, and is intended to further clarify in-between steps. Leaflet is definitely a fun package to explore! --- ```r # Load leaflet R package library(leaflet) # This flipbook was created w/ xaringan reveal functions: source(file = "https://raw.githubusercontent.com/EvaMaeRey/little_flipbooks_library/master/xaringan_reveal_parenthetical.R") ``` --- # Discover Auckland (Birthplace of R)
--- class: split-40 count: false .column[.content[ ```r *leaflet() ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% * addTiles() # Add default OpenStreetMap map tiles ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% addTiles() %>% # Add default OpenStreetMap map tiles * addMarkers(lng = 174.768, * lat = -36.852, * popup = "The birthplace of R") ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% addTiles() %>% # Add default OpenStreetMap map tiles addMarkers(lng = 174.768, lat = -36.852, popup = "The birthplace of R") %>% * setView(lng = 174.768, * lat = -36.852, * zoom = 4) ``` ]] .column[.content.center[
]] --- # Discover Denver - Explore the provider tiles - full opacity - Open maps seem not quite keeping up with DU construction
--- class: split-40 count: false .column[.content[ ```r *leaflet() # Leaflet map widget ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% # Leaflet map widget * addTiles() # OpenStreetMap default ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% # Leaflet map widget addTiles() %>% # OpenStreetMap default * setView(lat = 39.6774101, * lng = -104.9621703, * zoom = 15) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% # Leaflet map widget addTiles() %>% # OpenStreetMap default setView(lat = 39.6774101, lng = -104.9621703, zoom = 15) %>% * addProviderTiles(provider = * providers$OpenStreetMap.BlackAndWhite) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% # Leaflet map widget addTiles() %>% # OpenStreetMap default setView(lat = 39.6774101, lng = -104.9621703, zoom = 15) %>% addProviderTiles(provider = providers$OpenStreetMap.BlackAndWhite) %>% * addMarkers(lat = 39.6774101, * lng = -104.9621703, * popup = "University of Denver") ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% # Leaflet map widget addTiles() %>% # OpenStreetMap default setView(lat = 39.6774101, lng = -104.9621703, zoom = 15) %>% addProviderTiles(provider = providers$OpenStreetMap.BlackAndWhite) %>% addMarkers(lat = 39.6774101, lng = -104.9621703, popup = "University of Denver") %>% * addProviderTiles(provider = * providers$Stamen.Toner) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% # Leaflet map widget addTiles() %>% # OpenStreetMap default setView(lat = 39.6774101, lng = -104.9621703, zoom = 15) %>% addProviderTiles(provider = providers$OpenStreetMap.BlackAndWhite) %>% addMarkers(lat = 39.6774101, lng = -104.9621703, popup = "University of Denver") %>% addProviderTiles(provider = providers$Stamen.Toner) %>% * addProviderTiles(provider = * providers$OpenTopoMap) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% # Leaflet map widget addTiles() %>% # OpenStreetMap default setView(lat = 39.6774101, lng = -104.9621703, zoom = 15) %>% addProviderTiles(provider = providers$OpenStreetMap.BlackAndWhite) %>% addMarkers(lat = 39.6774101, lng = -104.9621703, popup = "University of Denver") %>% addProviderTiles(provider = providers$Stamen.Toner) %>% addProviderTiles(provider = providers$OpenTopoMap) %>% * addCircles(lat = 39.6774101, * lng = -104.9621703, * radius = 500, * color = "orange", * fillColor = "red") ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% # Leaflet map widget addTiles() %>% # OpenStreetMap default setView(lat = 39.6774101, lng = -104.9621703, zoom = 15) %>% addProviderTiles(provider = providers$OpenStreetMap.BlackAndWhite) %>% addMarkers(lat = 39.6774101, lng = -104.9621703, popup = "University of Denver") %>% addProviderTiles(provider = providers$Stamen.Toner) %>% addProviderTiles(provider = providers$OpenTopoMap) %>% addCircles(lat = 39.6774101, lng = -104.9621703, radius = 500, color = "orange", fillColor = "red") %>% * setView(lat = 39.6774101, * lng = -104.9621703, * zoom = 8) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% # Leaflet map widget addTiles() %>% # OpenStreetMap default setView(lat = 39.6774101, lng = -104.9621703, zoom = 15) %>% addProviderTiles(provider = providers$OpenStreetMap.BlackAndWhite) %>% addMarkers(lat = 39.6774101, lng = -104.9621703, popup = "University of Denver") %>% addProviderTiles(provider = providers$Stamen.Toner) %>% addProviderTiles(provider = providers$OpenTopoMap) %>% addCircles(lat = 39.6774101, lng = -104.9621703, radius = 500, color = "orange", fillColor = "red") %>% setView(lat = 39.6774101, lng = -104.9621703, zoom = 8) %>% * setView(lat = 39.6774101, * lng = -104.9621703, * zoom = 4) ``` ]] .column[.content.center[
]] --- # Discover Ames - a semi opaque layer - adding a rectangle ---
--- class: split-40 count: false .column[.content[ ```r *leaflet() ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% * addTiles() ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% addTiles() %>% * setView(-93.625, 42.0205, zoom = 11) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% addTiles() %>% setView(-93.625, 42.0205, zoom = 11) %>% * addRectangles( * lng1 = -93.625 - .03, lat1 = 42.0205 - .03, * lng2 = -93.625 + .03, lat2 = 42.0205 + .03, * fillColor = "transparent" * ) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r leaflet() %>% addTiles() %>% setView(-93.625, 42.0205, zoom = 11) %>% addRectangles( lng1 = -93.625 - .03, lat1 = 42.0205 - .03, lng2 = -93.625 + .03, lat2 = 42.0205 + .03, fillColor = "transparent" ) %>% * addProviderTiles(providers$OpenRailwayMap, * options = providerTileOptions(opacity = 0.75)) ``` ]] .column[.content.center[
]] --- # Discover Boston Walk-through of almost verbatim example from https://rstudio.github.io/leaflet/basemaps.html - provider lines and labels - multiple markers - weather layer - including external data --- ```r new_england <- read.csv(textConnection("City,Lat,Long,Pop Boston,42.3601,-71.0589,645966 Hartford,41.7627,-72.6743,125017 New York City,40.7127,-74.0059,8406000 Philadelphia,39.9500,-75.1667,1553000 Pittsburgh,40.4397,-79.9764,305841 Providence,41.8236,-71.4222,177994")) ```
--- class: split-40 count: false .column[.content[ ```r *new_england ``` ]] .column[.content.center[ ``` ## City Lat Long Pop ## 1 Boston 42.3601 -71.0589 645966 ## 2 Hartford 41.7627 -72.6743 125017 ## 3 New York City 40.7127 -74.0059 8406000 ## 4 Philadelphia 39.9500 -75.1667 1553000 ## 5 Pittsburgh 40.4397 -79.9764 305841 ## 6 Providence 41.8236 -71.4222 177994 ``` ]] --- class: split-40 count: false .column[.content[ ```r new_england %>% *leaflet() ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r new_england %>% leaflet() %>% * addProviderTiles(providers$MtbMap) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r new_england %>% leaflet() %>% addProviderTiles(providers$MtbMap) %>% * setView(lng = -71.0589, lat = 42.3601, * zoom = 12) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r new_england %>% leaflet() %>% addProviderTiles(providers$MtbMap) %>% setView(lng = -71.0589, lat = 42.3601, zoom = 12) %>% * addProviderTiles(providers$Stamen.TonerLines, * options = providerTileOptions(opacity = 0.35)) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r new_england %>% leaflet() %>% addProviderTiles(providers$MtbMap) %>% setView(lng = -71.0589, lat = 42.3601, zoom = 12) %>% addProviderTiles(providers$Stamen.TonerLines, options = providerTileOptions(opacity = 0.35)) %>% * addProviderTiles(providers$Stamen.TonerLabels) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r new_england %>% leaflet() %>% addProviderTiles(providers$MtbMap) %>% setView(lng = -71.0589, lat = 42.3601, zoom = 12) %>% addProviderTiles(providers$Stamen.TonerLines, options = providerTileOptions(opacity = 0.35)) %>% addProviderTiles(providers$Stamen.TonerLabels) %>% * setView(-84, 42.0205, zoom = 4) ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r new_england %>% leaflet() %>% addProviderTiles(providers$MtbMap) %>% setView(lng = -71.0589, lat = 42.3601, zoom = 12) %>% addProviderTiles(providers$Stamen.TonerLines, options = providerTileOptions(opacity = 0.35)) %>% addProviderTiles(providers$Stamen.TonerLabels) %>% setView(-84, 42.0205, zoom = 4) %>% * addWMSTiles(baseUrl = "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", * layers = "nexrad-n0r-900913", * options = WMSTileOptions(format = "image/png", * transparent = TRUE), * attribution = "Weather data © 2012 IEM Nexrad") ``` ]] .column[.content.center[
]] --- class: split-40 count: false .column[.content[ ```r new_england %>% leaflet() %>% addProviderTiles(providers$MtbMap) %>% setView(lng = -71.0589, lat = 42.3601, zoom = 12) %>% addProviderTiles(providers$Stamen.TonerLines, options = providerTileOptions(opacity = 0.35)) %>% addProviderTiles(providers$Stamen.TonerLabels) %>% setView(-84, 42.0205, zoom = 4) %>% addWMSTiles(baseUrl = "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", layers = "nexrad-n0r-900913", options = WMSTileOptions(format = "image/png", transparent = TRUE), attribution = "Weather data © 2012 IEM Nexrad") %>% * addCircles(lng = ~ Long, lat = ~ Lat, * weight = 1, * radius = ~ sqrt(Pop) * 30, * popup = ~ City, color = "red") %>% * addMarkers(lng = ~ Long, lat = ~ Lat) ``` ]] .column[.content.center[
]] --- # Discover Germany - adding polygons Somehow the "flipbook" function `apply_reveal()` failed here. Nevertheless, I'm including the code and the complete result. ```r download.file("https://www.bundeswahlleiter.de/dam/jcr/f92e42fa-44f1-47e5-b775-924926b34268/btw17_geometrie_wahlkreise_geo_shp.zip", "btw17_geometrie_wahlkreise_geo_shp.zip") unzip("btw17_geometrie_wahlkreise_geo_shp.zip") ``` ```r library(rgdal) german_districts <- readOGR(dsn = "Geometrie_Wahlkreise_19DBT_geo.shp", layer = "Geometrie_Wahlkreise_19DBT_geo") ``` ``` ## OGR data source with driver: ESRI Shapefile ## Source: "/Users/evangelinereynolds/Google Drive/work/flipbooks/leaflet/Geometrie_Wahlkreise_19DBT_geo.shp", layer: "Geometrie_Wahlkreise_19DBT_geo" ## with 299 features ## It has 4 fields ## Integer64 fields read as strings: WKR_NR ``` --- ```r german_districts %>% leaflet() %>% addTiles() %>% setView(lng = 7, lat = 50, zoom = 5) %>% addPolygons(color = "grey", weight = 1, smoothFactor = 0.5, fillOpacity = 0.25, fillColor = "blue", highlightOptions = highlightOptions(color = "white", weight = 2, bringToFront = TRUE)) -> g ``` --- ```r g ```
--- <style type="text/css"> .remark-code{line-height: 1.5; font-size: 65%} </style>