Custom Layer Legends
The legend for a layer can be customized to match your custom style, (or the style of your website).
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>
Last modified 5yr ago