मार्कर क्लस्टर के रंग को कैसे बदलें / क्लस्टर के नीचे एक आइकन प्रदर्शित करें

मार्कर क्लस्टर के रंग केवल सीएसएस के माध्यम से बदले जा सकते हैं। कृपया अपनी CSS style शैली के अंत में निम्नलिखित सीएसएस शैलियों को जोड़ें। तदनुसार रंग समायोजित करें।

आरजीबीए में रंग मूल्यों को प्राप्त करने के लिए एक उपकरण पाया जा सकता है https://www.hexcolortool.com/ - कृपया ध्यान रखें कि अंतिम संख्या पारदर्शिता मूल्य है, जो 0 से 1 तक पहुंच रही है:


.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}


विकल्प के रूप में आप # C0C0C0 जैसे हेक्स कलर कोड का भी उपयोग कर सकते हैं।

यदि दूसरी ओर आप किसी क्लस्टर के नीचे एक कस्टम आइकन जोड़ना चाहते हैं, तो निम्न उदाहरण को संदर्भ के रूप में देखें (कृपया अपने खुद के URL को आइकनों पर प्रयोग करें):


.marker-cluster-small::after {
content: "";
display: inline-block;
height: 36px;
width: 36px;
background: url('https://www.mapsmarker.com/wp-content/uploads/maps-marker-pro/icons/hospital-building.png') no-repeat;
}


उदाहरण आउटपुट: