Legends

Legends inform the user about what various colors and symbols in a visualization mean. They are especially important in weather visualizations due to the wide variety of data sets, types and units. The Xweather MapsGL SDK includes support for dynamically generating and displaying legends based on a particular configuration which you can then show alongside your interactive weather maps and applications.

Legends can be displayed and managed by a LegendControl instance.

Weather map with legends

Configuration

Point Legends

Point configuration options define how a point legend is rendered.

Refer to the PointLegend API reference for more information about the available properties and methods.

Bar Legends

Bar/colorscale configuration options define how a bar legend is rendered.

Refer to the BarLegend API reference for more information about the available properties and methods.

Text Labels

Text configuration options define how text labels will be rendered on bar legend. Options exist for labeling data at different intervals or at specific values.

Refer to the BarLegendLabels API reference for more information about the available properties and methods.

Rendering and Updating

Properties that control a Legend's appearance can be updated after the Legend has been added to the control by using LegendControl's update.

For example, the following would update the color stops for a bar legend:

// Update the color scale of an existing bar legend
let colorScaleOptions = ColorScaleOptions(stops: [
    .init(0, .fromString("#000000")),
    .init(4, .fromString("#000000")),
    .init(5, .fromString("#00ecec")),
    .init(10, .fromString("#00a0f6")),
    .init(15, .fromString("#0000f6")),
    .init(20, .fromString("#00ff02")),
    .init(25, .fromString("#00c800")),
    .init(30, .fromString("#019001")),
    .init(35, .fromString("#ffff02")),
    .init(40, .fromString("#e7c000")),
    .init(45, .fromString("#ff9000")),
    .init(50, .fromString("#ff0000")),
    .init(55, .fromString("#dc0100")),
    .init(60, .fromString("#c00001")),
    .init(65, .fromString("#ff00ff")),
    .init(70, .fromString("#9955c9")),
    .init(75, .fromString("#fffff"))
])
let updatedLegend = legend.items(legend.items.map {
    $0.colorScaleOptions(colorScaleOptions)
})
legendControl.update(legend: updatedLegend)

Timeline Attribution Guide