class: left, bottom, inverse, overlay background-image: url("https://live.staticflickr.com/65535/51043989197_987f4c2af0_k_d.jpg") background-size: cover # .orange[Leaflet] ### .fancy[Making Interactive Maps that Don't Suck <svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:orange;overflow:visible;position:relative;"><path d="M0 117.66v346.32c0 11.32 11.43 19.06 21.94 14.86L160 416V32L20.12 87.95A32.006 32.006 0 0 0 0 117.66zM192 416l192 64V96L192 32v384zM554.06 33.16L416 96v384l139.88-55.95A31.996 31.996 0 0 0 576 394.34V48.02c0-11.32-11.43-19.06-21.94-14.86z"/></svg>] &nbsp; &nbsp; <img src="https://live.staticflickr.com/65535/51044006107_a029ef7cbd_o_d.png" width="640px" style="display: block; margin: auto auto auto 0;" /> --- .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[ ```r leaflet() ``` ] .pull-right[ <div id="htmlwidget-7deed4f1e9387cff96c9" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-7deed4f1e9387cff96c9">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}}},"evals":[],"jsHooks":[]}</script> ] --- # Adding Default Tiles Open Street Map .pull-left[ ```r leaflet() %>% setView(lng = -77.5, lat = 37.5, zoom = 10) %>% addTiles() ``` ] .pull-right[ <div id="htmlwidget-9dd6e6d5db9ca060b556" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-9dd6e6d5db9ca060b556">{"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[ ```r leaflet() %>% addTiles() %>% setView(lng = -77.5, lat = 37.5, zoom = 10) ``` ] .pull-right[ <div id="htmlwidget-2e125bc5cddb90ed2842" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-2e125bc5cddb90ed2842">{"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) .redinline[ <-- click on this] --- # Example Provider Tiles - OpenTopoMap <div id="htmlwidget-8ddb835740ffc10f5f82" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-8ddb835740ffc10f5f82">{"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-51ca0389f1892d244a89" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-51ca0389f1892d244a89">{"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-e001a42793aa7881cea0" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-e001a42793aa7881cea0">{"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-a0c8e9bd7be0f7903435" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-a0c8e9bd7be0f7903435">{"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-9eea22f1479e57bc6eaf" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-9eea22f1479e57bc6eaf">{"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-f7617eabb54955e9f688" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-f7617eabb54955e9f688">{"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-c20a297f045c7924de5e" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-c20a297f045c7924de5e">{"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> --- # Example Provider Tiles - Combining Tiles .pull-left[ ```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[ <div id="htmlwidget-9a1b0f56f03061eefc8c" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-9a1b0f56f03061eefc8c">{"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 ) ``` ``` ## Simple feature collection with 6 features and 7 fields ## Geometry type: POINT ## Dimension: XY ## Bounding box: xmin: -114.2935 ymin: 24.00789 xmax: -109.327 ymax: 29.32541 ## Geodetic CRS: WGS 84 ## Site Males Females Suitability MFRatio GenVarArapat GenVarEuphli ## 1 32 40 27 0.0563 1.4815 0.1436067 0.21851990 ## 2 73 11 5 0.1455 2.2000 0.1373044 0.25346790 ## 3 93 25 21 0.1627 1.1905 0.1630808 0.13252030 ## 4 const 18 11 0.1744 1.6364 0.2803589 0.23475780 ## 5 159 22 15 0.1880 1.4667 0.1598019 0.08087207 ## 6 88 23 18 0.2186 1.2778 0.2661293 0.17557170 ## geometry ## 1 POINT (-109.327 26.63783) ## 2 POINT (-109.8507 24.00789) ## 3 POINT (-112.0461 26.94589) ## 4 POINT (-111.675 25.0247) ## 5 POINT (-113.3161 27.52944) ## 6 POINT (-114.2935 29.32541) ``` --- # 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) ```r leaflet() %>% addTiles() %>% addCircles( data=beetles ) ``` Note: Circles scale with the map ] .pull-right[ &nbsp; &nbsp; <div id="htmlwidget-8347900e63b3ad3ad2fc" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-8347900e63b3ad3ad2fc">{"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 ```r leaflet(beetles) %>% addTiles() %>% addCircles( radius = ~Males *500, stroke = FALSE, fillOpacity = .5) ``` Note: The `beetles` are put in the `leaflet` call (just like `ggplot()`) so that we can access the `Males` column of data. ] .pull-right[ &nbsp; &nbsp; <div id="htmlwidget-d3a6a909eec350f9e45e" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-d3a6a909eec350f9e45e">{"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 Circles - color ```r pal <- colorNumeric( palette = "RdBu", domain = beetles$MFRatio, reverse = TRUE ) leaflet(beetles) %>% addTiles() %>% addCircles(color = ~pal(MFRatio), fillOpacity = .7, radius = 15000, stroke = FALSE) ``` Note: Our palette is defined before hand using `colorNumeric()` and stored as `pal` ] .pull-right[ &nbsp; &nbsp; <div id="htmlwidget-b9368b7529025240c1eb" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-b9368b7529025240c1eb">{"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> ] --- # Legends `addLegend()` .pull-left[ ```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[ <div id="htmlwidget-15ce261cd7df77313054" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-15ce261cd7df77313054">{"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 ```r leaflet() %>% addTiles() %>% addMarkers( data=beetles ) ``` Note: Markers stay the same size regardless of zoom level ] .pull-right[ &nbsp; &nbsp; <div id="htmlwidget-2e7df401ffbd0e8ae846" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-2e7df401ffbd0e8ae846">{"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> ] --- # Custom Markers We can put any custom image onto the `leaflet` map. ```r bug <- icons( iconUrl = "https://www.pngfind.com/pngs/m/14-144860_beetle-bug-png-transparent-image-bug-png-png.png", iconWidth = 20, iconHeight = 20 ) ``` - You can you images from a url or from your computer --- .pull-left[ # Bugs! ```r leaflet(beetles) %>% addProviderTiles(providers$CartoDB.Positron) %>% addMarkers(icon = bug) ``` Notice: - Data added to the `leaflet()` function call - Custom provider tiles - Icon set in the `addMarkers()`[^1] [^2] - Can also use [fontawesome icons](https://fontawesome.com/icons?d=gallery&p=2&m=free) ] .pull-right[ &nbsp; <div id="htmlwidget-0733a7721478ba063de1" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-0733a7721478ba063de1">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["Esri.WorldShadedRelief",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"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],{"iconUrl":{"data":"https://www.pngfind.com/pngs/m/14-144860_beetle-bug-png-transparent-image-bug-png-png.png","index":0},"iconWidth":20,"iconHeight":20},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> ] ^[1:] Technically, beetles .redinline[**are not**] bugs... Charis ^[2:] Sorry!🤦 --- # Lables & Annotations .pull-left[ In addition to the symbology, we can define a wide range of content to be associated with each marker. ```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-c20298660d52051e31fa" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-c20298660d52051e31fa">{"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> ] --- # Pop-ups .pull-left[ ```r fa_bug <- makeAwesomeIcon(icon = "bug", library = "fa", markerColor = "cadetblue", iconColor = "beige") leaflet(beetle) %>% addProviderTiles(providers$CartoDB.Positron) %>% addAwesomeMarkers(icon = fa_bug, popup = paste0("Site:", beetle$Site)) ``` ] .pull-right[ <div id="htmlwidget-cf53336a00dc3b5fe129" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-cf53336a00dc3b5fe129">{"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":"cadetblue","iconColor":"beige","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> ] --- # Labels .pull-left[ ```r leaflet(beetles) %>% addProviderTiles(providers$CartoDB.Positron) %>% addAwesomeMarkers(icon = fa_bug, label = paste0("Site:", beetles$Site)) ``` ] .pull-right[ <div id="htmlwidget-1f01256b0c7f23ab0b93" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-1f01256b0c7f23ab0b93">{"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":"cadetblue","iconColor":"beige","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},null,null,null,null,["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"],{"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> ] --- class: sectionTitle, inverse # .green[Interactivity] ### .fancy[Making Maps Fun Since 2021!] --- # Interactivity ```r leaflet(beetles) %>% addProviderTiles(providers$CartoDB.Positron) %>% addCircles( fillColor = ~rev(pal(MFRatio)), fillOpacity = .7, radius = 15000, weight = 1, color = "grey", highlightOptions = highlightOptions( color = "green", weight = 2, bringToFront = TRUE)) ``` -- - Setting colors by previous palette - Defining fixed size (units defined by projection - in this case `crs = 4326` has its length unit in meters) - Interactive context is defined by `hightlightOptions` --- class: center, middle <div id="htmlwidget-331da16d8a6eae8173dc" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-331da16d8a6eae8173dc">{"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":["#CCE2EE","#3A85BC","#3E8BBF","#3881BA","#E8F0F4","#124882","#F5F6F7","#9CCAE1","#053061","#A4CEE3","#64A5CD","#70ADD1","#BEDBEB","#FAC4AA","#3178B5","#569DC8","#2469AD","#E8F0F4","#ADD2E6","#FAC4AA","#F7B293","#367EB9","#77B2D4","#1D5EA1","#66A7CE","#DBEAF2","#FAEBE2","#FAC0A5","#C0DCEB","#67001F","#FBE8DE"],"fillOpacity":0.7},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},{"color":"yellow","weight":4,"bringToFront":true},null]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> --- # Map Groups Items on the map may be grouped together and added (layer by layer) using their own data sets. ```r males <- beetles %>% filter( Males > Females) females <- beetles %>% filter( Females > Males) leaflet() %>% addProviderTiles( providers$CartoDB.Positron) %>% addCircles(data = males, fillColor = "lightblue", fillOpacity = 1, color = "blue", radius = 10000, weight = 1, group = "males") %>% addCircles(data = females, fillColor = "pink", fillOpacity = 1, color = "red", radius = 10000, weight = 1, group = "females") %>% addLayersControl(overlayGroups = c("males", "females"), options = layersControlOptions(collapsed = FALSE)) ``` --- # Clickable Goodness <div id="htmlwidget-335bed8e170ca89ec3a0" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-335bed8e170ca89ec3a0">{"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,27.0367,26.20876,27.3632,27.18232,27.40498,28.72796,24.87611,25.55757,29.01457,27.2028,23.2855,26.0155],[-109.327,-109.85071,-112.04613,-111.675,-113.31609,-114.29353,-112.986,-111.37833,-112.964,-112.66552,-112.52959,-113.48973,-110.69175,-111.21563,-113.94486,-112.408,-110.10429,-111.35475],10000,null,"males",{"interactive":true,"className":"","stroke":true,"color":"blue","weight":1,"opacity":0.5,"fill":true,"fillColor":"lightblue","fillOpacity":1},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]},{"method":"addCircles","args":[[28.66056,25.91409,25.60521,28.96651,28.03661,25.34819,28.22308,28.40846,24.21441,24.13389,24.58843,24.0195],[-113.99141,-112.08062,-111.32638,-113.66787,-113.39991,-111.60056,-113.18263,-112.86985,-110.27252,-110.46236,-110.74599,-110.096],10000,null,"females",{"interactive":true,"className":"","stroke":true,"color":"red","weight":1,"opacity":0.5,"fill":true,"fillColor":"pink","fillOpacity":1},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]},{"method":"addLayersControl","args":[[],["males","females"],{"collapsed":false,"autoZIndex":true,"position":"topright"}]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> --- # Interactivity in Map Tile Provider ```r leaflet() %>% addProviderTiles(providers$CartoDB.Positron, group = "Default") %>% addProviderTiles(providers$OpenStreetMap, group = "Open Street Maps") %>% addProviderTiles(providers$Stamen.Toner, group = "Stamen Toner") %>% addCircles(data = males, fillColor = "lightblue", fillOpacity = 1, color = "blue", radius = 10000, weight = 1, group = "males") %>% addCircles(data = females, fillColor = "pink", fillOpacity = 1, color = "red", radius = 10000, weight = 1, group = "females") %>% addLayersControl(overlayGroups = c("males", "females"), options = layersControlOptions(collapsed = FALSE), baseGroups = c("Default", "Open Street Maps", "Stamen Toner")) ``` --- .pull-left[ &nbsp; <div id="htmlwidget-8d5ec4ebde20a702c13b" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-8d5ec4ebde20a702c13b">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["CartoDB.Positron",null,"Default",{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addProviderTiles","args":["OpenStreetMap",null,"Open Street Maps",{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addProviderTiles","args":["Stamen.Toner",null,"Stamen Toner",{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addCircles","args":[[26.63783,24.00789,26.94589,25.0247,27.52944,29.32541,27.0367,26.20876,27.3632,27.18232,27.40498,28.72796,24.87611,25.55757,29.01457,27.2028,23.2855,26.0155],[-109.327,-109.85071,-112.04613,-111.675,-113.31609,-114.29353,-112.986,-111.37833,-112.964,-112.66552,-112.52959,-113.48973,-110.69175,-111.21563,-113.94486,-112.408,-110.10429,-111.35475],10000,null,"males",{"interactive":true,"className":"","stroke":true,"color":"blue","weight":1,"opacity":0.5,"fill":true,"fillColor":"lightblue","fillOpacity":1},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]},{"method":"addCircles","args":[[28.66056,25.91409,25.60521,28.96651,28.03661,25.34819,28.22308,28.40846,24.21441,24.13389,24.58843,24.0195],[-113.99141,-112.08062,-111.32638,-113.66787,-113.39991,-111.60056,-113.18263,-112.86985,-110.27252,-110.46236,-110.74599,-110.096],10000,null,"females",{"interactive":true,"className":"","stroke":true,"color":"red","weight":1,"opacity":0.5,"fill":true,"fillColor":"pink","fillOpacity":1},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]},{"method":"addLayersControl","args":[["Default","Open Street Maps","Stamen Toner"],["males","females"],{"collapsed":false,"autoZIndex":true,"position":"topright"}]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> ] .pull-right[ &nbsp; &nbsp; &nbsp; - Note the difference between `overlayGroups` and `baseGroups` ] --- # On and Off By Zoom We can also have components of the map be active at different `zoom` levels. ```r leaflet(beetles) %>% addProviderTiles(providers$CartoDB.Positron) %>% addCircles( fillColor = "lightblue", fillOpacity = 1, color = "blue", radius = 10000, weight = 1, group = "beetles") %>% groupOptions( "beetles", zoomLevels = 5:8) ``` Notice that the behavior of the `group` defined in `addCircles` can have it's own options set. Here the visibility is defined by the zoom levels. --- &nbsp; <div id="htmlwidget-af25664caa2667fc47ea" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-af25664caa2667fc47ea">{"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],10000,null,"beetles",{"interactive":true,"className":"","stroke":true,"color":"blue","weight":1,"opacity":0.5,"fill":true,"fillColor":"lightblue","fillOpacity":1},null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]},{"method":"setGroupOptions","args":["beetles",{"zoomLevels":[5,6,7,8]}]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> Zoom in/out to see may layer appear/disappear --- # Clustering There are times when you may want to *coalesce* markers together when you zoom out. You can do this ```r leaflet(beetles) %>% addProviderTiles(providers$CartoDB.Positron) %>% addCircleMarkers(fillColor = "lightblue", fillOpacity = 1, color = "blue", weight = 1, group = "beetles", clusterOptions = markerClusterOptions( showCoverageOnHover = FALSE,)) ``` --- # Clustering <div id="htmlwidget-12a09ea6076fcb1881c9" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-12a09ea6076fcb1881c9">{"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":"addCircleMarkers","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,"beetles",{"interactive":true,"className":"","stroke":true,"color":"blue","weight":1,"opacity":0.5,"fill":true,"fillColor":"lightblue","fillOpacity":1},{"showCoverageOnHover":false,"zoomToBoundsOnClick":true,"spiderfyOnMaxZoom":true,"removeOutsideVisibleBounds":true,"spiderLegPolylineOptions":{"weight":1.5,"color":"#222","opacity":0.5},"freezeAtZoom":false},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> --- # Legends & Scale Bars `addLegend()` `addScaleBar()` ```r leaflet(beetle) %>% 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") %>% addScaleBar(position = "bottomright") ``` --- &nbsp; <div id="htmlwidget-e006783746e4b8381148" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-e006783746e4b8381148">{"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":["#E3EDF3","#053061","#FBCCB3","#B3D5E7","#E7EFF4","#FCE2D3","#E37C62","#A71429","#EA8C6E","#C6443D","#A2CDE2","#B7D7E8","#F9BC9E","#FAECE4","#B41F2D","#DD6E57","#C13A38","#B7D7E8","#FBCBB2","#E78568","#E27A60","#F7B495","#67001F","#F6AD8C","#F7F6F5","#880925","#FAECE4","#C94940","#D05647","#CB4E42","#FDD6C1"],"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":["#67001F , #6A011F 0.386004233594826%, #BC3234 12.8377537043955%, #E78568 25.2895031751961%, #FCCFB7 37.7412526459968%, #F6F7F7 50.1930021167974%, #C1DCEB 62.6447515875981%, #6DABD0 75.0965010583987%, #2B71B2 87.5482505291994%, #053061 100%, #053061 "],"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}]},{"method":"addScaleBar","args":[{"maxWidth":100,"metric":true,"imperial":true,"updateWhenIdle":true,"position":"bottomright"}]}],"limits":{"lat":[23.2855,29.32541],"lng":[-114.29353,-109.327]}},"evals":[],"jsHooks":[]}</script> --- # Additional Layer Options So we've covered some items here but there are many more available. Here is a list of some common ones: - `addControl`: Add arbitrary HTML controls to the map - `addTiles`: Add a tile layer to the map - `addWMSTiles`: Add a WMS tile layer to the map - `addPopups`: Add popups to the map - `addMarkers`: Add markers to the map - `addLabelOnlyMarkers`: Add Label only markers to the map - `addCircleMarkers`: Add circle markers to the map - `highlightOptions`: Options to highlight a shape on hover - `addCircles`: Add circles to the map - `addPolylines`: Add polylines to the map - `addRectangles`: Add rectangles to the map - `addPolygons`: Add polygons to the map - `addGeoJSON`: Add GeoJSON layers to the map - `addTopoJSON`: Add TopoJSON layers to the map --- # Web Mapping Services A Web Mapping Service is a some geospatial information that is provided to you as the user from some server on the web. You can use these as data input in ESRI ArcMap as a data sources, as a data provider for `R` or as an overlay for this leaflet. To do this, we use the `addWMSTiles()` function and we need to give it the following parameters: - Where to get the WMS tiles from - What layer to use (these are often shape-file like things). - Some options - Add some attributions to your map as text at the bottom. --- # Real-Time Weather Overlay .pull-left[ This service is provided by the Iowa Environmental Mesonet servers at Iowa State University. ```r leaflet() %>% setView(lng = -77.5, lat = 37.5, zoom = 4) %>% addProviderTiles( providers$Esri.WorldShadedRelief ) %>% addWMSTiles( "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" ) ``` ] .pull-right[ <div id="htmlwidget-022c232c7912098211d8" style="width:504px;height:504px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-022c232c7912098211d8">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"setView":[[37.5,-77.5],4,[]],"calls":[{"method":"addProviderTiles","args":["Esri.WorldShadedRelief",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addWMSTiles","args":["http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",null,null,{"styles":"","format":"image/png","transparent":true,"version":"1.1.1","attribution":"Weather data © 2012 IEM Nexrad","layers":"nexrad-n0r-900913"}]}]},"evals":[],"jsHooks":[]}</script> ] --- class: middle ##`leaflet.extras` There are more interactive components you can add to the map from the `leaflet.extras` package including: - Geocoded search fields - Interactive drawing components - Pulsing icons Examples are found in the [narrative](narrative.nb.html) associated with this lecture topic. --- class: middle background-image: url("images/contour.png") background-position: right background-size: auto .center[ .red[Questions?]  ] <p>&nbsp;</p> .bottom[ If you have any questions for about the content presented herein, please feel free to [submit them to me](mailto://deadwylerm@vcu.edu) and I'll get back to you as soon as possible.]