|
245 | 245 |
|
246 | 246 | <div id="choropleths" class="section level2"> |
247 | 247 | <h2>Choropleths</h2> |
248 | | -<p>Making choropleths with leaflet is easy. In this example, we’ll duplicate the <a href="https://leafletjs.com/examples/choropleth/">step-by-step choropleth tutorial</a> from the Leaflet.js website.</p> |
249 | | -<p>The final result will look like this (scroll to the end to see the completed code):</p> |
| 248 | +<p>Making choropleths with leaflet is easy. In this example, we’ll |
| 249 | +duplicate the <a |
| 250 | +href="https://leafletjs.com/examples/choropleth/">step-by-step |
| 251 | +choropleth tutorial</a> from the Leaflet.js website.</p> |
| 252 | +<p>The final result will look like this (scroll to the end to see the |
| 253 | +completed code):</p> |
250 | 254 | <pre><code>## Registered S3 method overwritten by 'geojsonsf': |
251 | 255 | ## method from |
252 | 256 | ## print.geojson geojson</code></pre> |
@@ -1136,27 +1140,40 @@ <h2>Choropleths</h2> |
1136 | 1140 | }</script> |
1137 | 1141 | <div id="data-source" class="section level3"> |
1138 | 1142 | <h3>Data source</h3> |
1139 | | -<p>We’ll start by loading the data from JSON. While the Leaflet.js example loads the JSON directly into JavaScript, with the Leaflet R package we instead want to load the data into R.</p> |
1140 | | -<p>In this case, we’ll use the <code>geojsonio</code> package to load the data into <code>sp</code> objects, which will let us easily manipulate the geographic features, and their properties, in R.</p> |
| 1143 | +<p>We’ll start by loading the data from JSON. While the Leaflet.js |
| 1144 | +example loads the JSON directly into JavaScript, with the Leaflet R |
| 1145 | +package we instead want to load the data into R.</p> |
| 1146 | +<p>In this case, we’ll use the <code>geojsonio</code> package to load |
| 1147 | +the data into <code>sp</code> objects, which will let us easily |
| 1148 | +manipulate the geographic features, and their properties, in R.</p> |
1141 | 1149 | <pre class="r"><code>states <- geojsonio::geojson_read("https://rstudio.github.io/leaflet/json/us-states.geojson", what = "sp") |
1142 | 1150 | class(states)</code></pre> |
1143 | 1151 | <pre><code>## [1] "SpatialPolygonsDataFrame" |
1144 | 1152 | ## attr(,"package") |
1145 | 1153 | ## [1] "sp"</code></pre> |
1146 | 1154 | <pre class="r"><code>names(states)</code></pre> |
1147 | 1155 | <pre><code>## [1] "id" "name" "density"</code></pre> |
1148 | | -<p>As you can see, we now have a <code>SpatialPolygonsDataFrame</code> with <code>name</code> (state name) and <code>density</code> (population density in people/mi<sup>2</sup>) columns from the GeoJSON.</p> |
| 1156 | +<p>As you can see, we now have a <code>SpatialPolygonsDataFrame</code> |
| 1157 | +with <code>name</code> (state name) and <code>density</code> (population |
| 1158 | +density in people/mi<sup>2</sup>) columns from the GeoJSON.</p> |
1149 | 1159 | </div> |
1150 | 1160 | <div id="basic-states-map" class="section level3"> |
1151 | 1161 | <h3>Basic states map</h3> |
1152 | | -<p>Next, let’s make a basic map with just the outline of the states. For our basemap, we’ll use the same <code>"mapbox.light"</code> MapBox style that the example does; if you don’t have a MapBox account, you can just use <code>addTiles()</code> in place of the <code>addProviderTiles</code> call, or choose a free provider.</p> |
| 1162 | +<p>Next, let’s make a basic map with just the outline of the states. For |
| 1163 | +our basemap, we’ll use the same <code>"mapbox.light"</code> MapBox style |
| 1164 | +that the example does; if you don’t have a MapBox account, you can just |
| 1165 | +use <code>addTiles()</code> in place of the |
| 1166 | +<code>addProviderTiles</code> call, or choose a free provider.</p> |
1153 | 1167 | <pre class="r"><code>m <- leaflet(states) %>% |
1154 | 1168 | setView(-96, 37.8, 4) %>% |
1155 | 1169 | addProviderTiles("MapBox", options = providerTileOptions( |
1156 | 1170 | id = "mapbox.light", |
1157 | 1171 | accessToken = Sys.getenv('MAPBOX_ACCESS_TOKEN')))</code></pre> |
1158 | | -<p>We’ve saved the basic basemap as a separate variable <code>m</code> so we can easily iterate on the <code>addPolygons</code> call as we work through the rest of the tutorial.</p> |
1159 | | -<p>To add uniform polygons with default styling, just call <code>addPolygons</code> with no additional arguments.</p> |
| 1172 | +<p>We’ve saved the basic basemap as a separate variable <code>m</code> |
| 1173 | +so we can easily iterate on the <code>addPolygons</code> call as we work |
| 1174 | +through the rest of the tutorial.</p> |
| 1175 | +<p>To add uniform polygons with default styling, just call |
| 1176 | +<code>addPolygons</code> with no additional arguments.</p> |
1160 | 1177 | <pre class="r"><code>m %>% addPolygons()</code></pre> |
1161 | 1178 | <div id="htmlwidget-92aa9ec4a26e6d2eb4c3" style="width:100%;height:216px;" class="leaflet html-widget"></div> |
1162 | 1179 | <script type="application/json" data-for="htmlwidget-92aa9ec4a26e6d2eb4c3">{ |
@@ -1962,10 +1979,19 @@ <h3>Basic states map</h3> |
1962 | 1979 | </div> |
1963 | 1980 | <div id="adding-some-color" class="section level3"> |
1964 | 1981 | <h3>Adding some color</h3> |
1965 | | -<p>Now, let’s color the states according to their population density. You have <a href="../colors.html">various options</a> for mapping data to colors; for this example we’ll match the Leaflet.js tutorial by mapping a specific set of bins into RColorBrewer colors.</p> |
1966 | | -<p>First, we’ll define the bins. This is a numeric vector that defines the boundaries between intervals (<code>(0,10]</code>, <code>(10,20]</code>, and so on).</p> |
1967 | | -<p>Then, we’ll call <code>colorBin</code> to generate a palette function that maps the RColorBrewer <code>"YlOrRd"</code> colors to our bins.</p> |
1968 | | -<p>Finally, we’ll modify <code>addPolygons</code> to use the palette function and the density values to generate a vector of colors for <code>fillColor</code>, and also add some other static style properties.</p> |
| 1982 | +<p>Now, let’s color the states according to their population density. |
| 1983 | +You have <a href="../colors.html">various options</a> for mapping data |
| 1984 | +to colors; for this example we’ll match the Leaflet.js tutorial by |
| 1985 | +mapping a specific set of bins into RColorBrewer colors.</p> |
| 1986 | +<p>First, we’ll define the bins. This is a numeric vector that defines |
| 1987 | +the boundaries between intervals (<code>(0,10]</code>, |
| 1988 | +<code>(10,20]</code>, and so on).</p> |
| 1989 | +<p>Then, we’ll call <code>colorBin</code> to generate a palette function |
| 1990 | +that maps the RColorBrewer <code>"YlOrRd"</code> colors to our bins.</p> |
| 1991 | +<p>Finally, we’ll modify <code>addPolygons</code> to use the palette |
| 1992 | +function and the density values to generate a vector of colors for |
| 1993 | +<code>fillColor</code>, and also add some other static style |
| 1994 | +properties.</p> |
1969 | 1995 | <pre class="r"><code>bins <- c(0, 10, 20, 50, 100, 200, 500, 1000, Inf) |
1970 | 1996 | pal <- colorBin("YlOrRd", domain = states$density, bins = bins) |
1971 | 1997 |
|
@@ -2781,7 +2807,9 @@ <h3>Adding some color</h3> |
2781 | 2807 | </div> |
2782 | 2808 | <div id="adding-interaction" class="section level3"> |
2783 | 2809 | <h3>Adding interaction</h3> |
2784 | | -<p>The next thing we’ll want is to make the polygons highlight as the mouse passes over them. The <code>addPolygon</code> function has a <code>highlight</code> argument that makes this simple.</p> |
| 2810 | +<p>The next thing we’ll want is to make the polygons highlight as the |
| 2811 | +mouse passes over them. The <code>addPolygon</code> function has a |
| 2812 | +<code>highlight</code> argument that makes this simple.</p> |
2785 | 2813 | <pre class="r"><code>m %>% addPolygons( |
2786 | 2814 | fillColor = ~pal(density), |
2787 | 2815 | weight = 2, |
@@ -3603,13 +3631,22 @@ <h3>Adding interaction</h3> |
3603 | 3631 | "evals": [], |
3604 | 3632 | "jsHooks": [] |
3605 | 3633 | }</script> |
3606 | | -<p>(The Leaflet.js tutorial also adds an event handler that zooms into a state when it’s clicked. This isn’t currently possible with the Leaflet R package, except with either custom JavaScript or using Shiny, both of which are outside the scope of this example.)</p> |
| 3634 | +<p>(The Leaflet.js tutorial also adds an event handler that zooms into a |
| 3635 | +state when it’s clicked. This isn’t currently possible with the Leaflet |
| 3636 | +R package, except with either custom JavaScript or using Shiny, both of |
| 3637 | +which are outside the scope of this example.)</p> |
3607 | 3638 | </div> |
3608 | 3639 | <div id="custom-info" class="section level3"> |
3609 | 3640 | <h3>Custom info</h3> |
3610 | 3641 | <p>Now let’s expose the state names and values to the user.</p> |
3611 | | -<p>The Leaflet.js tutorial shows the hovered-over state’s information in a custom control. Again, that’s possible by adding custom JavaScript or using Shiny, but for this example we’ll use the built-in labels feature instead.</p> |
3612 | | -<p>We’ll generate the labels by handcrafting some HTML, and passing it to <code>lapply(htmltools::HTML)</code> so that Leaflet knows to treat each label as HTML instead of as plain text. We’ll also set some label options to improve the style of the label element itself.</p> |
| 3642 | +<p>The Leaflet.js tutorial shows the hovered-over state’s information in |
| 3643 | +a custom control. Again, that’s possible by adding custom JavaScript or |
| 3644 | +using Shiny, but for this example we’ll use the built-in labels feature |
| 3645 | +instead.</p> |
| 3646 | +<p>We’ll generate the labels by handcrafting some HTML, and passing it |
| 3647 | +to <code>lapply(htmltools::HTML)</code> so that Leaflet knows to treat |
| 3648 | +each label as HTML instead of as plain text. We’ll also set some label |
| 3649 | +options to improve the style of the label element itself.</p> |
3613 | 3650 | <pre class="r"><code>labels <- sprintf( |
3614 | 3651 | "<strong>%s</strong><br/>%g people / mi<sup>2</sup>", |
3615 | 3652 | states$name, states$density |
@@ -4499,11 +4536,15 @@ <h3>Custom info</h3> |
4499 | 4536 | "evals": [], |
4500 | 4537 | "jsHooks": [] |
4501 | 4538 | }</script> |
4502 | | -<p>This is the final version of our polygon layer, so let’s save the result back to the <code>m</code> variable.</p> |
| 4539 | +<p>This is the final version of our polygon layer, so let’s save the |
| 4540 | +result back to the <code>m</code> variable.</p> |
4503 | 4541 | </div> |
4504 | 4542 | <div id="legend" class="section level3"> |
4505 | 4543 | <h3>Legend</h3> |
4506 | | -<p>As our final step, let’s add a legend. Because we chose to color our map using <code>colorBin</code>, the <code>addLegend</code> function makes it particularly easy to add a legend with the correct colors and intervals.</p> |
| 4544 | +<p>As our final step, let’s add a legend. Because we chose to color our |
| 4545 | +map using <code>colorBin</code>, the <code>addLegend</code> function |
| 4546 | +makes it particularly easy to add a legend with the correct colors and |
| 4547 | +intervals.</p> |
4507 | 4548 | <pre class="r"><code>m %>% addLegend(pal = pal, values = ~density, opacity = 0.7, title = NULL, |
4508 | 4549 | position = "bottomright")</code></pre> |
4509 | 4550 | <div id="htmlwidget-2f386608a10ed269577b" style="width:100%;height:216px;" class="leaflet html-widget"></div> |
|
0 commit comments