# The GraphicalSelect Component #
Creates a dropdown to select an area in a map by square, circle or polygon.
Source folder: src\shared\modules\graphicalSelect

Component may be used like this:

```
<script>

import GraphicalSelect from "src/shared/modules/graphicalSelect/components/GraphicalSelect.vue";

// [...]

export default {
    name: "MyComponent",
    components: {
        GraphicalSelect
    },
    methods: {
        /**
         * Resets the GraphicalSelect.
         * @returns {void}
         */
        resetView: function () {
            this.$refs.graphicalSelection.resetView();
        },
    }
};
</script>

<template>
    <div>
        <GraphicalSelect
            ref="graphicalSelection"
            :label="howToChooseTiles"
        />
    </div>
</template>

<style lang="scss">
@import "~variables";

#tooltip-overlay {
    position: relative;
    background: $accent_active;
    color: $white;
    max-width: 200px;
    padding: 4px 8px;
}

#circle-overlay {
    position: relative;
    top: -20px;
    background: $accent_active;
    color: $white;
    max-width: 70px;
    padding: 4px 8px;
}
</style>

```

## Properties of Component ##
|Name|Required|Type|Default|Description|
|----|--------|----|-------|-----------|
|selectElement|no|String|"Dropdown"|The used template element for graphical selection.|
|selectedOption|no|String|"Box"|Preselected draw modus.|
|focusOnCreation|no|Boolean||True if focus should be set to this component when it is created.|
|label|yes|String|""|The label of the select.|
|description|no|String|""|The description over the select element.|

## Actions ##
GraphicalSelect provides following actions:
updateDrawInteractionListener, featureToGeoJson, showTooltipOverlay, toggleOverlay, createDomOverlay