MarkerCluster.Default.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. .marker-cluster-small {
  2. background-color: rgba(181, 226, 140, 0.6);
  3. }
  4. .marker-cluster-small div {
  5. background-color: rgba(110, 204, 57, 0.6);
  6. }
  7. .marker-cluster-medium {
  8. background-color: rgba(241, 211, 87, 0.6);
  9. }
  10. .marker-cluster-medium div {
  11. background-color: rgba(240, 194, 12, 0.6);
  12. }
  13. .marker-cluster-large {
  14. background-color: rgba(253, 156, 115, 0.6);
  15. }
  16. .marker-cluster-large div {
  17. background-color: rgba(241, 128, 23, 0.6);
  18. }
  19. /* IE 6-8 fallback colors */
  20. .leaflet-oldie .marker-cluster-small {
  21. background-color: rgb(181, 226, 140);
  22. }
  23. .leaflet-oldie .marker-cluster-small div {
  24. background-color: rgb(110, 204, 57);
  25. }
  26. .leaflet-oldie .marker-cluster-medium {
  27. background-color: rgb(241, 211, 87);
  28. }
  29. .leaflet-oldie .marker-cluster-medium div {
  30. background-color: rgb(240, 194, 12);
  31. }
  32. .leaflet-oldie .marker-cluster-large {
  33. background-color: rgb(253, 156, 115);
  34. }
  35. .leaflet-oldie .marker-cluster-large div {
  36. background-color: rgb(241, 128, 23);
  37. }
  38. .marker-cluster {
  39. background-clip: padding-box;
  40. border-radius: 20px;
  41. }
  42. .marker-cluster div {
  43. width: 30px;
  44. height: 30px;
  45. margin-left: 5px;
  46. margin-top: 5px;
  47. text-align: center;
  48. border-radius: 15px;
  49. font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
  50. }
  51. .marker-cluster span {
  52. line-height: 30px;
  53. }
  54. .marker-cluster-level1, .marker-cluster-level5 {
  55. background-color: rgba(252, 77, 55, 0.6)
  56. }
  57. .marker-cluster-level1 div, .marker-cluster-level5 div {
  58. background-color: rgba(252, 77, 55, 1.00);
  59. }
  60. .marker-cluster-level2, .marker-cluster-level6 {
  61. background-color: rgba(251, 116, 56, 0.6);
  62. }
  63. .marker-cluster-level2 div, .marker-cluster-level6 div {
  64. background-color: rgba(251, 116, 56, 1.00);
  65. }
  66. .marker-cluster-level3 {
  67. background-color: rgba(255, 220, 68, 0.6);
  68. }
  69. .marker-cluster-level3 div {
  70. background-color: rgba(255, 220, 68, 1.00);
  71. }
  72. .marker-cluster-level4 {
  73. background-color: rgba(20, 194, 251, 0.6);
  74. }
  75. .marker-cluster-level4 div {
  76. background-color: rgba(20, 194, 251, 1.00);
  77. }
  78. .custom-cluster {
  79. text-align: center;
  80. background-size:50px 55px;
  81. background-repeat:no-repeat;
  82. }
  83. .custom-cluster span {
  84. width: 50px;
  85. margin-top: 15px;
  86. display: inline-block;
  87. font-weight: 700;
  88. }
  89. .custom-cluster-level1 {
  90. background-image: url("../../statics/leaflet/images/marker/icon_zhongdafengxian.png");
  91. }
  92. .custom-cluster-level2 {
  93. background-image: url("../../statics/leaflet/images/marker/icon_jiaodafengxian.png");
  94. }
  95. .custom-cluster-level3 {
  96. background-image: url("../../statics/leaflet/images/marker/icon_yibanfengxian.png");
  97. }
  98. .custom-cluster-level4 {
  99. background-image: url("../../statics/leaflet/images/marker/icon_diffengxian.png");
  100. }