update plotting xy

Author: libjohn

01_georeference.Rmd

@@ -6,14 +6,16 @@ output: html_document
 ---
  
 
-Introducing the `library(leaflet)` Use 5 lines of code to make an interactive map (Adapted from Machlis.)^[[5 Visualizations in 5 Minutes](http://www.computerworld.com/article/2893271/business-intelligence/5-data-visualizations-in-5-minutes-each-in-5-lines-or-less-of-r.html). ComputerWorld.com by Sharon Machlis]
+To introduce the `library(mapview)` package, make an interactive map with Starbucks coffee shop locations in North Carolina (2012).  (Adapted from Machlis.)^[[5 Visualizations in 5 Minutes](http://www.computerworld.com/article/2893271/business-intelligence/5-data-visualizations-in-5-minutes-each-in-5-lines-or-less-of-r.html). ComputerWorld.com by Sharon Machlis]
 
 
 ## Load Libraries
 
 ```{r libraries, message=FALSE, warning=FALSE}
 library(tidyverse)
+library(sf)
 library(leaflet)
+library(mapview)
 ```
 
 ## Load Data
@@ -32,18 +34,28 @@ starbucksNC <- starbucks  %>%
 starbucksNC
 ```
 
+## Transform to Spatial Data
 
-## Plot Lat and Lon on a Map
+Transform our standard tibble (i.e. the starbucksNC data frame) into a spacial data frame via the simple features function, `st_as_sf()`. Here we set the [map projection](https://en.wikipedia.org/wiki/Map_projection) to a common standard, WGS84, via the argument `crs = 4326`.)
 
-Using the `leaflet` function, plot the latitude and longitude on a basemap.  Latitude is *Y*, Longitude is *X*.
+```{r convert2spacial}
+sbuxsfc <- st_as_sf(starbucksNC, coords = c("Longitude", "Latitude"),  crs=4326)
+```
+
+Below, you can set the `map.types` argument to `openStreetMap`.  Base maps are set with `map.types`.  For example a high contrast, black and white basemap can be set with the argument `map.types = "Stamen.Toner"`. See avaiable [map types](http://leaflet-extras.github.io/leaflet-providers/preview/), or leave out the map.types argument for a set of default base maps to choose via the layering button.
 
 ```{r plotmap}
-starbucksNC %>% 
-  leaflet(width = "100%") %>% 
-  addTiles() %>% 
-  setView(-78.8310, 35.9867, zoom = 10) %>% 
-  addMarkers(lat = ~Latitude, 
-             lng = ~Longitude, 
-             popup = starbucksNC$Name)
+#mapview(sbuxsfc, map.types = "Stamen.Toner")
+mapview(sbuxsfc)
 ```
 
+
+
+## Save the Map
+
+You can save a map as an interalctive HTML page or a static `.png, .pdf, or .jpeg` file with the [`mapshot` function](https://r-spatial.github.io/mapview/reference/mapshot.html).  For example:
+
+- `mapshot(starNCmap, file = "map.png")`
+- `mapshot(starNCmap, url = "map.html")`
+
+

_site.yml

@@ -6,7 +6,7 @@ exclude:
 navbar:
   title: Mapping in R
   left:
-  - text: "Home"
+  - text: "Preface"
     menu:
       - text: "Overview"
         href: index.html
@@ -15,11 +15,7 @@ navbar:
       - text: "Next Steps"
         href: next.html
   - text: "Plot Coordinates"
-    menu:
-      - text: Interactive map (leaflet)
-        href: 01_georeference.html
-      - text: Static Map (ggmap)
-        href: 01_ggmap_georef.html
+    href: 01_georeference.html
   - text: "tidycensus"
     href: 02_choropleth.html
   - text: "Thematic Mapping"

docs/01_georeference.html

@@ -25,13 +25,12 @@
 <script src="site_libs/navigation-1.1/tabsets.js"></script>
 <link href="site_libs/pagedtable-1.1/css/pagedtable.css" rel="stylesheet" />
 <script src="site_libs/pagedtable-1.1/js/pagedtable.js"></script>
-<link href="site_libs/font-awesome-5.0.13/css/fa-svg-with-js.css" rel="stylesheet" />
-<script src="site_libs/font-awesome-5.0.13/js/fontawesome-all.min.js"></script>
-<script src="site_libs/font-awesome-5.0.13/js/fa-v4-shims.min.js"></script>
+<link href="site_libs/font-awesome-5.1.0/css/all.css" rel="stylesheet" />
+<link href="site_libs/font-awesome-5.1.0/css/v4-shims.css" rel="stylesheet" />
 
 
 <style type="text/css">code{white-space: pre;}</style>
-<style type="text/css">
+<style type="text/css" data-origin="pandoc">
 div.sourceCode { overflow-x: auto; }
 table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
   margin: 0; padding: 0; vertical-align: baseline; border: none; }
@@ -67,7 +66,29 @@
 code > span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
 code > span.cv { color: #8f5902; font-weight: bold; font-style: italic; } /* CommentVar */
 code > span.in { color: #8f5902; font-weight: bold; font-style: italic; } /* Information */
+
 </style>
+<script>
+// apply pandoc div.sourceCode style to pre.sourceCode instead
+(function() {
+  var sheets = document.styleSheets;
+  for (var i = 0; i < sheets.length; i++) {
+    if (sheets[i].ownerNode.dataset["origin"] !== "pandoc") continue;
+    try { var rules = sheets[i].cssRules; } catch (e) { continue; }
+    for (var j = 0; j < rules.length; j++) {
+      var rule = rules[j];
+      // check if there is a div.sourceCode rule
+      if (rule.type !== rule.STYLE_RULE || rule.selectorText !== "div.sourceCode") continue;
+      var style = rule.style.cssText;
+      // check if color or background-color is set
+      if (rule.style.color === '' || rule.style.backgroundColor === '') continue;
+      // replace div.sourceCode by a pre.sourceCode rule
+      sheets[i].deleteRule(j);
+      sheets[i].insertRule('pre.sourceCode{' + style + '}', j);
+    }
+  }
+})();
+</script>
 <style type="text/css">
   pre:not([class]) {
     background-color: white;
@@ -132,6 +153,9 @@
 button.code-folding-btn:focus {
   outline: none;
 }
+summary {
+  display: list-item;
+}
 </style>
 
 
@@ -146,7 +170,6 @@
   padding-top: 65px;
   margin-top: -65px;
 }
-
 .section h2 {
   padding-top: 65px;
   margin-top: -65px;
@@ -167,6 +190,43 @@
   padding-top: 65px;
   margin-top: -65px;
 }
+.dropdown-submenu {
+  position: relative;
+}
+.dropdown-submenu>.dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  border-radius: 0 6px 6px 6px;
+}
+.dropdown-submenu:hover>.dropdown-menu {
+  display: block;
+}
+.dropdown-submenu>a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #cccccc;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+.dropdown-submenu:hover>a:after {
+  border-left-color: #ffffff;
+}
+.dropdown-submenu.pull-left {
+  float: none;
+}
+.dropdown-submenu.pull-left>.dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  border-radius: 6px 0 6px 6px;
+}
 </style>
 
 <script>
@@ -187,21 +247,80 @@
 });
 </script>
 
-
 <div class="container-fluid main-container">
 
 <!-- tabsets -->
+
+<style type="text/css">
+.tabset-dropdown > .nav-tabs {
+  display: inline-table;
+  max-height: 500px;
+  min-height: 44px;
+  overflow-y: auto;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.tabset-dropdown > .nav-tabs > li.active:before {
+  content: "";
+  font-family: 'Glyphicons Halflings';
+  display: inline-block;
+  padding: 10px;
+  border-right: 1px solid #ddd;
+}
+
+.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
+  content: "&#xe258;";
+  border: none;
+}
+
+.tabset-dropdown > .nav-tabs.nav-tabs-open:before {
+  content: "";
+  font-family: 'Glyphicons Halflings';
+  display: inline-block;
+  padding: 10px;
+  border-right: 1px solid #ddd;
+}
+
+.tabset-dropdown > .nav-tabs > li.active {
+  display: block;
+}
+
+.tabset-dropdown > .nav-tabs > li > a,
+.tabset-dropdown > .nav-tabs > li > a:focus,
+.tabset-dropdown > .nav-tabs > li > a:hover {
+  border: none;
+  display: inline-block;
+  border-radius: 4px;
+}
+
+.tabset-dropdown > .nav-tabs.nav-tabs-open > li {
+  display: block;
+  float: none;
+}
+
+.tabset-dropdown > .nav-tabs > li {
+  display: none;
+}
+</style>
+
 <script>
 $(document).ready(function () {
   window.buildTabsets("TOC");
 });
+
+$(document).ready(function () {
+  $('.tabset-dropdown > .nav-tabs > li').click(function () {
+    $(this).parent().toggleClass('nav-tabs-open')
+  });
+});
 </script>
 
 <!-- code folding -->
 
 
 
-
 <script>
 $(document).ready(function ()  {