Help on customization in Map widget - remove default stroke color black when clicked on any node/location

 Hi Saurabh_1006,

I think Gabi partially got the drift your question, but it sure was enough for me to (finally) get me thinking along.

What you’re doing (clicking twice) is a cycle between making a node selected and unselected.

The WebUI stylesheet has a specific rule for the selected-node state, which is this one

.tag-mapv3 .map-container svg.nodes-focused path.node.selected-node {
 opacity: 0.9;
 fill-opacity: 1;
 stroke: #23272e;
 stroke-width: 3px;
}

Your own custom css probably ‘just’ defines the unselected state, which is without that last selected-node class.

Hence, our WebUI rule, having a higher css specificity because of that definition, will add the dark stroke when you select the node, but leaves your own fill color (because it does not define it)
Something similar is happening when you hover over a node (like in Gabi’s screenshot): a is-hover class is added and it will overrule your own.

So it is now up to you to add a rule to your custom css to be more specific (or just as specific, at the least) as our rule. And within that, repeat your desired stroke etc. You need to repeat it, because you cannot easily ‘undefine’ our styling within your custom styling for a more specific case.

.tag-mapv3 .map-container svg.nodes-focused path.node.selected-node.annotation-optimal-location {
 stroke: red;
 stroke-width: 2px;
}

So the above is incomplete. It needs to be whatever you defined for your potential and optimal locations. And you need to get the correct class that your nodes have for that, probably not the annotation-optimal-location class I used as an example.
And maybe you want to tweak it a bit, since having a visually different selected state is worth something, of course.

Hope that helps, today still. I should have kept a better eye out for WebUI-related questions.