how to make the marker "moscow" by default be placed behind the marker "tula", and also when hovering over the marker "moscow" it remains behind the marker "tula" and is partially highlighted?
my code: demo
you can consider other approaches to placing markers on the map
To achieve that you need to overwrite the graphic element of the moskva or tula markers at chart load event, onMouseOver() and onMouseOut() functions as well.
Here is the example modification you can base on:
When you loop throught the points add the conditional as follows:
if (el.id === "tula") {
el.graphic.attr({
zIndex: 100,
});
}
And at the mouseOver/mouseOut functions the following modification with the opacity change:
if (this.id === "moskva") {
this.graphic.attr({
opacity: 0.5,
zIndex: -100,
});
}