Need marker land on exact location on Grafana world map panel - leaflet

Question

I working on a grafana world map project that can receive lat,lon from client and process it on map
everything works fine, until client gave a same lat,lon location where it already spot in a map the new marker land beneath old marker and so on if client still gave the same lat,lon
I need a marker land to exact location that client gave
I think an issue is about zIndex because every marker have the same zIndex (210) so that all of them
can't land on their own lat,lon but I'm so confused about it and I have try to look at markerClusterGroup but I have no idea about it
Marker that land beneath old marker:
t.prototype.createCircle = function(t) {
L.HtmlIcon = L.Icon.extend({
options: {
/*
html: (String) (required)
iconAnchor: (Point)
popupAnchor: (Point)
*/
},
initialize: function (options) {
L.Util.setOptions(this, options);
},
createIcon: function () {
var div = document.createElement('div');
div.innerHTML = this.options.html;
return div;
},
createShadow: function () {
return null;
}
});
const markerLocation = new L.LatLng(t.locationLatitude, t.locationLongitude);
const HTMLIcon = L.HtmlIcon.extend({
options : {
html : "<div class=\"map__marker\"></div>",
}
});
const customHtmlIcon = new HTMLIcon();
const marker = new L.Marker(markerLocation, {icon: customHtmlIcon});
this.map.addLayer(marker);
return this.createPopup(marker, t.locationName, t.valueRounded), marker
}

Answer 1

I already solve it by change relative to fixed on CSS file:
.map__marker {
background: #ffffff;
border-radius: 10px;
height: 10px;
position: fixed; //change from relative
width: 10px;
}
.map__marker::before {
-webkit-animation: blink 1s infinite ease-out;
animation: blink 1s infinite ease-out;
border-radius: 60px;
box-shadow: inset 0 0 0 1px #ffffff;
content: "";
height: 10px;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
}
#-webkit-keyframes blink {
100% {
height: 50px;
opacity: 0;
width: 50px;
}
}
#keyframes blink {
100% {
height: 50px;
opacity: 0;
width: 50px;
}
}