Legend

You can use the legend component to lay out a reference to all the elements drawn on your map. The main goal is for the legend to be as predictable as possible. For this reason you need to indicate a number of sizes, orientation and the number columns & rows.

• position: {x: 50, y: 50} where on the png/pdf to place the legend.
• size: {width: 50, height: 50} The amount of space the legend should take up.
• image_size: {width: 16, height: 16} The size for the images to be used
• textbox_size: {width: 40, height: 16} The box size for the text.
• textbox_style Contains a number of stiles for the textbox: fill_color, color, font, pointsize, gravity as defined by ImageMagick.
• orientation either horizontal or vertical. The direction in which elements will be placed.
• overflow What to do if the amount of elements is greater than columns * rows.
  • hidden Don't show extra elements
  • compact Make columns/rows small depending on orientation to fit elements in available space
  • expand Increase size of the legend element. It will grow depending on the orientation if more elements are available
• columns The number of columns present on the legend
• rows The number of rows present on the legend
• elements Array of {image: './file.png', text: 'text'} indicating image path (file or url) and text to show.

Example

legend: {
  position: {x: 50, y: 50},
  size: {width: 50, height: 50},
  image_size: {width: 16, height: 16},
  textbox_size: {width: 40, height: 16},
  textbox_style: {
    fill_color: '#ffffff',
    color: '#000000',
    font: 'Arial',
    pointsize: '16',
    gravity: 'NorthWest',
  },
  orientation: 'horizontal', # horizontal, vertical
  overflow: 'hidden', # expand, hidden, compact
  columns: 5,
  rows: 5,
  elements: [{
    image: './file.png',
    text: 'text'
  }]
}