Custom Layer Legends

Search…
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>
Graduated Circles Example #1
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>
Graduated Circles Example #2
<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>
Data - Previous
Raster Tile Layers
Next - Advanced
Data-Driven Map Styles
Last modified 4yr ago
Copy link
On this page
Graduated Circles Example #1
Graduated Circles Example #2