MapHubs Help
  • Introduction
  • Getting Started
    • Signup for a MapHubs Account
    • MapHubs Groups
    • Searching MapHubs
    • MapHubs Terminology
    • Troubleshooting Common Issues
  • Maps
    • Make a Map
    • Sharing Maps
    • Export a Map as an Image
    • Change the Layer Color
    • Copying Maps
  • Forest Analytics
    • Forest Report
  • Data
    • Uploading Data
    • Attach Photos to Map Features
    • Creating Data
    • Layer Metadata
    • Raster Tile Layers
  • Advanced
    • Custom Layer Legends
    • Data-Driven Map Styles
    • Editing Map Style Code (Advanced)
    • Map Dropdown Menus
    • Earth Engine Layers
    • Changing Polygon Fill Patterns
Powered by GitBook
On this page
  • Graduated Circles Example #1
  • Graduated Circles Example #2
  1. Advanced

Custom Layer Legends

PreviousRaster Tile LayersNextData-Driven Map Styles

Last updated 7 years ago

The legend for a layer can be customized to match your custom style, (or the style of your website).

Legends use standard HTML notation.

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

<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>

In this example we are using the grid design from which is the UI design library used by MapHubs and is automatically available.

http://materializecss.com/grid.html
Quick Intro to HTML