Skip to content

Instantly share code, notes, and snippets.

@sungraiz
Created October 16, 2019 14:05
Show Gist options
  • Save sungraiz/81453b8d752b5f472ceadd721c87df86 to your computer and use it in GitHub Desktop.
Save sungraiz/81453b8d752b5f472ceadd721c87df86 to your computer and use it in GitHub Desktop.
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg {
/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}
.marker-cluster-small {
background-color: rgba(30, 166, 154, 0.5);
color:#fff;
}
.marker-cluster-small div {
background-color: rgba(24, 153, 142, 1);
}
.marker-cluster-medium {
background-color: rgba(234, 114, 61, 0.6);
color:#fff;
}
.marker-cluster-medium div {
background-color: rgba(234, 114, 61, 1);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
color:#fff;
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}
/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
background-color: rgb(15, 153, 130);
color:#fff;
}
.leaflet-oldie .marker-cluster-small div {
background-color: rgb(24, 153, 142);
}
.leaflet-oldie .marker-cluster-medium {
background-color: rgb(241, 211, 87);
color:#fff;
}
.leaflet-oldie .marker-cluster-medium div {
background-color: rgb(240, 194, 12);
}
.leaflet-oldie .marker-cluster-large {
background-color: rgb(253, 156, 115);
color:#fff;
}
.leaflet-oldie .marker-cluster-large div {
background-color: rgb(241, 128, 23);
}
.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;
}
.marker-cluster span {
line-height: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment