How to control popup's width for leaflet-feature's popup in R?

Question

I would like to control the width of a leaflet-feature popup via R, how can I do that?

  output$HomeMap <- renderLeaflet(leaflet() %>% 
                              addTiles() %>% 
                              setView(1.93, 41.48, zoom = 3) %>% 
                              addPolygons(data = subset(world, name %in%  datasourceInput()), 
                                          color = datasourceColor(), 
                                          weight = 1, 
                                          popup = datasourcePopups()
                              ))

I do not understand how to control the options associated to the popup..

Many thanks in advance for your help on this issue and best regards!

Answer 1

I had a similar issue in creating the series of maps that I am working on right now. Any formatting that I would want to be done on the html/css/javascripted page, is made inside quotations, I used double quotes example: "<br>" to create a line break and start the next piece of information on the next line.

To give order to it, I used a set of tables...I had 16 rows with text and wanted to use the last row for a png image. It worked, but the image made the text scale off the side of the popup above...the background did not scale with it.

So I did some playing around with the code, scoured the net, and then inserted this line of code at the very top of my popup variable:

myPopUp<- paste("<style> div.leaflet-popup-content {width:auto !important;}</style>", 
myvariable, "some copy to print", another variable)

Making sure the entire popup is inside of the paste function and now the popup automatically adjusts to the size of the content. This does mean that you need to pay attention to your copy length and appropriately size any images in your popups.

I have mine set up to pull 16 values and a graph from one of 292 census tracts and drop in the right data and cached images, then re-scale and it is working flawlessly. You might want to give it a try.

this is the magic code: "<style> div.leaflet-popup-content {width:auto !important;}</style>"

This is how it looks

Now if only I could make the popup anchor somewhere that I approved of consistently!