UI widgets for visualize large image

Question

Is there any good tool/UI widgets to visualize a large image/pdf document. Hopefully a tool that behaves like how google map is being visualize, where you have the zoom functionality and can drag to different parts of the image

Answer 1

For PDF, I don't know. For images, you can try the JavaScript library imgViewer2.

library(shiny)

js <- '$(document).ready(function(){ $("#myimage").imgViewer2(); });'

ui <- fluidPage(
  tags$head(
    tags$link(
      rel = "stylesheet", 
      href = "https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"),
    tags$link(
      rel = "stylesheet", 
      href = "http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css", 
      media = "screen"),
    tags$script(src = "https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"),
    tags$script(src = "http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"),
    tags$script(
      src = "https://cdn.jsdelivr.net/npm/imgviewer2@1.1.0/src/imgViewer2.min.js"),
    tags$script(HTML(js))
  ),
  br(),
  tags$img(id = "myimage", 
           src = "https://images.plot.ly/language-icons/api-home/r-logo.png", 
           width = "20%")
)

server <- function(input, output, session){}

shinyApp(ui, server)

---

Or the panzoom library:

library(shiny)

js <- '
$(document).ready(function(){ 
  var img = document.getElementById("myimage");
  panzoom(img);
});'

ui <- fluidPage(
  tags$head(
    tags$script(
      src = "https://unpkg.com/panzoom@8.7.3/dist/panzoom.min.js"),
    tags$script(HTML(js))
  ),
  br(),
  tags$img(id = "myimage", 
           src = "https://images.plot.ly/language-icons/api-home/r-logo.png", 
           width = "20%")
)

server <- function(input, output, session){}

shinyApp(ui, server)

---

Or give a try to the R package svgPanZoom.