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:
1
div class="omh-legend">
2
 <div class="point" style="background-color: red">
3
 </div>
4
 <h3>{NAME}</h3>
5
 </div>
Copied!
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.
1
<div class="omh-legend">
2
 <h3>{NAME}</h3>
3
 <style scoped>
4
     .icon-col {
5
        width: 24px !important; 
6
        height: 100%;
7
     }
8
 </style>
9
  <div class="row no-margin" style="height: 14px;">
10
    <div class="col icon-col s2 no-padding valign-wrapper">
11
         <div class="col s4 no-padding circle valign" 
12
            style="background-color: red; width:4px; height: 4px">
13
       </div>
14
      <div class="col s4 no-padding circle valign" 
15
            style="background-color: red; width:8px; height: 8px">
16
       </div>
17
        <div class="col s4 no-padding circle valign" 
18
            style="background-color: red; width:12px; height: 12px">
19
       </div>
20
​
21
    </div>
22
     <div class="col s10 valign-wrapper" style="padding 10 0;">
23
      <span class="valign" style="font-size: 8px;">Puissance installée (MW)</span>
24
    </div>
25
  </div>
26
  <div class="row no-margin" style="height: 14px;">
27
    <div class="col icon-col s2 no-padding valign-wrapper">
28
       <div class="circle valign"
29
            style="background-color: pink; width:8px; height: 8px">
30
       </div>
31
    </div>
32
   <div class="col s10 valign-wrapper" style="padding 10 0; height: 100%;"> 
33
    <span class="valign" style="font-size: 8px;">Projet</span>
34
  </div>
35
  </div>
36
  <div class="row no-margin" style="height: 14px;">
37
    <div class="col icon-col s2 no-padding valign-wrapper">
38
       <div class="circle valign"
39
            style="background-color: grey; width:8px; height: 8px">
40
       </div>
41
   </div>
42
   <div class="col s10 valign-wrapper" style="padding 10 0; height: 100%;"> 
43
    <span class="valign" style="font-size: 8px;">Inconnu</span>
44
  </div>
45
  </div>
46
 </div>
Copied!
Graduated Circles Example #2
1
<div class="omh-legend">
2
    <style scoped>
3
    .legend-row {
4
         display: flex; 
5
         position: relative; 
6
         align-items: center; 
7
         justify-content: space-between; 
8
         padding-top: 3px;
9
     }
10
    .legend-item-wrapper {
11
         position: relative; 
12
         flex-basis: 100%; 
13
         height: 100%;
14
     }
15
     .point {
16
        float: left;
17
        margin-right: 5px;
18
        border-radius: 50%;
19
        border: 1px solid #888;
20
        position: absolute;
21
        bottom: 0;
22
     }
23
     .legend-label {
24
         float: left; 
25
         font-size: 8px;
26
     }
27
 </style>
28
 <h3>{NAME}</h3>
29
​
30
<div class="legend-row">
31
  <div class="legend-item-wrapper">
32
    <span class="legend-label">0</span>
33
  </div>
34
  <div class="legend-item-wrapper">
35
    <span class="legend-label">10</span>
36
  </div>
37
  <div class="legend-item-wrapper">
38
    <span class="legend-label">500</span>
39
  </div>
40
  <div class="legend-item-wrapper">
41
    <span class="legend-label">1k</span>
42
  </div>
43
  <div class="legend-item-wrapper">
44
    <span class="legend-label">10k</span>
45
  </div>
46
  <div class="legend-item-wrapper">
47
    <div class="legend-label">100k</div>
48
  </div>
49
</div>
50
<div class="legend-row" style="height: 28px;">
51
  <div class="legend-item-wrapper">
52
    <div class="point" style="background-color: #ffffd4; width: 8px; height: 8px;"></div>
53
  </div>
54
  <div class="legend-item-wrapper">
55
    <div class="point" style="background-color: #fee391; width: 12px; height: 12px;"></div>
56
  </div>
57
  <div class="legend-item-wrapper">
58
    <div class="point" style="background-color: #fec44f; width: 16px; height: 16px;"></div>
59
  </div>
60
  <div class="legend-item-wrapper">
61
    <div class="point" style="background-color: #fe9929; width: 20px; height: 20px;"></div>
62
  </div>
63
  <div class="legend-item-wrapper">
64
    <div class="point" style="background-color: #d95f0e; width: 24px; height: 24px;"></div>
65
  </div>
66
  <div class="legend-item-wrapper">
67
    <div class="point" style="background-color: #993404; width: 28px; height: 28px;"></div>
68
  </div>
69
</div>
70
</div>
Copied!
Data - Previous
Raster Tile Layers
Next - Advanced
Data-Driven Map Styles
Last modified 3yr ago
Copy link
Contents
Graduated Circles Example #1
Graduated Circles Example #2