Leaflet for R：如何更改默认CSS集群类 [英] Leaflet for R: How to change default CSS cluster classes

问题描述

如何从Leaflet for R界面中更改定义集群对象的默认CSS类？例如，如果我想从.marker-cluster-small类中删除不透明度，我该如何在R？中执行此操作。

这里是创建集群类： https： //github.com/Leaflet/Leaflet.markercluster/blob/64a2d5711521e56cac8ab863fb658beda5690600/dist/leaflet.markercluster-src.js

例如，我想要从集群中移除不透明度，例如

  .marker-cluster-small {
 background-color：rgba ，226,140,​​1.0）; 
} 
 .marker-cluster-small div {
 background-color：rgba（110，204，57，1.0）; 
} 
  

有没有办法从iconCreateFunction？

 库（leaflet）
 leaflet（quakes）％>％addTiles（）％>％addMarkers（
 clusterOptions = markerClusterOptions（iconCreateFunction = JS（function（cluster）{
 var childCount = cluster.getChildCount（）; 
 var c ='marker-cluster-'; 
 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）}）; 
 
}））
）
  pre> 
 
解决方案
您可以尝试在创建图标的函数中为不同的标记添加内联CSS，例如： / p> 
 
 
  clusterOptions = markerClusterOptions（iconCreateFunction = JS（function（cluster）{
 var childCount = cluster.getChildCount（）; 
 if（childCount <100）{
c ='rgba（181，226，140，1.0）;'
} else if（childCount< 1000）{
c = rgba（240，194，12，1）;'
} else {
c ='rgba（241，128，23，1）;'
} 
 return new L. DivIcon（{html：'< div style = \background-color：'+ c +'\>< span>'+ childCount +'< / span>< / div>'，className： 'marker-cluster'，iconSize：new L.Point（40，40）}）; 
 
}）
  
如果使用闪亮，您还可以更改 iconCreateFunction 为每个标记分配不同的类，并添加标记$ style 在头文件中为这些类设置CSS。下面是一个例子：
  ui<  -  fluidPage 
 tags $ head（tags $ style（HTML（
 .marker-custom-small {
 background-color：rgba（181，226，140，1）; 
} 
 .marker-customr-small div {
 background-color：rgba（110，204，57，1）; 
} 
 
 .marker-custom-medium {
 background-color：rgba（241，211，87，1）; 
} 
 .marker-custom-medium div {
 background-color：rgba ，12，1）; 
} 
 
 .marker-custom-large {
 background-color：rgba（253，156，115，1）; 
} 
 .marker-custom-large div {
 background-color：rgba（241，128，23，1）; 
}）），
 leafletOutput ）
 
 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）}）; 
 
}））
）
}）
} 
 
 shinyApp（ui，server）
  
无法找出如何在小册子 闪亮应用程式。
 
How do I change the default CSS classes which define cluster objects from within the Leaflet for R interface? For example, if I wanted to remove the opacity from the .marker-cluster-small class, how could I do this from within R?

Here is the CSS which creates the cluster classes: https://github.com/Leaflet/Leaflet.markercluster/blob/64a2d5711521e56cac8ab863fb658beda5690600/dist/leaflet.markercluster-src.js

For example, I want to remove the opacity from the clusters, e.g.
.marker-cluster-small {
    background-color: rgba(181, 226, 140, 1.0);
    }
.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 1.0);
    }
Is there a way to do this from within iconCreateFunction ?
library(leaflet)
leaflet(quakes) %>% addTiles() %>% addMarkers(
  clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {    
    var childCount = cluster.getChildCount(); 
    var c = ' marker-cluster-';  
    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) });

  }"))
)

解决方案
You can maybe try to add inline CSS to the different markers in the function that creates the icons, for ex:
clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {    
    var childCount = cluster.getChildCount();  
    if (childCount < 100) {  
      c = 'rgba(181, 226, 140, 1.0);'
    } else if (childCount < 1000) {  
      c = 'rgba(240, 194, 12, 1);'  
    } else { 
      c = 'rgba(241, 128, 23, 1);'  
    }    
    return new L.DivIcon({ html: '<div style=\"background-color:'+c+'\"><span>' + childCount + '</span></div>', className: 'marker-cluster', iconSize: new L.Point(40, 40) });

  }")
If you are using shiny, you can also change the iconCreateFunction to assign a different class to each marker, and add tags$style in the header to set the CSS for these classes. Here's an example:
ui <- fluidPage(
  tags$head(tags$style(HTML("
  .marker-custom-small {
  background-color: rgba(181, 226, 140, 1);
    }
.marker-customr-small div {
    background-color: rgba(110, 204, 57, 1);
    }

.marker-custom-medium {
    background-color: rgba(241, 211, 87, 1);
    }
.marker-custom-medium div {
    background-color: rgba(240, 194, 12, 1);
    }

.marker-custom-large {
    background-color: rgba(253, 156, 115, 1);
    }
.marker-custom-large div {
    background-color: rgba(241, 128, 23, 1);
    }"))),
  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) });

  }"))
    )
  })
}

shinyApp(ui,server)
Couldn't figure out how to have custom CSS in the leaflet outside of a shiny app.

                        
这篇关于Leaflet for R：如何更改默认CSS集群类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！