import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.array.includes-4e9a9edc.js';
import './es.number.constructor-e21aea90.js';
import './es.object.to-string-591fd1f0.js';
import './web.dom-collections.for-each-ee588afd.js';
import './es.array.map-5d0928f8.js';
import './es.array.from-671ff852.js';
import './es.string.iterator-fb9fd509.js';
import './web.dom-collections.iterator-d60232b3.js';
import './es.json.stringify-216d23c3.js';
import './es.array.join-3984659f.js';
import './es.array.concat-3632dc18.js';
import './es.array.filter-5c2e79cd.js';
import { n as normalizeComponent } from './normalize-component-43ce05b9.js';
import './defineProperty-18999f8e.js';
import './well-known-symbol-9b7e0fd8.js';
import './object-keys-c3d7c097.js';
import './object-set-prototype-of-8dc0b474.js';
import './classof-dede1dd4.js';
import './dom-iterables-b6f5ef3b.js';
import './array-iteration-75fcf9dc.js';
import './function-bind-context-34b5621f.js';
import './array-species-create-f23f8d86.js';
import './array-method-is-strict-28896b99.js';
import './array-method-has-species-support-118179bf.js';
import './create-property-5dd3883c.js';
import './string-multibyte-73955f20.js';
import './set-to-string-tag-3767da91.js';
import './set-species-fff7bea0.js';

//
//
//
//
//
//
//

/**
 * A component to display a Leaflet-map with multiple locations
 */
var script = {
  name: 'BaseMap',
  props: {
    /**
     * define map attribution
     */
    attribution: {
      type: String,
      default: 'Source: <a href="https://openstreetmap.org/">OpenStreetMap contributors</a>'
    },

    /**
     * define position of map attribution<br>
     *   valid options: 'topright' | 'bottomleft' | 'bottomright'
     */
    attributionPosition: {
      type: String,
      default: 'bottomright',
      validate: function validate(val) {
        return ['topright', 'bottomleft', 'bottomright'].includes(val);
      }
    },

    /**
     * set array index of marker to center map from outside
     */
    centerMarker: {
      type: Number,
      default: null
    },

    /**
     * define number of items for cluster sizes<br>
     *   structure: { medium: 5, large: 20, xlarge: 100 }<br>
     *   Note: medium, large, xlarge is mandatory
     */
    clusterSizes: {
      type: Object,
      default: function _default() {
        return {
          medium: 5,
          large: 20,
          xlarge: 100
        };
      },
      validator: function validator(data) {
        return data.medium && data.large && data.xlarge;
      }
    },

    /**
     * define map copyright
     */
    copyright: {
      type: String,
      default: '<a href=http://creativecommons.org/licenses/by-sa/3.0/>CC BY-SA 3.0</a>'
    },

    /**
     * set array index of marker to highlight it from outside
     */
    highlightMarker: {
      type: Number,
      default: null
    },

    /*
     * define icon
     */
    icon: {
      type: String,
      default: '<svg viewBox="0 0 70.866 70.866" xmlns="http://www.w3.org/2000/svg"><path d="m35.433 0a22.731 22.731 0 0 0-22.731 22.82 24.125 24.125 0 0 0 1.872 9.1814l19.611 38.063a1.3718 1.3718 0 0 0 2.496 0l19.611-38.063a22.249 22.249 0 0 0 1.872-9.1814 22.731 22.731 0 0 0-22.731-22.82zm0 32.858a10.216 10.216 0 1 1 10.216-10.216 10.241 10.241 0 0 1-10.216 10.216z" fill="#010101"/></svg>'
    },

    /**
     * define icon size
     */
    iconSize: {
      type: Number,
      default: 32
    },

    /**
     * define custom options for map data<br>
     *   e.g. {
     *          style: 'normal',
     *          subdomains: ['maps', 'maps1', 'maps2', 'maps3', 'maps4'],
     *          tileMatrixSet: 'google3857',
     *          type: 'geolandbasemap'
     *   }<br>
     *   usage custom keys in url property:
     *   https://{s}.wien.gv.at/basemap/{type}/{style}/{tileMatrixSet}/{z}/{y}/{x}.png
     */
    options: {
      type: Object,
      default: function _default() {
        return {};
      }
    },

    /**
     * define marker<br>
     *   structure: [{<br>
     *     coordinates: [16.382782, 48.208309],<br>
     *     latLng: [48.208309, 16.382782],<br>
     *     data: [ 'University of Applied Arts', 'Oskar Kokoschka-Platz 2',
     *     '1010 Vienna', 'Austria']<br>
     *   }]<br><br>
     *   Note: either GeoJSON coordinates or latLng is mandatory
     */
    marker: {
      type: Array,
      default: function _default() {
        return [];
      },
      validator: function validator(data) {
        return data.every(function (item) {
          return item.latLng || item.coordinates;
        });
      }
    },

    /**
     * show popups for marker
     */
    markerPopups: {
      type: Boolean,
      default: true
    },

    /**
     * define max zoom factor
     */
    maxZoom: {
      type: Number,
      default: 18
    },

    /**
     * define url to tileLayer service
     */
    url: {
      type: String,
      default: ''
    },

    /**
     * specify service for the [tileLayer](https://leafletjs.com/examples/wms/wms.html)<br>
     * valid values: 'WMTS' | 'TMS' | 'WMS'
     */
    tileLayerService: {
      type: String,
      default: 'WMTS',
      validator: function validator(val) {
        return ['WMTS', 'TMS', 'WMS'].includes(val);
      }
    },

    /**
     * define initial zoom factor
     */
    zoom: {
      type: Number,
      default: 16
    }
  },
  data: function data() {
    return {
      L: null,
      map: null,
      activePopUp: null,
      boundsPadding: [0, 20],
      highlightedMarker: null,
      markerClass: 'base-map-marker-icon',
      markerClusterClass: 'base-map-marker-cluster',
      popupOptions: {
        offset: [10, -25],
        closeButton: false,
        keepInView: true
      },
      scrollWheelZoom: false
    };
  },
  computed: {
    // Observer to check if component is in viewport and init map
    observer: function observer() {
      var _this = this;

      return new IntersectionObserver(function (entries, observer) {
        entries.forEach(function (entry) {
          // If the entry is not in the viewport, do nothing
          if (!entry.isIntersecting) return; // Stop observing

          observer.unobserve(entry.target); // Init map

          _this.init();
        });
      });
    },
    cssProps: function cssProps() {
      return {
        '--leaflet-popup-offset-bottom': "".concat(this.popupOptions.offset[1], "px")
      };
    },
    // compare marker objects and remove duplicates
    markerFiltered: function markerFiltered() {
      return Array.from(new Set(this.marker.map(JSON.stringify))).map(JSON.parse);
    }
  },
  watch: {
    centerMarker: function centerMarker(value) {
      if (value !== null) {
        this.map.setView(this.getLatLng(this.markerFiltered[value]), this.zoom);
      }
    },
    highlightMarker: function highlightMarker(value, before) {
      var _this2 = this;

      if (value !== null) {
        // close all open popups
        this.map.closePopup(); // reset all marker

        this.resetAllMarker(); // get all marker and filter by id

        this.map.eachLayer(function (layer) {
          /* eslint-disable no-underscore-dangle */
          // highlight markerCluster
          if (layer._bounds && layer._icon) {
            var marker = _this2.getLatLng(_this2.markerFiltered[value]);

            var bounds = _this2.L.latLngBounds(layer._bounds);

            if (bounds.contains(marker)) {
              layer._icon.classList.add("".concat(_this2.markerClusterClass, "--active"));

              return;
            }
          }
          /* eslint-enable no-underscore-dangle */
          // highlight marker


          if (layer.options.id != null && layer.options.id === value) {
            // eslint-disable-next-line no-underscore-dangle
            _this2.highlightedMarker = layer._icon;

            _this2.highlightedMarker.classList.add("".concat(_this2.markerClass, "--active"));
          }
        });
        return;
      } // reset active marker


      if (this.highlightedMarker != null && this.activePopUp !== before) {
        this.highlightedMarker.classList.remove("".concat(this.markerClass, "--active"));
        this.highlightedMarker = null;
      } // reset active markerCluster


      var markerClusterActive = this.$el.querySelector(".".concat(this.markerClusterClass, "--active"));

      if (markerClusterActive) {
        markerClusterActive.classList.remove("".concat(this.markerClusterClass, "--active"));
      }
    }
  },
  beforeDestroy: function beforeDestroy() {
    this.observer.disconnect();
  },
  mounted: function mounted() {
    // Execute only on clientside
    if (!process.browser) {
      return;
    } // Add observer to check if component is in viewport and init map


    this.observer.observe(this.$el);
  },
  methods: {
    init: function init() {
      var _this3 = this;

      // Check if leaflet map is already initialized
      if (this.L) {
        return;
      }
      /* eslint-disable global-require */


      this.L = require('leaflet');

      require('leaflet-responsive-popup');

      require('leaflet.markercluster');
      /* eslint-enable global-require */
      // Initialize Leaflet map


      this.map = this.L.map(this.$refs.mapElement, {
        scrollWheelZoom: this.scrollWheelZoom,
        tap: false // fix clickEvent for macOS Safari

      }); // Set position of attribution

      this.map.attributionControl.setPosition(this.attributionPosition); // Draw Leaflet map

      var mapConfig = _objectSpread2({
        maxZoom: this.maxZoom,
        attribution: [this.attribution, this.copyright].join(', '),
        tms: this.tileLayerService === 'TMS'
      }, this.options);

      if (this.tileLayerService === 'WMS') {
        this.L.tileLayer.wms(this.url, mapConfig).addTo(this.map);
      } else {
        this.L.tileLayer(this.url, mapConfig).addTo(this.map);
      } // Add marker to map


      if (!this.markerFiltered.length) {
        return;
      } // Custom icon


      var iconOptions = {
        className: this.markerClass,
        html: this.icon,
        iconSize: [this.iconSize, this.iconSize],
        iconAnchor: [this.iconSize / 2, this.iconSize]
      };
      var markerIcon = this.L.divIcon(iconOptions); // Define Leaflet clusterGroup

      this.markerCluster = this.L.markerClusterGroup({
        maxClusterRadius: 50,
        showCoverageOnHover: false,
        iconCreateFunction: function iconCreateFunction(cluster) {
          var items = cluster.getAllChildMarkers().length;
          var classSize = 'small';
          var size = 48;

          if (items > _this3.clusterSizes.medium) {
            classSize = 'medium';
            size = 64;
          }

          if (items > _this3.clusterSizes.large) {
            classSize = 'large';
            size = 80;
          }

          if (items > _this3.clusterSizes.xlarge) {
            classSize = 'xlarge';
            size = 128;
          }

          return _this3.L.divIcon({
            html: "<div class=\"".concat(_this3.markerClusterClass, "__inner\">").concat(items, "</div>"),
            className: "".concat(_this3.markerClusterClass, " ").concat(_this3.markerClusterClass, "--").concat(classSize),
            iconSize: _this3.L.point(size, size)
          });
        }
      });
      this.markerFiltered.forEach(function (item, index) {
        var popup = _this3.L.responsivePopup(_this3.popupOptions);

        var markerOptions = {
          id: index,
          icon: markerIcon
        }; // check if geo reference is present before setting marker on map

        if (!_this3.getLatLng(item)) {
          return;
        } // Define marker to map


        var marker = _this3.L.marker(_this3.L.latLng(_this3.getLatLng(item)), markerOptions).on('mouseover', _this3.activateMarker).on('mouseout', _this3.resetMarker); // Set popup content


        if (_this3.markerPopups && Array.isArray(item.data)) {
          popup.setContent(item.data.join('<br>'));
          marker.bindPopup(popup);
        } // Add marker to cluster


        _this3.markerCluster.addLayer(marker);
      }); // Add clusterGroup to map

      this.map.addLayer(this.markerCluster); // Check if marker has property latLng or coordinates again, otherwise do not render to map

      var marker = this.markerFiltered.filter(function (item) {
        return item.latLng || item.coordinates;
      });

      if (!marker.length) {
        return;
      } // Center map based on Marker(s)
      // has to be called after marker have been set to map


      var bounds = new this.L.LatLngBounds(this.markerFiltered.map(function (item) {
        return _this3.getLatLng(item);
      }));
      this.map.fitBounds(bounds, {
        padding: this.boundsPadding,
        maxZoom: this.zoom
      });
    },
    activateMarker: function activateMarker(e) {
      /* eslint-disable no-underscore-dangle */
      var id = e.target.options.id;
      var marker = e.target._icon;
      /* eslint-enable no-underscore-dangle */
      // reset all marker

      this.resetAllMarker(); // set active and populate markerState

      if (!e.target.options.active) {
        this.activePopUp = id;
        this.markerState(id);
        marker.classList.add("".concat(this.markerClass, "--active")); // eslint-disable-next-line no-param-reassign

        e.target.options.active = true;
      }
    },
    resetMarker: function resetMarker(e) {
      // eslint-disable-next-line no-underscore-dangle
      var marker = e.target._icon;
      marker.classList.remove("".concat(this.markerClass, "--active"));
      this.activePopUp = null;
      this.markerState(null); // eslint-disable-next-line no-param-reassign

      delete e.target.options.active;
    },
    resetAllMarker: function resetAllMarker() {
      var _this4 = this;

      this.map.eachLayer(function (layer) {
        // eslint-disable-next-line no-underscore-dangle
        var marker = layer._icon;

        if (marker) {
          marker.classList.remove("".concat(_this4.markerClass, "--active"));
          marker.classList.remove("".concat(_this4.markerClusterClass, "--active"));
          _this4.activePopUp = null;

          _this4.markerState(null); // eslint-disable-next-line no-param-reassign


          delete layer.options.active;
        }
      });
    },
    markerState: function markerState(value) {
      /**
       * Event emitted on mouseenter, mouseleave of a map marker<br>
       * mouseenter: index of marker object in component property 'marker' array<br>
       * mouseleave: null
       *
       * @event highlighted
       * @property {number} value - array index or null
       */
      this.$emit('highlighted', value);
    },
    getLatLng: function getLatLng(item) {
      if (item.coordinates) {
        return [item.coordinates[1], item.coordinates[0]];
      }

      if (item.latLng) {
        return item.latLng;
      }

      return null;
    }
  }
};

/* script */
var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    ref: "mapElement",
    staticClass: "base-map",
    style: _vm.cssProps
  });
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-56f8afb6";
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

var BaseMap = __vue_component__;

export { BaseMap as default };
