Menu
I am using R leaflet to produce a leaflet map. I was able to change the border of my legend
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
}
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":"© <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>
461
map <- leaflet(countries) %>% addTiles() Use the addLegendfunction to add a legend. The easiest way to use addLegendis to provide pal(a palette function, as generated from colorNumericet al.) and values, and let it calculate the colors and labels for you.
You can add two or more legends to a plot, just running the legend function multiple times with different arguments. In the following example we are going to add two more Bessel functions and add a new legend for them. Note that you can also add more legends outside the plot, in case the legends doesn’t fit inside the layout.
In order to change the legend size in R you can make use of the cex argument. Values bigger than 1 will lead to a bigger legend and smaller to smaller legends than the default.
Note that if you need to add a legend to a bar plot, pie chart or box plot you can use the fill argument instead of setting lines. If your plot have shading lines you can also add them to the legend with the density argument and modify the angle on the lines with the angle argument of the function.
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
))
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
