rr-leafletr-mapedit

How to change the tooltips of a leafpm toolbar?

I'm using leaflet with the leafpm toolbar and would like to edit the tooltips of the different tools from the toolbar. By default, the tooltips are "Zoom In", "Zoom Out", "Draw Marker", "Draw Polygon", "Draw Polyline" and I'd like to customize them to best fit the specific usage of my leaflet (e.g., replace "Draw Polygon" by "Draw the borders of your field").

I found some JS solutions to change tooltips languages (Changing Leaflet map tooltip language) with L.drawLocal.draw.toolbar.buttons.polygon = "Draw the borders of your field" but I don't know how to use that in R.

You'll find a basic map with the leafpm toolbar showing the tooltips mentioned above.

library(shiny) ; library(leaflet) ; library(mapedit) ; library(leafpm)

ui<-shinyUI(
  editModUI("map", height=600)
)

server <- function(input, output, session) {
  observe({
    edits <- callModule(
      editMod,
      leafmap = leaflet() %>% addTiles(),
      id = "map",
      editor="leafpm",
      editorOptions=list(toolbarOptions = pmToolbarOptions(drawMarker=T, drawPolygon=T, drawPolyline=T, drawCircle=F, drawRectangle=F, removalMode=T, cutPolygon=T, editMode=T))
    )
  })
}

shinyApp(ui = ui, server = server)
Solution

  • You can use an htmlwidgets::onRender() for re-defining the title attribute of the buttons.

    enter image description here

    library(shiny)
library(leaflet)
library(mapedit)
library(leafpm)

ui <- shinyUI(editModUI("map", height = 600))

server <- function(input, output, session) {
  observe({
    edits <- callModule(
      editMod,
      leafmap = leaflet() %>%
        addTiles() |>
        htmlwidgets::onRender(
          "function(el, x) {
             document.querySelector('.control-icon.leaflet-pm-icon-polygon')
                     .setAttribute('title', 'Draw the borders of your field');

             // other selectors:
             // .leaflet-control-zoom-in
             // .leaflet-control-zoom-out
             // .control-icon.leaflet-pm-icon-marker
             // .control-icon.leaflet-pm-icon-polyline
             // .control-icon.leaflet-pm-icon-rectangle
             // .control-icon.leaflet-pm-icon-circle
             // .control-icon.leaflet-pm-icon-edit
             // .control-icon.leaflet-pm-icon-drag
             // .control-icon.leaflet-pm-icon-cut
             // .control-icon.leaflet-pm-icon-delete
           }"
        ),
      id = "map",
      editor = "leafpm",
      editorOptions = list(
        toolbarOptions = pmToolbarOptions(
          drawMarker = TRUE,
          drawPolygon = TRUE,
          drawPolyline = TRUE,
          drawCircle = FALSE,
          drawRectangle = FALSE,
          removalMode = TRUE,
          cutPolygon = TRUE,
          editMode = TRUE
        )
      )
    )
  })
}

shinyApp(ui = ui, server = server)