如何在浏览器中的R Shiny中更改Leaflet中的光标

时间:2022-02-12 14:27:55

I have an interactive R Markdown document using Shiny, which includes a Leaflet map control. When I run the app locally it is fine, but when I run it in a browser, the cursor changes to a "grabbing hand" --- I want it to remain as a pointer. How do I do this? I have found various suggestions about modifying the CSS file or running Javascript or JQuery but I haven't been successful in getting these to work in R. Thanks.

我有一个使用Shiny的交互式R Markdown文档,其中包括Leaflet地图控件。当我在本地运行应用程序时它很好,但是当我在浏览器中运行它时,光标变为“抓手” - 我希望它保持为指针。我该怎么做呢?我已经找到了关于修改CSS文件或运行Javascript或JQuery的各种建议,但我还没有成功地让这些在R中工作。谢谢。

---
title: "Leaflet Reprex"
runtime: shiny
output: html_document
---

```{r echo=FALSE, eval=TRUE}
library(leaflet) 

my <- reactiveValues(long=175.619105, lat=-40.386396)
v <- reactiveValues(zoom=5, minzoom=5, maxzoom=15, long=NA, lat=NA) 

isolate({
  cat(file=stderr(), paste("initialise location"), "\n")
  v$long <- my$long
  v$lat <- my$lat
})

#### make initial map ####
output$map <- renderLeaflet({
  cat(file=stderr(), paste("render leaflet"), "\n")

    isolate({ # prevent redraw if arguments change

      leaflet(options=leafletOptions(minZoom=v$minzoom, maxZoom=v$maxzoom)) %>%
        setView(v$long, v$lat, zoom=v$zoom)  %>%
        addTiles() %>% # default map
        addMarkers(my$long, my$lat, "layer1", options=pathOptions(clickable=FALSE)) 

    })

  }) # end renderLeaflet

#### ui ####
shinyUI(fluidPage(
      leafletOutput("map", width="100%", height=480) # can manipulate size here
)) # end fluidPage

#### react to mouse clicks ####
observeEvent(input$map_click, {

  cat(file=stderr(), "\n")
  cat(file=stderr(), paste("observed map_click"), "\n")    

  click <- input$map_click
  my$long <- click$lng
  my$lat <- click$lat

  # mark map
  leafletProxy("map", deferUntilFlush=FALSE) %>%
    addMarkers(my$long, my$lat, "layer1", options=pathOptions(clickable=FALSE)) 

}) # end observe mouse click

```

1 个解决方案

#1


2  

You were on the right track! You can just add css before your leaflet chunk:

你走在正确的轨道上!您可以在传单块之前添加css:

```{css, echo = FALSE}
.leaflet-container {
  cursor: auto !important;
}
```

I got the css from this answer and the chunk location from this thread. If you're interested, the different cursor options are listed here.

我从这个答案和这个帖子的块位置得到了css。如果您有兴趣,可以在此处列出不同的光标选项。

如何在浏览器中的R Shiny中更改Leaflet中的光标


---
title: "Leaflet Reprex"
runtime: shiny
output: html_document 
---

```{css, echo = FALSE}
.leaflet-container {
  cursor: auto !important;
}
```

```{r echo=FALSE, eval=TRUE}
library(leaflet) 

my <- reactiveValues(long=175.619105, lat=-40.386396)
v <- reactiveValues(zoom=5, minzoom=5, maxzoom=15, long=NA, lat=NA) 

isolate({
  cat(file=stderr(), paste("initialise location"), "\n")
  v$long <- my$long
  v$lat <- my$lat
})

#### make initial map ####
output$map <- renderLeaflet({
  cat(file=stderr(), paste("render leaflet"), "\n")

    isolate({ # prevent redraw if arguments change

      leaflet(options=leafletOptions(minZoom=v$minzoom, maxZoom=v$maxzoom)) %>%
        setView(v$long, v$lat, zoom=v$zoom)  %>%
        addTiles() %>% # default map
        addMarkers(my$long, my$lat, "layer1", options=pathOptions(clickable=FALSE)) 

    })

  }) # end renderLeaflet

#### ui ####
shinyUI(fluidPage(
      leafletOutput("map", width="100%", height=480) # can manipulate size here
)) # end fluidPage

#### react to mouse clicks ####
observeEvent(input$map_click, {

  cat(file=stderr(), "\n")
  cat(file=stderr(), paste("observed map_click"), "\n")    

  click <- input$map_click
  my$long <- click$lng
  my$lat <- click$lat

  # mark map
  leafletProxy("map", deferUntilFlush=FALSE) %>%
    addMarkers(my$long, my$lat, "layer1", options=pathOptions(clickable=FALSE)) 

}) # end observe mouse click

```

#1


2  

You were on the right track! You can just add css before your leaflet chunk:

你走在正确的轨道上!您可以在传单块之前添加css:

```{css, echo = FALSE}
.leaflet-container {
  cursor: auto !important;
}
```

I got the css from this answer and the chunk location from this thread. If you're interested, the different cursor options are listed here.

我从这个答案和这个帖子的块位置得到了css。如果您有兴趣,可以在此处列出不同的光标选项。

如何在浏览器中的R Shiny中更改Leaflet中的光标


---
title: "Leaflet Reprex"
runtime: shiny
output: html_document 
---

```{css, echo = FALSE}
.leaflet-container {
  cursor: auto !important;
}
```

```{r echo=FALSE, eval=TRUE}
library(leaflet) 

my <- reactiveValues(long=175.619105, lat=-40.386396)
v <- reactiveValues(zoom=5, minzoom=5, maxzoom=15, long=NA, lat=NA) 

isolate({
  cat(file=stderr(), paste("initialise location"), "\n")
  v$long <- my$long
  v$lat <- my$lat
})

#### make initial map ####
output$map <- renderLeaflet({
  cat(file=stderr(), paste("render leaflet"), "\n")

    isolate({ # prevent redraw if arguments change

      leaflet(options=leafletOptions(minZoom=v$minzoom, maxZoom=v$maxzoom)) %>%
        setView(v$long, v$lat, zoom=v$zoom)  %>%
        addTiles() %>% # default map
        addMarkers(my$long, my$lat, "layer1", options=pathOptions(clickable=FALSE)) 

    })

  }) # end renderLeaflet

#### ui ####
shinyUI(fluidPage(
      leafletOutput("map", width="100%", height=480) # can manipulate size here
)) # end fluidPage

#### react to mouse clicks ####
observeEvent(input$map_click, {

  cat(file=stderr(), "\n")
  cat(file=stderr(), paste("observed map_click"), "\n")    

  click <- input$map_click
  my$long <- click$lng
  my$lat <- click$lat

  # mark map
  leafletProxy("map", deferUntilFlush=FALSE) %>%
    addMarkers(my$long, my$lat, "layer1", options=pathOptions(clickable=FALSE)) 

}) # end observe mouse click

```