8

I am using R leaflet to produce a leaflet map. I was able to change the border of my legend

enter image description here

by adding to my css file (after saving the leaflet map on my computer)

.legend {
    padding: 6px 10px 6px 6px;
    color: #000033;
    background: #fff;
    border-left:5px solid #666666;
    border-right:5px solid #666666;
    border-top:5px solid #666666;
    border-bottom:5px solid #666666
}

enter image description here

However when I try to replace the squares with circles (to match the circles on the map) in my legend it does not work. I used (from:https://gis.stackexchange.com/questions/88462/how-to-create-leaflet-legend-for-points):

.legend .circle {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 8px;
}

I am new to css so any suggestions would be appreciated.

Here is my html doc.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="test_files/htmlwidgets-0.5/htmlwidgets.js"></script>
<script src="test_files/jquery-1.11.1/jquery.min.js"></script>
<link href="test_files/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<script src="test_files/leaflet-0.7.3/leaflet.js"></script>
<link href="test_files/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
<link href="test_files/leaflet-label-0.2.2/leaflet.label.css" rel="stylesheet" />
<script src="test_files/leaflet-label-0.2.2/leaflet.label.js"></script>
<script src="test_files/leaflet-binding-1.0.1.9002/leaflet.js"></script>

</head>
<body style="background-color:white;">
<div id="htmlwidget_container">
  <div id="htmlwidget-9645" style="width:100%;height:400px;" class="leaflet"></div>
</div>
<script type="application/json" data-for="htmlwidget-9645">{"x":{"calls":[{"method":"addTiles","args":["http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"maxNativeZoom":null,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"continuousWorld":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":null,"unloadInvisibleTiles":null,"updateWhenIdle":null,"detectRetina":false,"reuseTiles":false,"attribution":"&copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>"}]},{"method":"addCircles","args":[[42.3601,41.7627,40.7127,39.95,40.4397,41.8236],[-71.0589,-72.6743,-74.0059,-75.1667,-79.9764,-71.4222],[24111.6030159755,10607.3229421942,86979.3078841169,37385.8261912185,16590.8679700611,12656.8005435813],null,null,{"lineCap":null,"lineJoin":null,"clickable":true,"pointerEvents":null,"className":"","stroke":true,"color":["#FF0000","#FF9000","#B649AF","#B873BC","#C7C617","#000000"],"weight":1,"opacity":0.5,"fill":true,"fillColor":["#FF0000","#FF9000","#B649AF","#B873BC","#C7C617","#000000"],"fillOpacity":0.2,"dashArray":null},["Boston","Hartford","New York City","Philadelphia","Pittsburgh","Providence"],null,null]},{"method":"addLegend","args":[{"colors":["#FF0000","#FF9000","#B649AF","#B873BC","#C7C617","#000000"],"labels":["Boston","Hartford","New York City","Philadelphia","Pittsburgh","Providence"],"na_color":null,"na_label":"NA","opacity":0.5,"position":"bottomright","type":"factor","title":"Cities","extra":null,"layerId":null,"className":"info legend"}]}],"limits":{"lat":[39.95,42.3601],"lng":[-79.9764,-71.0589]}},"evals":[]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-9645">{"viewer":{"width":"100%","height":400,"padding":0,"fill":true},"browser":{"width":"100%","height":400,"padding":0,"fill":true}}</script>
</body>
</html>
Improve this question
2
  • your html is missing here :)
    – G-Cyrillus
    Commented Mar 3, 2016 at 17:58
  • Could you set it up as a Fiddle.js?
    – Abbe
    Commented Mar 4, 2016 at 15:00

1 Answer 1

Reset to default
11

Since there is no R code provided, I just used the first example from ?addLegend. In the future some reproducible R code would be helpful. The custom style you specify for .legend .circle will not apply since the legend rectangle we get from leaflet is .legend i. Note, we could use the className argument in addLegend to more specifically identify our elements if necessary, but I don't think this is necessary for your example.

I changed margin-top to 4px so the circles center; adjust as necessary

# from ?addLegend

# !formatR
library(leaflet)

# a manual legend
leaf <- leaflet() %>%
  addTiles() %>%
  addLegend(
    position = 'bottomright',
    colors = rgb(t(col2rgb(palette())) / 255),
    labels = palette(), opacity = 1,
    title = 'An Obvious Legend'
  )

# see what it looks like with no customization
leaf

# you specify a custom style like this
#   but the legend rectanges are .legend i
#   instead of .legend .circle
library(htmltools)
browsable(
  tagList(list(
    tags$head(
      tags$style(
        ".leaflet .legend i{
            border-radius: 50%;
            width:10px;
            height: 10px;
            margin-top: 4px;
         }"
      )
    ),
    leaf
  ))
)
Improve this answer
4
  • 1
    it's exactly what I wanted! But a quick follow-up question, Why is the map only showed in the top half of the browser?
    – MLavoie
    Commented Mar 4, 2016 at 18:44
  • fyi, when I save the map, it produces a file leafletfix.css and then the .legend i{} expression can be added to this file and it works as well. thanks
    – MLavoie
    Commented Mar 4, 2016 at 18:56
  • for the complete CSS style reference check this: github.com/rstudio/leaflet/blob/master/inst/htmlwidgets/lib/…
    – Ufos
    Commented Jun 8, 2018 at 13:23
  • 1
    @timelyportfolio the browsable function returns an object of "shiny.tag.list" "list" . Is there a way to modify it to return the same "leaflet" "htmlwidget"?
    – Ufos
    Commented Jun 8, 2018 at 14:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.