带R小册子的自定义图例

Question

I am using R leaflet to produce a leaflet map. 我正在使用R小册子来制作传单地图。 I was able to change the border of my legend 我能够改变传说的边界

by adding to my css file (after saving the leaflet map on my computer) 通过添加到我的CSS文件（在我的计算机上保存传单地图后）

.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 ): 我用过（来自： 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. 我是css的新手，所以任何建议都会受到赞赏。

Here is my html doc. 这是我的HTML文档。

<!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>

Answer 1

Since there is no R code provided, I just used the first example from ?addLegend . 由于没有提供R代码，我只使用了来自?addLegend的第一个例子。 In the future some reproducible R code would be helpful. 将来，一些可重现的R代码会有所帮助。 The custom style you specify for .legend .circle will not apply since the legend rectangle we get from leaflet is .legend i . 您为.legend .circle指定的自定义样式将不适用，因为我们从leaflet获取的图例矩形是.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. 注意，如果需要，我们可以使用addLegend的className参数更具体地标识我们的元素，但我不认为这对您的示例是必要的。

I changed margin-top to 4px so the circles center; 我将margin-top更改为4px因此圈子居中; 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
  ))
)

带R小册子的自定义图例

问题描述

1 个解决方案

解决方案1
6 已采纳 2016-03-04 18:17:09

带R小册子的自定义图例

问题描述

1 个解决方案

解决方案1 6 已采纳 2016-03-04 18:17:09

解决方案1
6 已采纳 2016-03-04 18:17:09