class: left, bottom background-image: url("images/contour.png") background-position: right background-size: auto # Interactive Maps in R ### Feel the need to zoom and pan. <p>&nbsp;</p> <p>&nbsp;</p> <img src="images/logo1.svg" width="400px"> --- class: sectionTitle # A Brief `join` interlude. --- # Multi-Table Data Rarely do we keep our data within a single data table. .pull-left[ #### Table Structure Consider the two tables to the right. - Common column labeled *Key* - Other data columns (only 1 in each for brevity) ] .pull-right[] --- # Varieties of Keys 🗝 .pull-left[### Primary Key A *primary key* is a column in a table that uniquely identifies a single row. There MUST be a unique identifier to be a *Primary Key*. ```r Key = c("A","B","C") Name = c("Bob","Alice","Mary") Major = c("ENVS", "ENVS", "BIOL") people <- data.frame( Key, Name, Major ) people %>% count( Key ) ``` ``` ## Key n ## 1 A 1 ## 2 B 1 ## 3 C 1 ``` ] -- .pull-right[ ### Foreign Key A foreign key is one that references a primary key in *another* table. ```r Key = c("A","B","A","D","B") Grade = rpois(5,lambda = 100) homework <- data.frame( Key, Grade ) homework ``` ``` ## Key Grade ## 1 A 112 ## 2 B 104 ## 3 A 104 ## 4 D 113 ## 5 B 105 ``` Here the `Key` column is referencing a unique row of data in the `people` data table. ] --- class: sectionTitle, inverse # .green[Joins] ### .fancy[Merging data tables] --- # Taxonomy of Joins We can combine the data in these tables in several different ways based upon what we are looking for. When thinking of joins, we must think about the how we want to select the overlapping sets of keys in both data.frames. - *Full Join* (aka *outer join*) - *Left Join* - *Right Join* - *Inner Join* &nbsp; The .redinline[*position*] adjective relates to which of the rows are selected for the join and end up in the resutling data table. --- # 'Left' & 'Right' Tables .center[  ] --- # Full/Outer Join The outer join has .redinline[all the data from both left & right tables]. All keys are present in the result.  --- # Outer Join All homework and people data. ```r people %>% full_join( homework, by="Key" ) ``` ``` ## Key Name Major Grade ## 1 A Bob ENVS 112 ## 2 A Bob ENVS 104 ## 3 B Alice ENVS 104 ## 4 B Alice ENVS 105 ## 5 C Mary BIOL NA ## 6 D <NA> <NA> 113 ``` --- # Left Join The left join is one where the result has all the keys from the left but only those in the right one that are in the left.  -- ```r people %>% left_join( homework, by="Key") ``` ``` ## Key Name Major Grade ## 1 A Bob ENVS 112 ## 2 A Bob ENVS 104 ## 3 B Alice ENVS 104 ## 4 B Alice ENVS 105 ## 5 C Mary BIOL NA ``` --- # Right Join The Right join results in all the keys from the right data table and the matching ones from the left. .center[  ] -- ```r people %>% right_join( homework, by="Key") ``` ``` ## Key Name Major Grade ## 1 A Bob ENVS 112 ## 2 A Bob ENVS 104 ## 3 B Alice ENVS 104 ## 4 B Alice ENVS 105 ## 5 D <NA> <NA> 113 ``` --- # Inner Joins Inner joins result in the intersection of keys.  -- ```r people %>% inner_join( homework, by="Key") ``` ``` ## Key Name Major Grade ## 1 A Bob ENVS 112 ## 2 A Bob ENVS 104 ## 3 B Alice ENVS 104 ## 4 B Alice ENVS 105 ``` --- class: sectionTitle, inverse # .blue[Filtering Joins] ## .fancy[Not combining but refining...] --- # The Semi Join We can also use joins to filter values within one `data.frame`. Here the `semi_join()` keeps everything in the left data that has a key in the right one, but **importantly** it does not import the right data columns into the result. -- ```r people %>% semi_join( homework, by="Key") ``` ``` ## Key Name Major ## 1 A Bob ENVS ## 2 B Alice ENVS ``` --- # The Anti Join The opposite of the `seim_join()` is the `anti_join()` which drops everything in the left table that has a key in the right one, leaving only the ones that are unique. -- ```r people %>% anti_join( homework, by = "Key") ``` ``` ## Key Name Major ## 1 C Mary BIOL ``` --- # Activity - Joining Field & GIS Data Create a new script file named `joins.R` and join average station measurements onto the `GIS_Data.csv` data set. --- class: sectionTitle # Leaflet  --- # Leaflet Library The Leaflet library is based upon javascript and is implemented in R for use in HTML output. It is essentially a Google Maps/Apple Maps interface that can be used to pipe data from R into with all the expected interactions. For this example, I'm going to use some data from my own research and let you use the `GIS_Data.csv` in the activity. --- .center[ ] .pull-left[ ### Provides: - Uniform interface - Many entry points (R, JavaScript, Python, HTML, etc.) - Variety of Map Types - Completely User Interactive ] .pull-right[ &nbsp;  ] --- # Map Making Workflow I'd make flow diagram here to go through basic steps. Define what each does in the background. 1. Get data - 2. Make base map - `leaflet()` function creates widget for map and all javascript 3. Define Region - `setVeiw()` can be used to define the `bbox()` 4. Add Tiles - `addTiles()` or `addProviderTiles()` downloads map tiles 5. Overlay Markers - `addMarkers()` make your points 6. Overlay Rasters - 7. Set Fancy Stuff - -- 8. There is no step 8 🎉 !!!!! --- class: sectionTitle, inverse # .green[Basic Map Parts] ### .fancy[The foundation parts <svg aria-hidden="true" role="img" viewBox="0 0 320 512" style="height:1em;width:0.62em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:limegreen;overflow:visible;position:relative;"><path d="M313.553 392.331L209.587 504.334c-9.485 10.214-25.676 10.229-35.174 0L70.438 392.331C56.232 377.031 67.062 352 88.025 352H152V80H68.024a11.996 11.996 0 0 1-8.485-3.515l-56-56C-4.021 12.926 1.333 0 12.024 0H208c13.255 0 24 10.745 24 24v328h63.966c20.878 0 31.851 24.969 17.587 40.331z"/></svg>] --- # The Base Map .pull-left[ Just like `ggplot()`, calling `leaflet()` just creates a viewport into which we need to add information. ```r leaflet() ``` ] .pull-right[ <div id="htmlwidget-7c7900f5e35760d19252" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-7c7900f5e35760d19252">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}}},"evals":[],"jsHooks":[]}</script> ] --- # Adding Default Tiles .pull-left[ Tiles are essentially static images of a specified geographic size. As you "zoom" in (+ & - buttons) a new set of images are fetched from a tile provider for that scale. Here we can add default tiles (these come from OpenStreetMap). ```r leaflet() %>% addTiles() ``` ] .pull-right[ <div id="htmlwidget-4202eb33c1cedbecd20a" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-4202eb33c1cedbecd20a">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}]},"evals":[],"jsHooks":[]}</script> ] --- # Setting a Boundary ViewPort .pull-left[ We can specify a particular bounding box for our viewport to focus on. This is based upon a point to be taken as a centroid as well as a pre-defined zoom level. ```r leaflet() %>% addTiles() %>% setView(lng = -77.5, lat = 37.5, zoom = 10) ``` ] .pull-right[ <div id="htmlwidget-1b316aec39746606155f" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-1b316aec39746606155f">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}],"setView":[[37.5,-77.5],10,[]]},"evals":[],"jsHooks":[]}</script> ] --- # Tile Providers There are some really interesting Tile Providers that we can use by replacing ```r addTiles() ``` with ```r addProviderTiles( providers$Name ) ``` where `Name` can be any of the items found [here](http://leaflet-extras.github.io/leaflet-providers/preview/index.html) .red[<-- click on this] --- # Example Provider Tiles - OpenTopoMap <div id="htmlwidget-fa5735b95d673abfdcc1" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-fa5735b95d673abfdcc1">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"setView":[[37.5,-77.5],6,[]],"calls":[{"method":"addProviderTiles","args":["OpenTopoMap",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]}]},"evals":[],"jsHooks":[]}</script> --- # Example Provider Tiles - ESRI World Topo <div id="htmlwidget-85a42f1427c5f652fc7e" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-85a42f1427c5f652fc7e">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"setView":[[37.5,-77.5],6,[]],"calls":[{"method":"addProviderTiles","args":["Esri.WorldTopoMap",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]}]},"evals":[],"jsHooks":[]}</script> --- # Example Provider Tiles - Watercolor <div id="htmlwidget-6f2c2eb2db033b2e734f" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-6f2c2eb2db033b2e734f">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"setView":[[37.5,-77.5],6,[]],"calls":[{"method":"addProviderTiles","args":["Stamen.Watercolor",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]}]},"evals":[],"jsHooks":[]}</script> --- # Example Provider Tiles - ESRI Satelite <div id="htmlwidget-a3c44c5d4fdf9ed3a67f" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-a3c44c5d4fdf9ed3a67f">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"setView":[[37.5,-77.5],6,[]],"calls":[{"method":"addProviderTiles","args":["Esri.WorldImagery",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]}]},"evals":[],"jsHooks":[]}</script> --- # Example Provider Tiles - ESRI World Shaded Relief <div id="htmlwidget-b858b908ae558e5171fb" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-b858b908ae558e5171fb">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"setView":[[37.5,-77.5],6,[]],"calls":[{"method":"addProviderTiles","args":["Esri.WorldShadedRelief",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]}]},"evals":[],"jsHooks":[]}</script> --- # Example Provider Tiles - Earth At Night <div id="htmlwidget-5ac1ee9c55a2de1c812b" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-5ac1ee9c55a2de1c812b">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"setView":[[37.5,-77.5],6,[]],"calls":[{"method":"addProviderTiles","args":["NASAGIBS.ViirsEarthAtNight2012",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]}]},"evals":[],"jsHooks":[]}</script> --- # Example Provider Tiles - NASA Daily Composite Imagry <div id="htmlwidget-62f81ef531f44959ba0d" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-62f81ef531f44959ba0d">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"setView":[[37.5,-77.5],6,[]],"calls":[{"method":"addProviderTiles","args":["NASAGIBS.ModisTerraTrueColorCR",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]}]},"evals":[],"jsHooks":[]}</script> --- .pull-left[ # Combining Tiles Tile providers also make available various labels to put on the map. You can get access to these as another provider layer and overlay them ontop of the map. ```r provider <- providers$Stamen.Watercolor labels <- providers$CartoDB.VoyagerOnlyLabels leaflet() %>% setView(lng = -77.5, lat = 37.5, zoom = 6) %>% addProviderTiles(provider) %>% addProviderTiles(labels) ``` ] .pull-right[ &nbsp; <div id="htmlwidget-361166d56007a988d56b" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-361166d56007a988d56b">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"setView":[[37.5,-77.5],6,[]],"calls":[{"method":"addProviderTiles","args":["Stamen.Watercolor",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addProviderTiles","args":["CartoDB.VoyagerOnlyLabels",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]}]},"evals":[],"jsHooks":[]}</script> ] --- class: sectionTitle, inverse # .green[Adding Data] ### .fancy[Increasing Information Content] --- # The Data To add components to the leaflet map, you need to get the data up and ready. For this, we'll go back to the enigmatic Bark Beetle data set. ```r library( sf ) library( tidyverse ) url <- "https://raw.githubusercontent.com/dyerlab/ENVS-Lectures/master/data/Araptus_Disperal_Bias.csv" read.csv(url) %>% st_as_sf( coords=c("Longitude","Latitude"), crs=4326 ) -> beetles head( beetles, n=3 ) ``` ``` ## Simple feature collection with 3 features and 7 fields ## Geometry type: POINT ## Dimension: XY ## Bounding box: xmin: -112.0461 ymin: 24.00789 xmax: -109.327 ymax: 26.94589 ## Geodetic CRS: WGS 84 ## Site Males Females Suitability MFRatio GenVarArapat GenVarEuphli ## 1 32 40 27 0.0563 1.4815 0.1436067 0.2185199 ## 2 73 11 5 0.1455 2.2000 0.1373044 0.2534679 ## 3 93 25 21 0.1627 1.1905 0.1630808 0.1325203 ## geometry ## 1 POINT (-109.327 26.63783) ## 2 POINT (-109.8507 24.00789) ## 3 POINT (-112.0461 26.94589) ``` --- # Data for `leaflet` Both `leaflet()` and each map layer have a data = parameter. Spatial data can be in the form of: - `dataframe` with lat/lng columns - `sp` objects - `sf` objects - `maps` package `map()` objects Data can be passed through the `leaflet()` function or through the map layers. --- .pull-left[ # Shapes (Circles, Lines & Polygons) Leaflet will take the extent of the points and try to find a proper zoom and extent so that each point is shown. ```r leaflet() %>% addTiles() %>% addCircles( data=beetles ) ``` Note: Circles scale with the map ] .pull-right[ &nbsp; &nbsp; <div id="htmlwidget-7e9c3a2b3f0e1d904155" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-7e9c3a2b3f0e1d904155">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]},{"method":"addCircles","args":[[26.63783,24.00789,26.94589,25.0247,27.52944,29.32541,28.66056,25.91409,27.0367,25.60521,26.20876,27.3632,27.18232,27.40498,28.96651,28.03661,25.34819,28.72796,24.87611,24.2115,28.22308,25.55757,28.40846,29.01457,27.2028,24.21441,23.2855,24.13389,24.58843,24.0195,26.0155],[-109.327,-109.85071,-112.04613,-111.675,-113.31609,-114.29353,-113.99141,-112.08062,-112.986,-111.32638,-111.37833,-112.964,-112.66552,-112.52959,-113.66787,-113.39991,-111.60056,-113.48973,-110.69175,-110.951,-113.18263,-111.21563,-112.86985,-113.94486,-112.408,-110.27252,-110.10429,-110.46236,-110.74599,-110.096,-111.35475],10,null,null,{"interactive":true,"className":"","stroke":true,"color":"#03F","weight":5,"opacity":0.5,"fill":true,"fillColor":"#03F","fillOpacity":0.2},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> ] --- .pull-left[ # Map Circles - size We can easily associate features on the map based upon data being passed in. Here I take the count of male beetles from each site (and scale it for visual appeal) to show spatail variation in demograhic parameters. &nbsp; ```r leaflet(beetles) %>% addTiles() %>% addCircles( radius = ~Males *500, stroke = FALSE, fillOpacity = .5) ``` ] .pull-right[ &nbsp; &nbsp; <div id="htmlwidget-a4dfb4ebac4cbbf732e6" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-a4dfb4ebac4cbbf732e6">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]},{"method":"addCircles","args":[[26.63783,24.00789,26.94589,25.0247,27.52944,29.32541,28.66056,25.91409,27.0367,25.60521,26.20876,27.3632,27.18232,27.40498,28.96651,28.03661,25.34819,28.72796,24.87611,24.2115,28.22308,25.55757,28.40846,29.01457,27.2028,24.21441,23.2855,24.13389,24.58843,24.0195,26.0155],[-109.327,-109.85071,-112.04613,-111.675,-113.31609,-114.29353,-113.99141,-112.08062,-112.986,-111.32638,-111.37833,-112.964,-112.66552,-112.52959,-113.66787,-113.39991,-111.60056,-113.48973,-110.69175,-110.951,-113.18263,-111.21563,-112.86985,-113.94486,-112.408,-110.27252,-110.10429,-110.46236,-110.74599,-110.096,-111.35475],[20000,5500,12500,9000,11000,11500,24500,9500,32000,8000,23500,13000,12000,24000,6500,9000,4500,6500,9500,10500,19000,14000,9500,5500,28500,9000,6000,17500,8000,13000,5500],null,null,{"interactive":true,"className":"","stroke":false,"color":"#03F","weight":5,"opacity":0.5,"fill":true,"fillColor":"#03F","fillOpacity":0.5},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> ] --- .pull-left[ # Map Color You can specify the color palette for the plots. Here we use one going from Red to Blu along a numeric gradient and use the Male:Female sex ratio of the site interpret the fill color. ```r pal <- colorNumeric( palette = "RdBu", domain = beetles$MFRatio, reverse = TRUE ) leaflet(beetles) %>% addTiles() %>% addCircles(color = ~pal(MFRatio), fillOpacity = .7, radius = 15000, stroke = FALSE) ``` ] .pull-right[ &nbsp; &nbsp; <div id="htmlwidget-5155ec7dfdfbd4b82f05" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-5155ec7dfdfbd4b82f05">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]},{"method":"addCircles","args":[[26.63783,24.00789,26.94589,25.0247,27.52944,29.32541,28.66056,25.91409,27.0367,25.60521,26.20876,27.3632,27.18232,27.40498,28.96651,28.03661,25.34819,28.72796,24.87611,24.2115,28.22308,25.55757,28.40846,29.01457,27.2028,24.21441,23.2855,24.13389,24.58843,24.0195,26.0155],[-109.327,-109.85071,-112.04613,-111.675,-113.31609,-114.29353,-113.99141,-112.08062,-112.986,-111.32638,-111.37833,-112.964,-112.66552,-112.52959,-113.66787,-113.39991,-111.60056,-113.48973,-110.69175,-110.951,-113.18263,-111.21563,-112.86985,-113.94486,-112.408,-110.27252,-110.10429,-110.46236,-110.74599,-110.096,-111.35475],15000,null,null,{"interactive":true,"className":"","stroke":false,"color":["#FBE8DE","#67001F","#C0DCEB","#FAC0A5","#FAEBE2","#DBEAF2","#66A7CE","#1D5EA1","#77B2D4","#367EB9","#F7B293","#FAC4AA","#ADD2E6","#E8F0F4","#2469AD","#569DC8","#3178B5","#FAC4AA","#BEDBEB","#70ADD1","#64A5CD","#A4CEE3","#053061","#9CCAE1","#F5F6F7","#124882","#E8F0F4","#3881BA","#3E8BBF","#3A85BC","#CCE2EE"],"weight":5,"opacity":0.5,"fill":true,"fillColor":["#FBE8DE","#67001F","#C0DCEB","#FAC0A5","#FAEBE2","#DBEAF2","#66A7CE","#1D5EA1","#77B2D4","#367EB9","#F7B293","#FAC4AA","#ADD2E6","#E8F0F4","#2469AD","#569DC8","#3178B5","#FAC4AA","#BEDBEB","#70ADD1","#64A5CD","#A4CEE3","#053061","#9CCAE1","#F5F6F7","#124882","#E8F0F4","#3881BA","#3E8BBF","#3A85BC","#CCE2EE"],"fillOpacity":0.7},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> ] --- .pull-left[ # Legends All graphics are better if there is a legend to help guide the viewer in interpreting what they are looking at. ```r pal <- colorNumeric( palette = "RdBu", domain = beetles$MFRatio, reverse = TRUE) leaflet(beetles) %>% addProviderTiles(providers$CartoDB.Positron) %>% addCircles( fillColor = ~pal(MFRatio), fillOpacity = .7, radius = 15000, weight = 1, color = "grey") %>% addLegend(pal = pal, values = ~MFRatio, title = "Male to Female Ratio") ``` ] .pull-right[ &nbsp; <div id="htmlwidget-65bd74d8a8087a177c16" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-65bd74d8a8087a177c16">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["CartoDB.Positron",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addCircles","args":[[26.63783,24.00789,26.94589,25.0247,27.52944,29.32541,28.66056,25.91409,27.0367,25.60521,26.20876,27.3632,27.18232,27.40498,28.96651,28.03661,25.34819,28.72796,24.87611,24.2115,28.22308,25.55757,28.40846,29.01457,27.2028,24.21441,23.2855,24.13389,24.58843,24.0195,26.0155],[-109.327,-109.85071,-112.04613,-111.675,-113.31609,-114.29353,-113.99141,-112.08062,-112.986,-111.32638,-111.37833,-112.964,-112.66552,-112.52959,-113.66787,-113.39991,-111.60056,-113.48973,-110.69175,-110.951,-113.18263,-111.21563,-112.86985,-113.94486,-112.408,-110.27252,-110.10429,-110.46236,-110.74599,-110.096,-111.35475],15000,null,null,{"interactive":true,"className":"","stroke":true,"color":"grey","weight":1,"opacity":0.5,"fill":true,"fillColor":["#FBE8DE","#67001F","#C0DCEB","#FAC0A5","#FAEBE2","#DBEAF2","#66A7CE","#1D5EA1","#77B2D4","#367EB9","#F7B293","#FAC4AA","#ADD2E6","#E8F0F4","#2469AD","#569DC8","#3178B5","#FAC4AA","#BEDBEB","#70ADD1","#64A5CD","#A4CEE3","#053061","#9CCAE1","#F5F6F7","#124882","#E8F0F4","#3881BA","#3E8BBF","#3A85BC","#CCE2EE"],"fillOpacity":0.7},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]},{"method":"addLegend","args":[{"colors":["#053061 , #063264 0.386004233594826%, #2D72B3 12.8377537043955%, #70ADD1 25.2895031751961%, #C3DEEC 37.7412526459968%, #F7F6F6 50.1930021167974%, #FCCDB4 62.6447515875981%, #E58266 75.0965010583987%, #BB2F33 87.5482505291994%, #67001F 100%, #67001F "],"labels":["0.6","0.8","1.0","1.2","1.4","1.6","1.8","2.0","2.2"],"na_color":null,"na_label":"NA","opacity":0.5,"position":"topright","type":"numeric","title":"Male to Female Ratio","extra":{"p_1":0.00386004233594826,"p_n":1},"layerId":null,"className":"info legend","group":null}]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> ] --- .pull-left[ # Map Markers Instead of shapes, we can use the enigmatic map marker to denote location. These are invariant of zoom level. ```r leaflet() %>% addTiles() %>% addMarkers( data=beetles ) ``` ] .pull-right[ &nbsp; &nbsp; <div id="htmlwidget-9a68ab31a7946a01f763" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-9a68ab31a7946a01f763">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]},{"method":"addMarkers","args":[[26.63783,24.00789,26.94589,25.0247,27.52944,29.32541,28.66056,25.91409,27.0367,25.60521,26.20876,27.3632,27.18232,27.40498,28.96651,28.03661,25.34819,28.72796,24.87611,24.2115,28.22308,25.55757,28.40846,29.01457,27.2028,24.21441,23.2855,24.13389,24.58843,24.0195,26.0155],[-109.327,-109.85071,-112.04613,-111.675,-113.31609,-114.29353,-113.99141,-112.08062,-112.986,-111.32638,-111.37833,-112.964,-112.66552,-112.52959,-113.66787,-113.39991,-111.60056,-113.48973,-110.69175,-110.951,-113.18263,-111.21563,-112.86985,-113.94486,-112.408,-110.27252,-110.10429,-110.46236,-110.74599,-110.096,-111.35475],null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},null,null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> ] --- .pull-left[ # Annotations In addition to the symbology, we can define a wide range of content to be associated with each marker. Here is an example of a static annotation. ```r leaflet(beetles) %>% addProviderTiles(providers$CartoDB.Positron) %>% setView(lng = -111, lat = 25, zoom = 7) %>% addPopups(lng = -111, lat = 25, paste0("beetles live here")) ``` ] .pull-right[ <div id="htmlwidget-44f3dc0ec1f69cf642b9" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-44f3dc0ec1f69cf642b9">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["CartoDB.Positron",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addPopups","args":[25,-111,"beetles live here",null,null,{"maxWidth":300,"minWidth":50,"autoPan":true,"keepInView":false,"closeButton":true,"className":""}]}],"setView":[[25,-111],7,[]],"limits":{"lat":[25,25],"lng":[-111,-111]}},"evals":[],"jsHooks":[]}</script> ] --- .pull-left[ # Pop-ups We can also designate a message to be shown when the user clicks on the site. Here I also add a custom icon to the marker from fontawesome. ```r makeAwesomeIcon(icon = "bug", library = "fa", markerColor = "lightgreen", iconColor = "blue") -> bug leaflet(beetle) %>% addProviderTiles(providers$CartoDB.Positron) %>% addAwesomeMarkers( icon = bug, popup = paste0( "Site:", beetles$Site)) ``` ] .pull-right[ &nbsp; <div id="htmlwidget-bda09ed32f955a24ae1b" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-bda09ed32f955a24ae1b">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["CartoDB.Positron",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addAwesomeMarkers","args":[[26.63783,24.00789,26.94589,25.0247,27.52944,29.32541,28.66056,25.91409,27.0367,25.60521,26.20876,27.3632,27.18232,27.40498,28.96651,28.03661,25.34819,28.72796,24.87611,24.2115,28.22308,25.55757,28.40846,29.01457,27.2028,24.21441,23.2855,24.13389,24.58843,24.0195,26.0155],[-109.327,-109.85071,-112.04613,-111.675,-113.31609,-114.29353,-113.99141,-112.08062,-112.986,-111.32638,-111.37833,-112.964,-112.66552,-112.52959,-113.66787,-113.39991,-111.60056,-113.48973,-110.69175,-110.951,-113.18263,-111.21563,-112.86985,-113.94486,-112.408,-110.27252,-110.10429,-110.46236,-110.74599,-110.096,-111.35475],{"icon":"bug","markerColor":"lightgreen","iconColor":"blue","spin":false,"squareMarker":false,"iconRotate":0,"font":"monospace","prefix":"fa"},null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},["Site:32","Site:73","Site:93","Site:const","Site:159","Site:88","Site:177","Site:166","Site:161","Site:64","Site:169","Site:sfran","Site:12","Site:160","Site:84","Site:89","Site:51","Site:175","Site:77","Site:163","Site:171","Site:168","Site:173","Site:9","Site:162","Site:48","Site:Aqu","Site:153","Site:75","Site:157","Site:58"],null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> ] --- # Large-ish Activity - Interactive Map Make a new R file in the same folder as the project named `leaflet_examples.R`. In this file, 1. Load in the contents of the `GIS_Data.csv` using `read_csv()` from `tidyverse`. By now, you should be getting the handle of this, make sure to import the proper libraries, including `library(leaflet)`. Name the variable you assign these data `Stations`. 2. Create a basic map with from these data with each station shown as a plain marker. 3. Add labels defined by `Sta_Desc` to that map as a popup. 4. Left join the `GIS_Data.csv` and the `Field_Data.csv` to make a single data.frame that also includes the variance in depths for each station. Use this to make a map where the size of the icon is depicted by the variation in depth for each location. --- class: middle background-image: url("images/contour.png") background-position: right background-size: auto # Any Further Questions? .center[  ]