[R shiny] interactive mapping 그림 상단 navbarPage에 이미지 넣기

interactive mapping 그림을 그리다 보니 navbarPage 함수를 이용하여 그림 위쪽에 shiny app의 이름과 탭을 만들게 되었다. App을 더 꾸미고 싶다보니 이름 부분에 이미지를 넣고 싶었지만 쉽게 고칠 수 없었다.

html에서 margin 부분을 수정해야 한다는 것을 직감적으로는 알고 있었지만 코드를 몰라 한참을 헤메였고 stack overflow에서 해결 방법을 찾게 되었다.


(1) 첫 번째로 shiny app의 ui.R과 server.R가 있는 폴더에 이름이 www인 폴더를 생성한다. www 폴더에 빨간 부분에 넣을 이미지 파일을 넣는다.

(2) 두 번째로 ui의 fluidPage 안에 아래의 style 코드를 입력한다. 

tags$style(".img {
             margin-left:-15px;
             margin-right:-15px;
             margin-top:-15px;
             }"),

이름이 img인 style을 생성한다는 의미이다. 이 style은 margin을 수정하도록 되어있다.

(3) 세 번째로 ui.R에서 navbarPage 부분의 title을 title=div(class="img",img(src='이미지 파일 이름',height=이미지의 높이, width=이미지의 폭))로 바꿔준다. class="img" 부분이 두 번째에서 만든 style을 적용한다는 의미다. 여러 개의 이미지를 적용시켜보니 동영상 이미지(gif)도 가능했다.


최종 코드는 아래와 같다.
1. ui.R

library(shiny)
library(leaflet)

ui <- fluidPage(
  
  title="ebichu",
  
  tags$style(".img {
             margin-left:-15px;
             margin-right:-15px;
             margin-top:-15px;
             }"),
  
  # navbarPage(title="map",position = c("fixed-top"),
  navbarPage(title=div(class="img",img(src='ebichu.gif',height=51, width=51)),position = c("fixed-top"),
    
    tabPanel("tab",
      
      leafletOutput("map",height=800)
    
    )
                          
  )
  
)

2. server.R

library(shiny)
library(leaflet)

server <- function(input,output, session){
  
  output$map <- renderLeaflet({
    
    data<-data.frame(longitude=sample(seq(127,129,0.1),100,replace=T),latitude=sample(seq(35,38,0.1),100,replace=T),value=sample(1:100,100,replace=T))
    
    m <- leaflet(data=data) %>%
         setView(lng=128, lat=37 , zoom=6) %>%
         addProviderTiles(providers$CartoDB.Positron) %>%
         addCircles(lng=data$longitude,lat=data$latitude,popup=as.character(data$value),radius=data$value*100,fillColor="blue",stroke=FALSE,fillOpacity=0.4) %>%
         addLegend("bottomleft",colors="blue",title="Color",labels=c(">1000"))
    
  })
  
}

에비츄 캐릭터를 좋아해서 에비츄 동영상 파일을 넣어보았다. 에비츄 동영상 파일을 넣은 shiny app은 https://inziwiduk.shinyapps.io/ebichu/에서 확인할 수 있다.

※ 참고문헌
https://stackoverflow.com/questions/24705431/how-can-i-insert-an-image-into-the-navbar-on-a-shiny-navbarpage
https://stackoverflow.com/questions/24705431/how-can-i-insert-an-image-into-the-navbar-on-a-shiny-navbarpage
https://stackoverflow.com/questions/45307615/r-shiny-image-without-padding-stretched-across-page-using-css
https://stackoverflow.com/questions/19434991/adding-local-image-with-html-to-a-shiny-app