The legend for a layer can be customized to match your custom style, (or the style of your website).
Legends use standard HTML notation. Quick Intro to HTML​
Default Legend Code
Here is an example of the default legend for a point layer colored red:
div class="omh-legend"><div class="point" style="background-color: red"></div><h3>{NAME}</h3></div>
In this example we are using the grid design from http://materializecss.com/grid.html which is the UI design library used by MapHubs and is automatically available.
<div class="omh-legend"><h3>{NAME}</h3><style scoped>.icon-col {width: 24px !important;height: 100%;}</style><div class="row no-margin" style="height: 14px;"><div class="col icon-col s2 no-padding valign-wrapper"><div class="col s4 no-padding circle valign"style="background-color: red; width:4px; height: 4px"></div><div class="col s4 no-padding circle valign"style="background-color: red; width:8px; height: 8px"></div><div class="col s4 no-padding circle valign"style="background-color: red; width:12px; height: 12px"></div>​</div><div class="col s10 valign-wrapper" style="padding 10 0;"><span class="valign" style="font-size: 8px;">Puissance installée (MW)</span></div></div><div class="row no-margin" style="height: 14px;"><div class="col icon-col s2 no-padding valign-wrapper"><div class="circle valign"style="background-color: pink; width:8px; height: 8px"></div></div><div class="col s10 valign-wrapper" style="padding 10 0; height: 100%;"><span class="valign" style="font-size: 8px;">Projet</span></div></div><div class="row no-margin" style="height: 14px;"><div class="col icon-col s2 no-padding valign-wrapper"><div class="circle valign"style="background-color: grey; width:8px; height: 8px"></div></div><div class="col s10 valign-wrapper" style="padding 10 0; height: 100%;"><span class="valign" style="font-size: 8px;">Inconnu</span></div></div></div>
<div class="omh-legend"><style scoped>.legend-row {display: flex;position: relative;align-items: center;justify-content: space-between;padding-top: 3px;}.legend-item-wrapper {position: relative;flex-basis: 100%;height: 100%;}.point {float: left;margin-right: 5px;border-radius: 50%;border: 1px solid #888;position: absolute;bottom: 0;}.legend-label {float: left;font-size: 8px;}</style><h3>{NAME}</h3>​<div class="legend-row"><div class="legend-item-wrapper"><span class="legend-label">0</span></div><div class="legend-item-wrapper"><span class="legend-label">10</span></div><div class="legend-item-wrapper"><span class="legend-label">500</span></div><div class="legend-item-wrapper"><span class="legend-label">1k</span></div><div class="legend-item-wrapper"><span class="legend-label">10k</span></div><div class="legend-item-wrapper"><div class="legend-label">100k</div></div></div><div class="legend-row" style="height: 28px;"><div class="legend-item-wrapper"><div class="point" style="background-color: #ffffd4; width: 8px; height: 8px;"></div></div><div class="legend-item-wrapper"><div class="point" style="background-color: #fee391; width: 12px; height: 12px;"></div></div><div class="legend-item-wrapper"><div class="point" style="background-color: #fec44f; width: 16px; height: 16px;"></div></div><div class="legend-item-wrapper"><div class="point" style="background-color: #fe9929; width: 20px; height: 20px;"></div></div><div class="legend-item-wrapper"><div class="point" style="background-color: #d95f0e; width: 24px; height: 24px;"></div></div><div class="legend-item-wrapper"><div class="point" style="background-color: #993404; width: 28px; height: 28px;"></div></div></div></div>