Class: LegendView

LegendView()

Creates a legend for a given Map Asset (Work In Progress). Currently supports making 'preview' legends for CesiumImagery assets and Cesium3DTileset assets (only for color palettes that are type 'categorical'). Eventually, will support full-sized legend for these, and other assets, and all types of color palettes (including 'continuous' and 'classified')

Screenshot

Constructor

new LegendView()

Since:
  • 2.18.0
Source:

Extends

  • Backbone.View

Members

className :string

The HTML classes to use for this view's element
Type:
  • string
Source:

classes :Object

Classes that are used to identify, or that are added to, the HTML elements that comprise this view.
Type:
  • Object
Properties:
Name Type Description
preview string Additional class to add to legend that are the preview/thumbnail version
previewSVG string The SVG element that holds the shapes with all the legend colours in the preview legend.
previewImg string The image element that represents a thumbnail of image layers, in preview legends
tooltip string Class added to tooltips used in preview legends
Source:

events :Object

The events this view will listen to and the associated function to call.
Type:
  • Object
Source:

mode :string

Which type of legend to show? Can be set to either 'full' for a complete legend with labels, title, and all color coding, or 'preview' for just a small thumbnail of the colors used in the full legend.
Type:
  • string
Source:

model :MapAsset

The MapAsset model that this view uses - currently supports CesiumImagery and Cesium3DTileset models.
Type:
Source:

previewSvgDimensions :Object

For vector preview legends, the relative dimensions to use. The SVG's dimensions are set with a viewBox property only, so the height and width represent an aspect ratio rather than absolute size.
Type:
  • Object
Properties:
Name Type Description
previewSvgDimensions.width number The width of the entire SVG
previewSvgDimensions.height number The height of the entire SVG
squareSpacing number Maximum spacing between each of the squares in the preview legend. Squares will be spaced 20% closed than this when the legend is not hovered over.
Source:

template :Underscore.template

The primary HTML template for this view
Type:
  • Underscore.template
Source:

type :string

The type of View this is
Type:
  • string
Source:

Methods

createSVG(options) → {SVG}

Creates an SVG element and inserts it into the view
Parameters:
Name Type Description
options object Used to configure parts of the SVG
Properties:
Name Type Description
options.dropshadowFilter boolean Set to true to create a filter element that creates a dropshadow behind any element it is applied to. It can be added to child elements of the SVG by setting a `filter: url(#dropshadow);` style rule on the child.
options.height number The relative height of the SVG (for the viewBox property)
options.width number The relative width of the SVG (for the viewBox property)
Source:
Returns:
Returns the SVG element that is in the view
Type
SVG

initialize(optionsopt)

Executed when a new LegendView is created
Parameters:
Name Type Attributes Description
options Object <optional>
 A literal object with options to pass to the view
Source:

render() → {LegendView}

Renders this view
Source:
Returns:
Returns the rendered view element
Type
LegendView

renderCategoricalPreviewLegend(colorPalette)

Creates a preview legend for categorical color palettes and inserts it into the view
Parameters:
Name Type Description
colorPalette AssetColorPalette The AssetColorPalette that maps feature attributes to colors, used to create the legend
Source:

renderContinuousPreviewLegend(colorPalette)

Creates a preview legend for continuous color palettes and inserts it into the view
Parameters:
Name Type Description
colorPalette AssetColorPalette The AssetColorPalette that maps feature attributes to colors, used to create the legend
Source:

renderImagePreviewLegend(thumbnailURL)

Inserts a thumbnail in image into this view
Parameters:
Name Type Description
thumbnailURL string A url to use for the src property of the thumbnail image
Source: