我正在使用 leaflet 和 shiny 创建一个带有集群的小 map 。为此,我需要更改簇的颜色,这是我使用来自对 this question 的回复的代码完成的。 .但是,我无法让它在 leafletProxy()
中工作,我需要它来允许用户过滤显示的数据。这是一个显示问题的示例(我刚刚将所有簇都涂成红色):
library(shiny)
library(leaflet)
ui <- fluidPage(
tags$head(tags$style(HTML("
.marker-custom-small {
background-color: rgba(255, 0, 0, 1);
}
.marker-customr-small div {
background-color: rgba(255, 0, 0, 1);
}
.marker-custom-medium {
background-color: rgba(255, 0, 0, 1);
}
.marker-custom-medium div {
background-color: rgba(255, 0, 0, 1);
}
.marker-custom-large {
background-color: rgba(255, 0, 0, 1);
}
.marker-custom-large div {
background-color: rgba(255, 0, 0, 1);
}"))),
actionButton("but", "New clusters, please!"),
leafletOutput("mymap")
)
server<-function(input, output, session) {
output$mymap <- renderLeaflet({
leaflet(quakes) %>% addTiles() %>% addMarkers(
clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {
var childCount = cluster.getChildCount();
var c = ' marker-custom-';
if (childCount < 100) {
c += 'large';
} else if (childCount < 1000) {
c += 'medium';
} else {
c += 'small';
}
return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
}"))
)
})
observeEvent(input$but, {
leafletProxy("mymap") %>%
clearMarkerClusters() %>%
addMarkers(data = quakes,
clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {
var childCount = cluster.getChildCount();
var c = ' marker-custom-';
if (childCount < 100) {
c += 'large';
} else if (childCount < 1000) {
c += 'medium';
} else {
c += 'small';
}
return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
}"))
)
})
}
shinyApp(ui,server)
当用户单击该按钮时,应显示新的聚类(在本例中为相同点),但没有任何反应。 R 报告没有错误,addMarkers()
正在读取地震数据,因为我收到消息 Assuming 'long' and 'lat' are longitude and latitude, respectively
在控制台中。我怀疑问题与 leafletProxy()
中的 addMarkers()
调用有关,没有找到(?)集群类,因为替换...
clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {
var childCount = cluster.getChildCount();
var c = ' marker-custom-';
if (childCount < 100) {
c += 'large';
} else if (childCount < 1000) {
c += 'medium';
} else {
c += 'small';
}
return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
}"))
只有...
clusterOptions = markerClusterOptions()
...使具有标准颜色的簇显示得很好。
如果能提供一些帮助,我将不胜感激!
最好的,
贝特尔
最佳答案
遵循 Shiny 文章网站上的建议 here我设法使用链接到 ui.R
和 includeCSS()
函数的自定义样式表来实现这一点。添加集群时我没有使用任何 JS 表达式,我的自定义颜色也很好。
例如代码:
library(shiny)
library(leaflet)
ui <- fluidPage(
includeCSS("./style.css"),
actionButton("but", "New clusters, please!"),
leafletOutput("mymap")
)
server<-function(input, output, session) {
output$mymap <- renderLeaflet({
leaflet(quakes) %>% addTiles() %>% addMarkers(clusterOptions =
markerClusterOptions())
})
observeEvent(input$but, {
leafletProxy("mymap") %>%
clearMarkerClusters() %>%
addMarkers(data = quakes,
clusterOptions = markerClusterOptions())
})
}
shinyApp(ui,server)
应该有效,您只需要确保完全指定默认样式中定义的所有样式(在 ./path/to/your/package/library/leaflet 中找到/htmlwidgets/plugins/Leaflet.markercluster/MarkerCluster.Default
)
例如,要将所有簇着色为红色(按照您的原始示例),您可以使用:
样式.css
:
.marker-cluster-small {
background-color: rgba(255, 0, 0, 1);
}
.marker-cluster-small div {
background-color: rgba(255, 0, 0, 1);
}
.marker-cluster-medium {
background-color: rgba(255, 0, 0, 1);
}
.marker-cluster-medium div {
background-color: rgba(255, 0, 0, 1);
}
.marker-cluster-large {
background-color: rgba(255, 0, 0, 1);
}
.marker-cluster-large div {
background-color: rgba(255, 0, 0, 1);
}
/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
background-color: rgb(255, 0, 0);
}
.leaflet-oldie .marker-cluster-small div {
background-color: rgb(255, 0, 0);
}
.leaflet-oldie .marker-cluster-medium {
background-color: rgb(255, 0, 0);
}
.leaflet-oldie .marker-cluster-medium div {
background-color: rgb(255, 0, 0);
}
.leaflet-oldie .marker-cluster-large {
background-color: rgb(255, 0, 0);
}
.leaflet-oldie .marker-cluster-large div {
background-color: rgb(255, 0, 0);
}
.marker-cluster {
background-clip: padding-box;
border-radius: 20px;
}
.marker-cluster div {
width: 30px;
height: 30px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
border-radius: 15px;
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
line-height: 30px;
}
这应该允许您完全自定义集群,并让它们在您使用 leafletProxy()
时正确显示。
关于html - R : CSS defined in header is not working inside leafletProxy 的传单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37694261/