Custom HTML Control

You can add totally custom HTML and CSS to create a legend or other custom control that can be placed easily on your map.

https://wpmaps-docs.mapster.me/pro-features/pro-maps/custom-html-control

Here is the HTML and CSS used in this example:

<style>
.legend-container { width: 200px; height: 40px; margin: 10px; background: rgba(255,255,255,0.6); }
.legend-container .colors, .legend-container .details { width: 100%; display: flex; }
.legend-container .colors > div, .legend-container .details > div { width : 25%; height: 20px; text-align: center; }
.legend1 { background : blue; }
.legend2 { background : green; }
.legend3 { background : red; }
.legend4 { background : black; }
</style>
<div class="legend-container">
<div class="colors">
<div class="legend1"></div>
<div class="legend2"></div>
<div class="legend3"></div>
<div class="legend4"></div>
</div>
<div class="details">
<div class="detail">0%</div>
<div class="detail">25%</div>
<div class="detail">50%</div>
<div class="detail">100%</div>
</div>
</div>