import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
import ConvertUnit, { round } from '../gd-map/map-services/conversions';
export class SpatialPicker {
  constructor() {
    this.label = 'Select spatial area';
    this.showMapIcon = true;
    this.value = '';
    this.precision = 3;
    this.minZoom = 0;
    this.maxZoom = 24;
    this.zoom = 2;
    this.latitude = 0;
    this.longitude = 0;
    this.fitWorld = false;
    this.autocomplete = false;
    /**
     * use to enable circle draw
     */
    this.circleDraw = true;
    /**
     * use to enable marker draw
     */
    this.markerDraw = true;
    /**
     * use to disable spatial picker
     */
    this.disabled = false;
    /**
     * use spatial picker as an icon instead of default input.
     */
    this.useAsIcon = false;
    /**
     * marker icon for map
     */
    this.markerIconUrl = 'marker-icon.png';
    /**
     * marker shadow icon for map
     */
    this.markerIconShadowUrl = 'marker-shadow.png';
    /**
     * Internal State for all selected fields
     */
    this.selectedArea = '-180,-90,180,90';
    this.selectedCircleLat = null;
    this.selectedCircleLng = null;
    this.selectedCircleRad = null;
    this.selectedCircleRadUnit = 'km';
    this.selectedMarkerLat = null;
    this.selectedMarkerLng = null;
    this.displayMap = false;
    this.invalid = false;
    /**
     * Error Message for invalid bounding box
     */
    this.errorMessage = null;
    this.selectedLayerType = 'rectangle';
    this.isNumber = function isNumber(value) {
      return typeof value === 'number' && isFinite(value);
    };
    /**
     * https://stackoverflow.com/questions/17369098/simplest-way-of-getting-the-number-of-decimals-in-a-number-in-javascript
     * @param value
     * @returns
     */
    this.countDecimals = function (value) {
      if (Math.floor(value) === value)
        return 0;
      return value.toString().split('.')[1].length || 0;
    };
    this.isLatitude = function (coord) {
      coord = Number(coord);
      return coord >= -90 && coord <= 90;
    };
    this.isLongitude = function (coord) {
      coord = Number(coord);
      return coord >= -180 && coord <= 180;
    };
    this.increasingCoordinates = function (box) {
      // make sure it's an array of numbers...
      box = box.map(Number);
      // run the check
      return box[0] >= -180 && box[0] <= 180 && box[2] >= -180 && box[2] <= 180 && box[0] <= box[2] && box[1] <= box[3];
    };
  }
  mapDrawSelectedHandler(event) {
    this.selectedLayerType = event.detail.layerType;
  }
  componentDidLoad() {
    this.inputEl = this.el.querySelector('gd-input');
    if (this.useAsIcon) {
      document.addEventListener('click', event => {
        if (event.target.classList.contains('leaflet-marker-icon'))
          return;
        if (!event.target.closest('.spatial-icon-btn')) {
          if (!this.el.querySelector('.map-wrapper').classList.contains('hide')) {
            this.el.querySelector('.map-wrapper').classList.add('hide');
          }
        }
      });
    }
  }
  componentWillLoad() {
    this.onValueChanged(this.value);
  }
  handleMapInit(map) {
    this.map = map;
    this.map.addDrawControl();
    this.spatialPickerInit.emit(this.map);
    if (this.value)
      this.drawSpatialArea(this.value);
  }
  /**
   * function is only called when a draw is triggered from the map
   * @param bounds
   */
  handleDraw(bounds) {
    if (bounds.layerType === 'rectangle') {
      let northeast = bounds._northEast;
      let southwest = bounds._southWest;
      let box = this.map.normalizeBox([southwest.lng, southwest.lat, northeast.lng, northeast.lat]); // normalize bounding box
      let formattedValue = this.formatValueToPrecision(box.join(','), this.precision);
      this.errorMessage = this.validateBbox(formattedValue);
      this.handleSpatialAreaChanged(formattedValue); // set  all bounding box state that has changed
    }
    else if (bounds.layerType === 'circle') {
      let points = { lat: round(bounds.lat, this.precision), lng: round(bounds.lng, this.precision) };
      this.errorMessage = this.validateCircle({
        lat: round(bounds.lat, this.precision),
        lng: round(bounds.lng, this.precision),
        radius: round(bounds.radius, this.precision),
      });
      // set all circle state but convert radius from metres to selected unit. Leaflet radius is always in metres
      this.handleCircleAreaChanged(Object.assign(Object.assign({}, points), { radius: { unit: this.selectedCircleRadUnit, value: ConvertUnit(bounds.radius, 'm', this.selectedCircleRadUnit) } }));
    }
    else if (bounds.layerType === 'marker') {
      let points = { lat: round(bounds.lat, this.precision), lng: round(bounds.lng, this.precision) };
      // set all marker state
      this.handleMarkerAreaChanged(points);
    }
  }
  onValueChanged(value, formatPrecision = false) {
    var _a, _b;
    if (this.selectedLayerType === 'rectangle') {
      if (!value && this.selectedArea === '-180,-90,180,90')
        return;
      this.errorMessage = this.validateBbox(value);
      let formattedValue = formatPrecision ? this.formatValueToPrecision(value, this.precision) : value;
      this.drawSpatialArea(formattedValue);
      this.handleSpatialAreaChanged(formattedValue);
    }
    else if (this.selectedLayerType === 'circle' && typeof value === 'object') {
      const unit = value.unit;
      const radius = value.radius;
      const lat = value.lat;
      const lng = value.lng;
      const circle = {
        lat: lat ? lat : this.selectedCircleLat,
        lng: lng ? lng : this.selectedCircleLng,
        radius: radius ? radius : this.selectedCircleRad,
      };
      this.errorMessage = this.validateCircle(circle);
      if ((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.invalid)
        return;
      this.drawSpatialArea({
        lat: lat ? lat : this.selectedCircleLat,
        lng: lng ? lng : this.selectedCircleLng,
        // on draw of spatial area radius must always be converted to metres
        radius: unit
          ? ConvertUnit(this.selectedCircleRad, this.selectedCircleRadUnit, 'm')
          : radius
            ? ConvertUnit(radius, this.selectedCircleRadUnit, 'm')
            : this.selectedCircleRad,
      });
      this.handleCircleAreaChanged({
        lat: lat ? lat : this.selectedCircleLat,
        lng: lng ? lng : this.selectedCircleLng,
        // on handle circle state radius can reflect the changed radius unit selected
        radius: {
          unit: unit ? unit : this.selectedCircleRadUnit,
          value: unit
            ? ConvertUnit(this.selectedCircleRad, this.selectedCircleRadUnit, unit)
            : radius
              ? ConvertUnit(radius, this.selectedCircleRadUnit, this.selectedCircleRadUnit)
              : this.selectedCircleRad,
        },
      });
      // set unit only when its changed
      if (unit)
        this.selectedCircleRadUnit = unit;
    }
    else if (this.selectedLayerType === 'marker' && typeof value === 'object') {
      // onValueChange both lat and lng must have value to draw so using current selected value when one of the value is changed.
      const marker = {
        lat: value.lat ? value.lat : this.selectedMarkerLat,
        lng: value.lng ? value.lng : this.selectedMarkerLng,
      };
      this.errorMessage = this.validatePoint(marker);
      if ((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.invalid)
        return;
      this.drawSpatialArea(marker);
      this.handleMarkerAreaChanged(marker);
    }
  }
  handleSpatialAreaChanged(area) {
    this.selectedArea = area;
    this.valueChanged.emit(area);
  }
  handleCircleAreaChanged(circle) {
    this.selectedCircleLat = circle.lat;
    this.selectedCircleLng = circle.lng;
    this.selectedCircleRad = circle.radius.value;
    this.valueChanged.emit(circle);
  }
  handleMarkerAreaChanged(marker) {
    this.selectedMarkerLat = marker.lat;
    this.selectedMarkerLng = marker.lng;
    this.valueChanged.emit(marker);
  }
  formatValueToPrecision(value, precision) {
    return (value &&
      value
        .split(',')
        .map(number => +parseFloat(number).toFixed(precision))
        .join(','));
  }
  drawSpatialArea(area) {
    if (!this.map || !area)
      return;
    if (this.selectedLayerType === 'rectangle') {
      let bounds = area.split(',').map(coord => +coord);
      // need 4 coordinates for a boundary
      if (bounds.length < 4)
        return;
      if (bounds[0] > bounds[2])
        bounds[2] += 360;
      this.map.drawRectangle([
        [bounds[3], bounds[2]],
        [bounds[1], bounds[0]],
      ]);
    }
    else if (this.selectedLayerType === 'circle') {
      this.map.drawCircle(area);
    }
    else if (this.selectedLayerType === 'marker') {
      this.map.drawMarker(area);
    }
  }
  showMapDisplay() {
    if (this.disabled)
      return;
    const mapContainer = this.el.querySelector('.map-wrapper');
    if (this.useAsIcon && mapContainer.classList.contains('hide')) {
      this.el.querySelector('.map-wrapper').classList.remove('hide');
      this.displayMap = true;
    }
    else {
      this.el.querySelector('.map-wrapper').classList.add('hide');
    }
  }
  showMap() {
    setTimeout(() => {
      this.map.refreshSize();
    }, 10);
  }
  resetRange() {
    this.clearSpatialInput.emit();
    this.selectedLayerType = 'rectangle';
    this.selectedCircleLat = null;
    this.selectedCircleLng = null;
    this.selectedArea = '-180,-90,180,90';
    this.selectedCircleRad = null;
    this.selectedMarkerLat = null;
    this.selectedMarkerLng = null;
  }
  validateBbox(value) {
    const errorMessages = {
      empty: 'Please enter a bounding box.',
      precision: 'Point coordinates have a maximum degree of precision of 3.',
      coord: "Bounding box contains an invalid number.'",
      range: 'Bounding box must be within -180, -90, 180, 90.',
      box: 'Bounding box must be a rectangle.',
      radiusSupported: 'Point+Radius is NOT supported by this data collection.  Please use a bounding box as your spatial extent or choose a different collection.',
    };
    let invalid = false;
    let errorMessage = null;
    const rectangle = value === null || value === void 0 ? void 0 : value.split(',');
    /**
     * @bbox bounding box
     * [south Latitude, north Latitude, west Longitude, east Longitude]
     */
    const bbox = [-180, -90, 180, 90];
    if (!value) {
      errorMessage = errorMessages.empty;
      invalid = true;
      this.clearSpatialInput.emit();
    }
    else if (rectangle.some(point => Number.isNaN(+point))) {
      errorMessage = errorMessages.coord;
      invalid = true;
    }
    else if (rectangle.length === 4) {
      if (!(bbox[0] <= rectangle[0] && rectangle[0] <= bbox[2] && bbox[1] <= rectangle[1] && rectangle[1] <= bbox[3])) {
        errorMessage = errorMessages.range;
        invalid = true;
      }
    }
    else if (rectangle.length > 4 || rectangle.length < 4) {
      errorMessage = errorMessages.box;
      invalid = true;
    }
    this.isInvalid.emit(invalid);
    return {
      layerType: 'rectangle',
      invalid: invalid,
      message: errorMessage,
    };
  }
  validateCircle(circle) {
    const errorMessages = {
      precision: 'Point coordinates have a maximum degree of precision of 3.',
      coord: 'A Point+Radius entry is invalid (empty, not a number, or not a degree coordinate (+/-90, +/-180).',
      increasing: 'Point+Radius should not cross anti-meridian or geographical poles.',
      range: "Point+Radius must intersect {{ constraints.bbox.join(', ') }}.",
      radiusSupported: 'Point+Radius is NOT supported by this data collection.  Please use a bounding box as your spatial extent or choose a different collection.',
    };
    let invalid = false;
    let errorMessage = null;
    // checks the degree of accuracy is within what is supported (precision of 3) 3 decimal place.
    if (circle.lat && circle.lng && (this.countDecimals(+circle.lat) > 3 || this.countDecimals(circle.lng) > 3)) {
      invalid = true;
      errorMessage = errorMessages.precision;
    }
    else if (!this.isNumber(circle.lat) ||
      !this.isNumber(circle.lng) ||
      !this.isNumber(circle.lng) ||
      !this.isNumber(circle.radius) ||
      Math.sign(circle.radius) == -1 ||
      !this.isLatitude(circle.lat) ||
      !this.isLongitude(circle.lng)) {
      invalid = true;
      errorMessage = errorMessages.coord;
    }
    else if (circle.lat && circle.lng && circle.radius && this.increasingCoordinates([circle.lat, circle.lng])) {
      invalid = true;
      errorMessage = errorMessages.increasing;
    }
    this.isInvalid.emit(invalid);
    return {
      layerType: 'circle',
      invalid: invalid,
      message: errorMessage,
    };
  }
  validatePoint(point) {
    const errorMessages = {
      precision: 'Point coordinates have a maximum degree of precision of 3.',
      coord: 'A point entry is invalid (empty, not a number, or not a degree coordinate (+/-90, +/-180).',
      range: 'Point must intersect -180, -90, 180, 90.',
    };
    let invalid = false;
    let errorMessage = null;
    if (point.lat && point.lng && (this.countDecimals(point.lat) > 3 || this.countDecimals(point.lng) > 3)) {
      invalid = true;
      errorMessage = errorMessages.precision;
    }
    else if (!this.isNumber(point.lat) || !this.isNumber(point.lng) || !this.isNumber(point.lng)) {
      invalid = true;
      errorMessage = errorMessages.coord;
    }
    else if (!this.isLatitude(point.lat) || !this.isLongitude(point.lng)) {
      invalid = true;
      errorMessage = errorMessages.range;
    }
    this.isInvalid.emit(invalid);
    return {
      layerType: 'marker',
      invalid: invalid,
      message: errorMessage,
    };
  }
  renderMap() {
    return (h("gd-map", { "min-zoom": this.minZoom, "max-zoom": this.maxZoom, zoom: this.zoom, latitude: this.latitude, longitude: this.longitude, "fit-world": this.fitWorld, width: this.mapWidth, height: this.mapHeight, onMapInit: e => this.handleMapInit(e.detail), onDraw: e => this.handleDraw(e.detail), onClearDraw: () => this.onValueChanged(null), resize: this.displayMap, "draw-circle-option": this.circleDraw, "draw-marker-option": this.markerDraw, "marker-icon-url": this.markerIconUrl, "marker-icon-shadow-url": this.markerIconShadowUrl }));
  }
  renderMapContainer() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
    return (h("div", { class: {
        "map-wrapper": true,
        "hide": this.useAsIcon
      } },
      this.selectedLayerType === 'rectangle' ? (h("bs-form-label", { htmlFor: 'spatialpicker-bounding-box' }, "Bounding Box:")) : this.selectedLayerType === 'circle' ? (h("bs-form-label", { "aria-hidden": "true" }, "Point and Radius:")) : this.selectedLayerType === 'marker' ? (h("bs-form-label", { "aria-hidden": "true" }, "Point:")) : null,
      h("div", { class: "d-flex", style: { maxWidth: `${this.mapWidth + 18}px` } },
        this.selectedLayerType === 'rectangle' ? (h("div", { class: "inline mr-0" },
          h("bs-form-control", { "control-id": "spatialpicker-bounding-box", as: "input", name: "spatialpicker-bounding-box", type: "text", value: this.selectedArea, onBsInput: e => { var _a, _b; return this.onValueChanged((_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value); }, isInvalid: ((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.invalid) && ((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.layerType) === 'rectangle' }))) : this.selectedLayerType === 'circle' && this.circleDraw ? (h("div", { class: "inline mr-0" },
          h("label", { class: "sr-only", htmlFor: "spatialpicker-point-circle-lat" }, "Latitude"),
          h("bs-form-control", { "control-id": "spatialpicker-point-circle-lat", as: "input", name: "spatialpicker-point-circle-lat", type: "text", value: this.selectedCircleLat, onBsInput: e => { var _a, _b; return this.onValueChanged({ lat: +((_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value) }); }, isInvalid: ((_c = this.errorMessage) === null || _c === void 0 ? void 0 : _c.invalid) && ((_d = this.errorMessage) === null || _d === void 0 ? void 0 : _d.layerType) === 'circle', placeholder: "Latitude" }),
          h("label", { class: "sr-only", htmlFor: "spatialpicker-point-circle-lng" }, "Longitude"),
          h("bs-form-control", { "control-id": "spatialpicker-point-circle-lng", as: "input", name: "spatialpicker-point-circle-lng", type: "text", value: this.selectedCircleLng, onBsInput: e => { var _a, _b; return this.onValueChanged({ lng: +((_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value) }); }, isInvalid: ((_e = this.errorMessage) === null || _e === void 0 ? void 0 : _e.invalid) && ((_f = this.errorMessage) === null || _f === void 0 ? void 0 : _f.layerType) === 'circle', placeholder: "Longitude" }, " "),
          h("label", { class: "sr-only", htmlFor: "spatialpicker-point-circle-radius" }, "Radius"),
          h("bs-form-control", { "control-id": "spatialpicker-point-circle-radius", as: "input", name: "spatialpicker-point-circle-radius", type: "text", value: this.selectedCircleRad, onBsInput: e => { var _a, _b; return this.onValueChanged({ radius: +((_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value) }); }, isInvalid: ((_g = this.errorMessage) === null || _g === void 0 ? void 0 : _g.invalid) && ((_h = this.errorMessage) === null || _h === void 0 ? void 0 : _h.layerType) === 'circle', placeholder: "Radius" }, " "),
          h("label", { class: "sr-only", htmlFor: "spatialpicker-point-circle-unit" }, "Units"),
          h("bs-form-control", { class: "d-flex", as: "select", "control-id": "spatialpicker-point-circle-unit", name: "spatialpicker-point-circle-unit", isInvalid: ((_j = this.errorMessage) === null || _j === void 0 ? void 0 : _j.invalid) && ((_k = this.errorMessage) === null || _k === void 0 ? void 0 : _k.layerType) === 'circle', onBsInput: e => {
              var _a, _b;
              this.onValueChanged({ unit: (_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value });
            } },
            h("option", { value: "km" }, "km"),
            h("option", { value: "m" }, "m"),
            h("option", { value: "mi" }, "mi"),
            h("option", { value: "deg" }, "deg"),
            h("option", { value: "rad" }, "rad")))) : this.selectedLayerType === 'marker' && this.markerDraw ? (h("div", { class: "inline", style: { maxWidth: '300px' } },
          h("label", { class: "sr-only", htmlFor: "spatialpicker-point-marker-lat" }, "Marker's Latitude"),
          h("bs-form-control", { "control-id": "spatialpicker-point-marker-lat", as: "input", name: "spatialpicker-point-marker-lat", type: "text", value: this.selectedMarkerLat, onBsInput: e => { var _a, _b; return this.onValueChanged({ lat: +((_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value) }); }, isInvalid: ((_l = this.errorMessage) === null || _l === void 0 ? void 0 : _l.invalid) && ((_m = this.errorMessage) === null || _m === void 0 ? void 0 : _m.layerType) === 'marker', placeholder: "Latitude" }),
          h("label", { class: "sr-only", htmlFor: "spatialpicker-point-marker-lng" }, "Marker's Longitude"),
          h("bs-form-control", { "control-id": "spatialpicker-point-marker-lng", as: "input", name: "spatialpicker-point-marker-lng", type: "text", value: this.selectedMarkerLng, onBsInput: e => { var _a, _b; return this.onValueChanged({ lng: +((_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value) }); }, isInvalid: ((_o = this.errorMessage) === null || _o === void 0 ? void 0 : _o.invalid) && ((_p = this.errorMessage) === null || _p === void 0 ? void 0 : _p.layerType) === 'marker', placeholder: "Longitude" }))) : null,
        this.useAsIcon && (h("div", { class: "reset-range" },
          h("bs-button", { onClick: () => this.resetRange() }, "Default Range")))),
      ((_q = this.errorMessage) === null || _q === void 0 ? void 0 : _q.invalid) && ((_r = this.errorMessage) === null || _r === void 0 ? void 0 : _r.layerType) === this.selectedLayerType && (h("span", { class: "text-danger d-block mb-3" }, (_s = this.errorMessage) === null || _s === void 0 ? void 0 : _s.message)),
      h("div", { class: "mt-3 map-container" }, this.renderMap()),
      h("p", { class: "mb-0" }, "Available Range: -180, -90, 180, 90")));
  }
  render() {
    return (h(Host, { class: {
        'spatial-icon-btn': this.useAsIcon,
      } }, this.useAsIcon ? (h("div", { class: "spatial-btn-wrapper" },
      h("bs-button", { class: "spatial-button", variant: "light", disabled: this.disabled, title: this.label, onClick: () => this.showMapDisplay() },
        h("bs-icon", { icon: "fas fa-map", size: 20 })),
      this.renderMapContainer())) : (h("div", null, this.renderMapContainer()))));
  }
  static get is() { return "gd-spatial-picker"; }
  static get originalStyleUrls() { return {
    "$": ["./gd-spatial-picker.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gd-spatial-picker.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "'Select spatial area'"
    },
    "showMapIcon": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-map-icon",
      "reflect": false,
      "defaultValue": "true"
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "''"
    },
    "precision": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "precision",
      "reflect": false,
      "defaultValue": "3"
    },
    "minZoom": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "min-zoom",
      "reflect": false,
      "defaultValue": "0"
    },
    "maxZoom": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "max-zoom",
      "reflect": false,
      "defaultValue": "24"
    },
    "zoom": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "zoom",
      "reflect": false,
      "defaultValue": "2"
    },
    "latitude": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "latitude",
      "reflect": false,
      "defaultValue": "0"
    },
    "longitude": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "longitude",
      "reflect": false,
      "defaultValue": "0"
    },
    "fitWorld": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "fit-world",
      "reflect": false,
      "defaultValue": "false"
    },
    "mapWidth": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "map-width",
      "reflect": false
    },
    "mapHeight": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "map-height",
      "reflect": false
    },
    "autocomplete": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "autocomplete",
      "reflect": false,
      "defaultValue": "false"
    },
    "circleDraw": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "use to enable circle draw"
      },
      "attribute": "circle-draw",
      "reflect": false,
      "defaultValue": "true"
    },
    "markerDraw": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "use to enable marker draw"
      },
      "attribute": "marker-draw",
      "reflect": false,
      "defaultValue": "true"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "use to disable spatial picker"
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "useAsIcon": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "use spatial picker as an icon instead of default input."
      },
      "attribute": "use-as-icon",
      "reflect": false,
      "defaultValue": "false"
    },
    "markerIconUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "marker icon for map"
      },
      "attribute": "marker-icon-url",
      "reflect": false,
      "defaultValue": "'marker-icon.png'"
    },
    "markerIconShadowUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "marker shadow icon for map"
      },
      "attribute": "marker-icon-shadow-url",
      "reflect": false,
      "defaultValue": "'marker-shadow.png'"
    }
  }; }
  static get states() { return {
    "selectedArea": {},
    "selectedCircleLat": {},
    "selectedCircleLng": {},
    "selectedCircleRad": {},
    "selectedCircleRadUnit": {},
    "selectedMarkerLat": {},
    "selectedMarkerLng": {},
    "displayMap": {},
    "invalid": {},
    "errorMessage": {},
    "selectedLayerType": {}
  }; }
  static get events() { return [{
      "method": "spatialPickerInit",
      "name": "spatialPickerInit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "valueChanged",
      "name": "valueChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "isInvalid",
      "name": "isInvalid",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "clearSpatialInput",
      "name": "clearSpatialInput",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "value",
      "methodName": "onValueChanged"
    }]; }
  static get listeners() { return [{
      "name": "mapDrawClicked",
      "method": "mapDrawSelectedHandler",
      "target": undefined,
      "capture": true,
      "passive": false
    }]; }
}
