What to do ?
Well, Remember I have shared a post about adding Information to Menu bar ? I have customized that to add some extra stuffs. We will create a button on Menu bar, which will bring some extra information under selected legend (eq(2)in code is 3rd legend item of the page here).
Add this code to a JavaScript -
if(!$('#AlienBox').length){
$('body').append($(`<style id="AlienBox">
#Brand {
position: absolute;
top: 0px;
right: 40%;
height: 30px;
width: 150px;
z-index: 99;
border: 1px solid chocolate;
border-radius :5px;
color:chocolate;
}
</style>`, {
id: 'AlienBox'
}));
}
if(!$('#Brand').length){
$('body').append($(`<div id="Brand">
<center> For Information <br> <button onclick="alienLegendFn()" style="background-color: chocolate;border: none; color: white; text-decoration: none; display: inline-block; ">Click Here</button> </center>
<script >
function alienLegendFn() {
if(!$('#AlienLegend').length){
$('.sf-element-legend-item:eq(2)').append($('<div id="AlienLegend" style = "border: 1px solid chocolate; border-radius :5px; color:chocolate;"> You can place addional information here </div>', {
id: 'AlienLegend'
}));
}
}
</script>
</div>
`, {
id: 'Brand'
}));
}
Here is what you expect after clicking newly created button -
