Getting Started
Forest Analytics
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:
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!
Last modified 4yr ago
Copy link