[Pro] Custom Legend Types

You are here:

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.

FeatureInternalExternal
PositionInside map viewportBelow map viewport
Target with custom cssNoYes
Included in map image exportYesNo
Control positioningYesNo
Change marker shapeNoWith 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.