Source: components/ol-map-legend.vue

<template>
    <div id="legend" ref="legend" v-if="options.length > 0" class="q-pb-md">

        <div v-for="option in options" :key="option.text" class="row items-center">
            <span :style="{
        backgroundColor: option.color_code, width: '15px', height: '15px', display: 'inline-block', marginRight:
            '10px'
    }"></span>
            <span style="font-size:11px">{{ option.text }}</span>
        </div>
    </div>
    <!-- <div v-if="valueAtPixel && +valueAtPixel != noData" :style="valueAtPixelStyle">
        <span>{{ valueAtPixel }}</span>
    </div> -->
</template>

<script lang="js">
/**
 * Legend component for the map.
 * 
 * @component
 * @name OlMapLegend
 * @example
 * <OlMapLegend />
 */

export default {
    name: "OlMapLegend",
    props: {
        options: Array,
        valueAtPixel: String,
        noData: Number,
        unit: String
    },
    data() {
        return {
            valueAtPixelStyle: null
        }
    },
    watch: {
        /**
         * Retrieves the value at the specified pixel coordinates and shows in near the appropriate legend item.
         *
         * @param {number} val - The pixel value to retrieve.
         * @returns {any} The value at the specified pixel coordinates.
         */
        // valueAtPixel: function (val) {
        //     let v = +val;
        //     for (let i = 0; i < this.options.length; i++) {
        //         if (this.options[i].from <= v && v <= this.options[i].to) {
        //             // calculate legend position, height and width
        //             this.valueAtPixelStyle = {
        //                 position: "absolute",
        //                 bottom: (10 - 4 + (this.options.length - i - 1) * (this.$refs.legend.clientHeight / this.options.length)) + "px",
        //                 left: (10 + 8 + this.$refs.legend.clientWidth) + "px",
        //                 backgroundColor: "white",
        //                 padding: "3px",
        //                 borderRadius: "5px",
        //             }
        //             break;
        //         }
        //     }
        // },
    },
}
</script>

<style scoped>
#legend {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 3px 3px 3px 3px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 600px;
    overflow: hidden;
    overflow-y: scroll;
}

#legend::-webkit-scrollbar {
    display: none;
    /* Hide the scrollbar for Chrome, Safari, and Opera */
}
</style>