[Pro] Custom Legend Types
In this article
The custom legend entries can be either internal or external. Basically the internal will display inside the map viewport and the external will display below the map.
The table below highlights the main differences between the two types.
| Feature | Internal | External |
|---|---|---|
| Position | Inside map viewport | Below map viewport |
| Target with custom css | No | Yes |
| Included in map image export | Yes | No |
| Control positioning | Yes | No |
| Change marker shape | No | With custom CSS |
Custom CSS for External Legend
The custom external legend has the following classes:
- igm-external-legend-container
The container of the legend. - ul.igm-external-legend
the unordered list class - igm-external-legend-entry
List item class - igm-external-legend-graphic
Coloured Marker class
Example Markup generated for the custom legend:
<div class="igm-external-legend-container">
<ul data-base-map-id="21756" id="igm-external-legend-21756" class="igm-external-legend">
<li class="igm-external-legend-entry">
<span class="igm-external-legend-graphic" style="background:#f44336"></span>Legend Entry</li>
<li class="igm-external-legend-entry">
<span class="igm-external-legend-graphic" style="background:#03a9f4"></span>Legend Entry 02</li>
</ul>
</div>You can target the classes above with your own css rules.
