Embedding htmlwidgets in maps

Andrew Clark

timlyportfolio stuff

Running serve_site drft: true In RStudio viewer * sparkline popup works - no chart * plotly good * listviewer shows but bit cramped chnaged with width adjustment

In browser - likewise

NB suddenly not rendering map inline or browser 9yet to check blogdown)!! maybe something to do with using R 3.4 or at least with that additionalpath showing

library(leaflet) # 1.1
library(htmlwidgets)
library(htmltools)
## Warning: package 'htmltools' was built under R version 3.3.3
library(plotly) 
## Loading required package: ggplot2
## 
## Attaching package: 'plotly'
## The following object is masked from 'package:ggplot2':
## 
##     last_plot
## The following object is masked from 'package:stats':
## 
##     filter
## The following object is masked from 'package:graphics':
## 
##     layout
library(sparkline)
library(mapview)
## Warning: package 'mapview' was built under R version 3.3.3
## Loading required package: methods
library(listviewer)

#helper functions

# Step 1 convert htmlwidget to character representation of HTML components
as.character.htmlwidget <- function(x, ...) {
  htmltools::HTML(
    htmltools:::as.character.shiny.tag.list(
      htmlwidgets:::as.tags.htmlwidget(
        x
      ),
      ...
    )
  )
}

add_deps <- function(dtbl, name, pkg = name) {
  tagList(
    dtbl,
    htmlwidgets::getDependency(name, pkg)
  )
}
df <- read.csv(textConnection(
  "Name,Lat,Long
  Samurai Noodle,47.597131,-122.327298
  Kukai Ramen,47.6154,-122.327157
  Tsukushinbo,47.59987,-122.326726"
))

Sparklines

[]http://bl.ocks.org/timelyportfolio/33db1fb9e64257ef7149754bdff0b2e0 twitter message from klr to add height/width

leaflet(df) %>% addTiles() %>% 
addMouseCoordinates() %>%
  addMarkers(
    ~Long, ~Lat,
      popup = lapply(seq_along(df),function(x) {
      as.character(
        tags$div(
          style="height:200px;width:300px;",
          sparkline(runif(20), height=200, width=300)
        )
      )
    })
  ) %>%
  onRender(
"
function(el,x) {
  this.on('popupopen', function() {HTMLWidgets.staticRender();})
}
") %>%
  add_deps("sparkline") %>%
  browsable()
# leaflet(df) %>% addTiles() %>%
#   addMarkers(
#     ~Long, ~Lat,
#     popup = lapply(seq_along(df),function(x)as.character(sparkline(runif(20))))
#   ) %>%
#   onRender(
# "
# function(el,x) {
#   this.on('popupopen', function() {HTMLWidgets.staticRender();})
# }
# ") %>%
#   add_deps("sparkline") %>%
#   browsable()

plotly

leaflet(df) %>% addTiles() %>%
  addMarkers(
    ~Long, ~Lat,
    popup = lapply(
      seq_along(df),
      function(x) {
        plot_ly(x=~1:20, y=~runif(20)) %>% # put in meaningful data e.g weather by month
          add_markers() %>%
          as.tags() %>%
          {tags$div(style="width:300px;", .)} %>%
          as.character()
      }
    )
  ) %>%
  onRender(
"
function(el,x) {
  this.on('popupopen', function() {HTMLWidgets.staticRender();})
}
") %>%
  add_deps("plotly") %>%
  htmltools::attachDependencies(crosstalk::crosstalkLibs()) %>%
  browsable()

listviewer

unlikely to be of interest with leaflet - just showing could be used with any htmlwidget?

leaflet(df) %>% addTiles() %>%
  addMarkers(
    ~Long, ~Lat,
    popup = lapply(
      seq_along(df),
      function(i){
        as.character(
          jsonedit(
            jsonlite::toJSON(df[i,,drop=TRUE],auto_unbox=TRUE),
            height=200,width=300
          )
        )
      }
    )
  ) %>%
  onRender(
"
function(el,x) {
  this.on('popupopen', function() {HTMLWidgets.staticRender();})
}
") %>%
  add_deps("jsonedit", "listviewer") %>%
  browsable()

Possible real world examples

_NB look up that reverse geocoding so click on leaflet anf get map - say nearest weather station

  • weather by city
  • sunrise/set

alternative htmlwidgets e.g sunburst/wordcloud2

comments powered by Disqus