Source: components/webgis/reboot/subcomponents/Legend.js

import React from 'react'
import Metadata from '../../Metadata';
import getTranslation from '../../../../i18n/'

/**
 * Legend for the layer that is displayed in the web GIS
 */
class Legend extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showLegend: false,
            metadata: false
        }
    }

    /**
     * Toggle the visibility of the legend (mobile only)
     */
    toggleLegend() {
        this.setState({ showLegend: !this.state.showLegend })
    }
    
    /**
     * Toggle the metadata overlay
     */
    toggleMetadata() {
        this.setState({ metadata: !this.state.metadata })
    }

    render() {
        return (
            <div className="webgis-legend">
                {this.state.metadata &&
                    <Metadata toggleMetadata={() => this.toggleMetadata()} selected_layer={this.props.activeLayer} activeLanguage={this.props.activeLanguage} />
                }
                <div className="legend">
                    <p>
                        {(this.props.activeLayer.key !== undefined ? getTranslation(this.props.activeLayer.key+".label") : getTranslation("webgis.legend"))} 
                        {this.props.activeLayer.unit_of_cell_related_parameter !== 'none' &&
                            <React.Fragment> [{this.props.activeLayer.unit_of_cell_related_parameter}]</React.Fragment>
                        }
                        <span className="show-legend-items" onClick={() => this.toggleLegend()}><i className="fas fa-caret-down"></i></span><span className="metadata-button"><button className="btn btn-blue" onClick={() => this.toggleMetadata()}>{getTranslation("webgis.metadata")}</button></span>
                    </p>
                    {(this.props.activeLayer.legend !== undefined) &&
                        <ul className={"legend-list "+(this.state.showLegend ? "show-list" : "hide-list")}>
                            <li><span className="pilot-area-outline"></span> {getTranslation("pilot_area_outline.label")}</li>
                          
                            <React.Fragment>
                            {this.props.activeLayer.legend.map(entry =>
                                <li key={entry.quantity}><span style={{backgroundColor : entry.color}}></span> {(!entry.labels ? (((this.props.activeLayer.traffic_light_map_open_loop) || (this.props.activeLayer.traffic_light_map_closed_loop)) ? getTranslation(entry.label) : entry.quantity) : (entry.labels[this.props.activeLanguage] ? entry.labels[this.props.activeLanguage] : entry.labels.English))}</li>
                            )}
                            </React.Fragment>
                               
                        </ul>
                    }
                </div>
            </div>
        )
    }
}

export default Legend