From 80671d0d7ab9e5bbc18c0185ec009f66f498b04b Mon Sep 17 00:00:00 2001 From: jack-davison Date: Tue, 10 Sep 2024 11:36:38 +0100 Subject: [PATCH 1/5] docs: change bing example to heatmap bing was broken; example taken from https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92 --- vignettes/articles/extending.Rmd | 37 +++++++++++++++++++++----------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/vignettes/articles/extending.Rmd b/vignettes/articles/extending.Rmd index 71ffd5687..3ea2b8ec8 100644 --- a/vignettes/articles/extending.Rmd +++ b/vignettes/articles/extending.Rmd @@ -43,31 +43,42 @@ Often when passing a list from R to JavaScript it is desirable to remove any nul # Example -Here is a small example which shows how you can integrate the Bing.com basemap layer [plugin](https://github.com/shramov/leaflet-plugins) +Here is a small example which shows how you can integrate heatmap functionality using a [plugin](http://leaflet.github.io/Leaflet.heat/). ```{r, fig.height=4} library(leaflet) library(htmltools) library(htmlwidgets) -bingPlugin <- htmlDependency( - "leaflet.plugins", "2.0.0", - src = normalizePath("./js"), - script = "Bing.min.js" +# This tells htmlwidgets about our plugin name, version, and +# where to find the script. (There's also a stylesheet argument +# if the plugin comes with CSS files.) +heatPlugin <- htmlDependency( + "Leaflet.heat", + "99.99.99", + src = c(href = "http://leaflet.github.io/Leaflet.heat/dist/"), + script = "leaflet-heat.js" ) +# A function that takes a plugin htmlDependency object and adds +# it to the map. This ensures that however or whenever the map +# gets rendered, the plugin will be loaded into the browser. registerPlugin <- function(map, plugin) { map$dependencies <- c(map$dependencies, list(plugin)) map } -leaflet() %>% setView(-122.23, 37.75, zoom = 10) %>% - registerPlugin(bingPlugin) %>% - onRender("function(el, x) { - var imagerySet = 'Aerial'; - var bing = new L.BingLayer('LfO3DMI9S6GnXD7d0WGs~bq2DRVkmIAzSOFdodzZLvw~Arx8dclDxmZA0Y38tHIJlJfnMbGq5GXeYmrGOUIbS2VLFzRKCK0Yv_bAl6oe-DOc', - {type: imagerySet}); - this.addLayer(bing); - }") +# initialise leaflet map in R +leaflet() %>% + addTiles() %>% + fitBounds(min(quakes$long), min(quakes$lat), max(quakes$long), max(quakes$lat)) %>% + # Register heatmap plugin on this map instance + registerPlugin(heatPlugin) %>% + # Add custom JS logic; `this` refers to the Leaflet (JS) map object. + onRender("function(el, x, data) { + data = HTMLWidgets.dataframeToD3(data); + data = data.map(function(val) { return [val.lat, val.long, val.mag*100]; }); + L.heatLayer(data, {radius: 25}).addTo(this); + }", data = quakes[c("lat", "long", "mag")]) ``` From ac4039a58db75f45d8d8b94462c19332a953136c Mon Sep 17 00:00:00 2001 From: jack-davison Date: Tue, 10 Sep 2024 11:41:36 +0100 Subject: [PATCH 2/5] fix: remove duplicate NEWs.md item --- NEWS.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/NEWS.md b/NEWS.md index e7c376e4b..8313a6202 100644 --- a/NEWS.md +++ b/NEWS.md @@ -4,8 +4,6 @@ * Updated vignettes to replace `{sp}`/`{raster}` usage with `{sf}`/`{terra}` and their corresponding examples. (@jack-davison, #928) -* Updated vignettes to replace `{sp}`/`{raster}` usage with `{sf}`/`{terra} and their corresponding examples. (@jack-davison, #928) - * `addProviderTiles()` will now error if the chosen `provider` does not match any currently loaded provider (by default, those in `providers`). This behaviour can be toggled off by setting the new `check` argument to `FALSE` (@jack-davison, #929) # leaflet 2.2.2 From d3821dba53b8228e09f548db29e07461b9170ee1 Mon Sep 17 00:00:00 2001 From: Jack Davison <45171616+jack-davison@users.noreply.github.com> Date: Tue, 10 Sep 2024 14:57:03 +0100 Subject: [PATCH 3/5] fix: use actual version number in example Co-authored-by: Garrick Aden-Buie --- vignettes/articles/extending.Rmd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vignettes/articles/extending.Rmd b/vignettes/articles/extending.Rmd index 3ea2b8ec8..e6c125276 100644 --- a/vignettes/articles/extending.Rmd +++ b/vignettes/articles/extending.Rmd @@ -55,7 +55,7 @@ library(htmlwidgets) # if the plugin comes with CSS files.) heatPlugin <- htmlDependency( "Leaflet.heat", - "99.99.99", + "0.2.0", src = c(href = "http://leaflet.github.io/Leaflet.heat/dist/"), script = "leaflet-heat.js" ) From d8147be8a61c946dc9fa59844e5b9482ff69e268 Mon Sep 17 00:00:00 2001 From: Jack Davison <45171616+jack-davison@users.noreply.github.com> Date: Tue, 10 Sep 2024 14:57:35 +0100 Subject: [PATCH 4/5] fix: use https instead of http in example Co-authored-by: Garrick Aden-Buie --- vignettes/articles/extending.Rmd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vignettes/articles/extending.Rmd b/vignettes/articles/extending.Rmd index e6c125276..b1b1f282d 100644 --- a/vignettes/articles/extending.Rmd +++ b/vignettes/articles/extending.Rmd @@ -43,7 +43,7 @@ Often when passing a list from R to JavaScript it is desirable to remove any nul # Example -Here is a small example which shows how you can integrate heatmap functionality using a [plugin](http://leaflet.github.io/Leaflet.heat/). +Here is a small example which shows how you can integrate heatmap functionality using a [plugin](https://leaflet.github.io/Leaflet.heat/). ```{r, fig.height=4} library(leaflet) From 6472d768081f7df7cbc3019488e3a92445df67b4 Mon Sep 17 00:00:00 2001 From: jack-davison Date: Tue, 10 Sep 2024 15:20:31 +0100 Subject: [PATCH 5/5] docs: move comments to prose --- vignettes/articles/extending.Rmd | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/vignettes/articles/extending.Rmd b/vignettes/articles/extending.Rmd index b1b1f282d..6e39853ac 100644 --- a/vignettes/articles/extending.Rmd +++ b/vignettes/articles/extending.Rmd @@ -43,16 +43,30 @@ Often when passing a list from R to JavaScript it is desirable to remove any nul # Example -Here is a small example which shows how you can integrate heatmap functionality using a [plugin](https://leaflet.github.io/Leaflet.heat/). +Here is a small example which shows how you can integrate heatmap functionality using a [plugin](https://leaflet.github.io/Leaflet.heat/). + +There are four key steps to add this plugin to a Leaflet map in R: + +1. Define a function that takes a `htmltools::htmlDependency()` object and adds it to the map. This ensures that however or whenever the map gets rendered, the plugin will be loaded into the browser. + +2. Actually create the `htmltools::htmlDependency()`. This function tells the browser our plugin name, version, and where to find the script. There's also a stylesheet argument if the plugin comes with CSS files. + +3. Use our `registerPlugin()` function to register the plugin dependency with the `leaflet()` object. As the first argument of our function is `map`, this can be achieved as part of a pipeline. + +4. We need to tell `Leaflet` what to actually *do* with our new plugin using `htmlwidgets::onRender()`. This adds additional rendering logic to this specific widget, written in JavaScript. Note that, in the below example, `this` refers to the `Leaflet` (JS) map object itself. ```{r, fig.height=4} library(leaflet) library(htmltools) library(htmlwidgets) -# This tells htmlwidgets about our plugin name, version, and -# where to find the script. (There's also a stylesheet argument -# if the plugin comes with CSS files.) +# function to register plugin +registerPlugin <- function(map, plugin) { + map$dependencies <- c(map$dependencies, list(plugin)) + map +} + +# define plugin as a HTML dependency heatPlugin <- htmlDependency( "Leaflet.heat", "0.2.0", @@ -60,21 +74,13 @@ heatPlugin <- htmlDependency( script = "leaflet-heat.js" ) -# A function that takes a plugin htmlDependency object and adds -# it to the map. This ensures that however or whenever the map -# gets rendered, the plugin will be loaded into the browser. -registerPlugin <- function(map, plugin) { - map$dependencies <- c(map$dependencies, list(plugin)) - map -} - # initialise leaflet map in R leaflet() %>% addTiles() %>% fitBounds(min(quakes$long), min(quakes$lat), max(quakes$long), max(quakes$lat)) %>% # Register heatmap plugin on this map instance registerPlugin(heatPlugin) %>% - # Add custom JS logic; `this` refers to the Leaflet (JS) map object. + # Add custom JS logic onRender("function(el, x, data) { data = HTMLWidgets.dataframeToD3(data); data = data.map(function(val) { return [val.lat, val.long, val.mag*100]; });