create thumbnails in rshiny using leaflet

Viewed 155

Is it possible to add small images (thumbnails) instead of markers/circlemarkers in r leaflet?

I use leaflet to create maps in r shiny and it works fine so far. I have a large dataset of spatial points and each of my points shown on the map contains an image related to that specific location. Using leaflet I can show that image either by mouse hovering within a reactive content

observeEvent(input$map1_marker_mouseover$id {})

or by click as popupImage.

What I would like now is that the image is displayed without hovering or clicking, but all the time (from a certrain zoom level).

Find below a minimal working example.

library(shiny)
library(leaflet)
library(mapview)
library(leafpop)
library(sf)


# testdata
loc = data.frame(x = jitter(rep(8.620000, 10), factor = 0.1),
                 y = jitter(rep(47.320000, 10), factor = 0.1))
loc = st_as_sf(loc, coords = c("x", "y"), crs = 4326)
image = 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Rlogo.png/274px-Rlogo.png'


# === UI ==========================

ui <- fluidPage(
  div(class="outer", # use full space

      # leaflet
      leafletOutput("map1", width="100%", height="100%")),

      # css-styling
      tags$head(tags$style(HTML("
                                           #map{
                                             margin-top:18px;
                                             margin-bottom:18px;
                                           }
                                           .outer {
                                              position: fixed;
                                              top: 0;
                                              left: 0;
                                              right: 0;
                                              bottom: 0;
                                              overflow: hidden;
                                              padding: 0;
                                              margin-top:0;
                                            }
                                           ")))
)


# === Server ==========================
server <- function(input, output, session) {      

  # === map
  output$map1 <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%
      addCircleMarkers(data=loc, radius = 5,
                     clusterOptions = markerClusterOptions(),
                     popup = paste0("<img src = ", image, ">"),
                     group="points") 
  })

}

# === RUN APP ==========================       
shinyApp(ui, server)


1 Answers

Please try the below based on the leaflet documentation:

library(shiny)
library(leaflet)
library(mapview)
library(leafpop)
library(sf)


# testdata
loc = data.frame(x = jitter(rep(8.620000, 10), factor = 0.1),
                 y = jitter(rep(47.320000, 10), factor = 0.1))
loc = st_as_sf(loc, coords = c("x", "y"), crs = 4326)
RIcon <- makeIcon(iconUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Rlogo.png/274px-Rlogo.png',
                  iconWidth = 20)


# === UI ==========================

ui <- fluidPage(
    div(class="outer", # use full space

        # leaflet
        leafletOutput("map1", width="100%", height="100%")),

    # css-styling
    tags$head(tags$style(HTML("
                                           #map{
                                             margin-top:18px;
                                             margin-bottom:18px;
                                           }
                                           .outer {
                                              position: fixed;
                                              top: 0;
                                              left: 0;
                                              right: 0;
                                              bottom: 0;
                                              overflow: hidden;
                                              padding: 0;
                                              margin-top:0;
                                            }
                                           ")))
)


# === Server ==========================
server <- function(input, output, session) {      

    # === map
    output$map1 <- renderLeaflet({
        leaflet() %>%
            addTiles() %>%
            addMarkers(data=loc, icon = RIcon,
                             clusterOptions = markerClusterOptions(),
                             group="points") 
    })

}

# === RUN APP ==========================       
shinyApp(ui, server)
Related