# gd-spatial-picker



<!-- Auto Generated Below -->


## Properties

| Property              | Attribute                | Description                                                                                                | Type                                      | Default                 |
| --------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------------------- |
| `autocomplete`        | `autocomplete`           |                                                                                                            | `boolean`                                 | `false`                 |
| `circleDraw`          | `circle-draw`            | use to enable circle draw                                                                                  | `boolean`                                 | `true`                  |
| `classes`             | `classes`                | if useAsIcon optn set, you can added styling class names such as boostrap utility classes to adjust button | `string`                                  | `''`                    |
| `disabled`            | `disabled`               | use to disable spatial picker                                                                              | `boolean`                                 | `false`                 |
| `fitWorld`            | `fit-world`              |                                                                                                            | `boolean`                                 | `false`                 |
| `label`               | `label`                  |                                                                                                            | `string`                                  | `'Select spatial area'` |
| `latitude`            | `latitude`               |                                                                                                            | `number`                                  | `0`                     |
| `longitude`           | `longitude`              |                                                                                                            | `number`                                  | `0`                     |
| `mapHeight`           | `map-height`             |                                                                                                            | `number`                                  | `undefined`             |
| `mapWidth`            | `map-width`              |                                                                                                            | `number`                                  | `undefined`             |
| `markerDraw`          | `marker-draw`            | use to enable marker draw                                                                                  | `boolean`                                 | `true`                  |
| `markerIconShadowUrl` | `marker-icon-shadow-url` | marker shadow icon for map                                                                                 | `string`                                  | `'marker-shadow.png'`   |
| `markerIconUrl`       | `marker-icon-url`        | marker icon for map                                                                                        | `string`                                  | `'marker-icon.png'`     |
| `maxZoom`             | `max-zoom`               |                                                                                                            | `number`                                  | `24`                    |
| `minZoom`             | `min-zoom`               |                                                                                                            | `number`                                  | `0`                     |
| `precision`           | `precision`              |                                                                                                            | `number`                                  | `3`                     |
| `showMapIcon`         | `show-map-icon`          |                                                                                                            | `boolean`                                 | `true`                  |
| `useAsIcon`           | `use-as-icon`            | use spatial picker as an button w/icon instead of default input.                                           | `boolean`                                 | `true`                  |
| `value`               | `value`                  |                                                                                                            | `SpatialPoint \| SpatialRadius \| string` | `''`                    |
| `variant`             | `variant`                | if useAsIcon optn set, choose bootstrap button style                                                       | `string`                                  | `'light'`               |
| `zoom`                | `zoom`                   |                                                                                                            | `number`                                  | `2`                     |


## Events

| Event               | Description | Type               |
| ------------------- | ----------- | ------------------ |
| `clearSpatialInput` |             | `CustomEvent<any>` |
| `isInvalid`         |             | `CustomEvent<any>` |
| `spatialPickerInit` |             | `CustomEvent<any>` |
| `valueChanged`      |             | `CustomEvent<any>` |


## Dependencies

### Depends on

- [gd-map](../gd-map)
- bs-form-label
- bs-form-control
- bs-button
- bs-icon

### Graph
```mermaid
graph TD;
  gd-spatial-picker --> gd-map
  gd-spatial-picker --> bs-form-label
  gd-spatial-picker --> bs-form-control
  gd-spatial-picker --> bs-button
  gd-spatial-picker --> bs-icon
  bs-button --> bs-icon
  style gd-spatial-picker fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
