CODEWITHSUNDEEP
javascriptrleaflet
Tom__Jenkins
Tom__Jenkins

Reputation: 129

R leaflet: adding an information popup using easyButton

I am building a leaflet map within R Studio and I want to place an information icon on the top-left of the map as an easyButton which allows users to click and popup some text information with some hyperlinks. The example text I would like to show is something like this:

Title of paragraph 1
Information about this particular feature.

Title of paragraph 2
Information about a different feature. Here is a link to more info.

Below is a reproducible example of what I have got so far. At present, I have an 'alert' but a simple popup would be preferred, though I have limited knowledge of JavaScript so any help would be greatly appreciated.

library(leaflet)

leaf = leaflet() %>%
  addTiles() %>%
  addEasyButton(easyButton(
    icon = htmltools::span(class = "star", htmltools::HTML("★")),
    onClick = JS("function(btn, map){ map.setZoom(1);}")))

leaf %>% addEasyButton(easyButton(
  icon = "fa-info-circle", title = "Map Information",
  onClick = JS("function(btn, map){ alert('Note: this feature is still in development') }")))

Upvotes: 0

Views: 1076

Answers (1)

gilberg
gilberg

Reputation: 121

I have just added a similar feature to my map by using the hints in this answer. The solution uses a bootstrap modal as an overlay and is easily configurable via the CSS tags in the info.box HTML.

Instead of adding htmlDependency like in this answer, which did not work for me with R leaflet, just use the built-in function addBootstrapDependency(). After creating the leaflet map, which is "just" a htmlwidget, add the defined infobox-HTML to the object with htmlwidgets::appendContent(info.box).

A solution using the info you provided:

library(leaflet)
library(htmlwidgets)

# Define HTML for the infobox
info.box <- HTML(paste0(
  HTML(
    '<div class="modal fade" id="infobox" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button>'
  ),

  # Header / Title
  HTML("Note: This feature is still in development"),
  HTML(
    '</div><div class="modal-body">'
  ),

  # Body
  HTML('<h4>Title of paragraph 1</h4>
<p>Information about this particular feature.</p>
<hr>
<h4>Title of paragraph 2</h4>
<p>Information about a different feature. Here is a <a href="https://tomjenkins.netlify.app/">link</a> to more info.</p>'),

  # Closing divs
  HTML('</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div>')
))

# Define the map
leaf <- leaflet() %>%
  addTiles() %>%
  addBootstrapDependency() %>% # Add Bootstrap to be able to use a modal
  addEasyButton(easyButton(
    icon = htmltools::span(class = "star", htmltools::HTML("&starf;")),
    onClick = JS("function(btn, map){ map.setZoom(1);}")
  )) %>%
  addEasyButton(easyButton(
    icon = "fa-info-circle", title = "Map Information",
    onClick = JS("function(btn, map){ $('#infobox').modal('show'); }")
  )) %>% # Trigger the infobox
  htmlwidgets::appendContent(info.box)

leaf

Result:

enter image description here

Hope this helps you! Would love to see something similar integrated in the leaflet package.

Upvotes: 4

Related Questions