@prushforth/map 1.0.0-preview.1

package/dist/collection/components/utils/mapml/layers/MapFeatureLayer.js

@@ -0,0 +1,623 @@
+import {
+  FeatureGroup,
+  DomUtil,
+  bounds,
+  SVG,
+  Util as LeafletUtil,
+  Browser
+} from 'leaflet';
+import { Util } from '../Util.js';
+import { path } from '../features/path.js';
+import { geometry } from '../features/geometry.js';
+
+/**
+ * The equivalent of MapTileLayer and MapExtentLayer, for features.
+ * Represents an adjacent sequence of <map-feature> elements on the Leaflet map
+ *
+ * This layer will be inserted into the LayerGroup hosted by the <map-link> or
+ * <map-layer> immediately after creation, so that its index within the _layers array of
+ * that LayerGroup will be equal to its z-index within the LayerGroup's container
+ *
+ * <map-tile row="10" col="12" src="url1"></map-tile>  LayerGroup._layers[0] <- each *set* of adjacent tiles
+ * <map-tile row="11" col="12" src="url2"></map-tile>  LayerGroup._layers[0] <- is a *single* MapTileLayer
+ * <map-extent units="OSMTILE" checked hidden> LayerGroup._layers[1] *each* <map-extent> is a LayerGroup of Templated*Layer.js
+ * <map-feature id="a"> LayerGroup._layers[2] <- each *set* of adjacent features
+ * <map-feature id="b"> LayerGroup._layers[2] <- is a single MapFeatureLayer FeatureGroup
+ * <map-tile row="10" col="12" src="url3"></map-tile>  LayerGroup._layers[3]
+ * <map-tile row="11" col="12" src="url4"></map-tile>  LayerGroup._layers[3]
+ * <map-feature id="c"> LayerGroup._layers[4]
+ * <map-feature id="d"> LayerGroup._layers[4]
+ * and so on
+ *
+ */
+export var MapFeatureLayer = FeatureGroup.extend({
+  initialize: function (mapml, options) {
+    /*
+        mapml:
+        1. for query: an array of map-feature elements that it fetches
+        2. for static: null (features manage themselves via connectedCallback)
+        3. for templated: null (created by TemplatedFeaturesOrTilesLayer)
+        4. for tiled: null (vector tiles)
+      */
+    FeatureGroup.prototype.initialize.call(this, null, options);
+
+    // Determine context once
+    this._context = this._determineContext(options);
+
+    // Set up based on context
+    this._setupContainer();
+    this._setupFeatures(mapml);
+  },
+
+  /**
+   * Determines the context for this MapFeatureLayer based on options
+   * @param {Object} options - Layer options
+   * @returns {string} - 'query', 'tiled', 'static', or 'templated'
+   */
+  _determineContext: function (options) {
+    if (options.query) return 'query';
+    if (options.tiles) return 'tiled';
+    if (options._leafletLayer) return 'static';
+    return 'templated';
+  },
+
+  /**
+   * Sets up the container based on the determined context
+   */
+  _setupContainer: function () {
+    if (this._context === 'tiled') {
+      // Tiled vector features don't need container setup
+      return;
+    }
+
+    if (this._context === 'query' || this._context === 'static') {
+      // Query and static contexts create their own container
+      this._container = DomUtil.create(
+        'div',
+        'leaflet-layer',
+        this.options.pane
+      );
+      DomUtil.addClass(this._container, 'leaflet-pane mapml-vector-container');
+    } else {
+      // Templated context uses provided container directly
+      this._container = this.options.pane;
+      DomUtil.addClass(this._container, 'leaflet-pane mapml-vector-container');
+    }
+    if (this.options.zIndex) {
+      this._container.style.zIndex = this.options.zIndex;
+    }
+
+    this.options.renderer.options.pane = this._container;
+  },
+
+  /**
+   * Sets up feature management based on the determined context
+   * @param {*} mapml - The mapml data
+   */
+  _setupFeatures: function (mapml) {
+    switch (this._context) {
+      case 'query':
+        this._queryFeatures = mapml.features ? mapml.features : mapml;
+        break;
+      case 'static':
+        this._features = {};
+        break;
+      case 'templated':
+        // Features are added dynamically by TemplatedFeaturesOrTilesLayer
+        break;
+      case 'tiled':
+        // Tiled features are managed differently
+        break;
+    }
+  },
+
+  /**
+   * Public getter for external code that needs to check if this is a static feature layer
+   * @returns {boolean}
+   */
+  get _staticFeature() {
+    return this._context === 'static';
+  },
+  setZIndex: function (zIndex) {
+    this.options.zIndex = zIndex;
+    this._updateZIndex();
+
+    return this;
+  },
+  _updateZIndex: function () {
+    if (
+      this._container &&
+      this.options.zIndex !== undefined &&
+      this.options.zIndex !== null
+    ) {
+      this._container.style.zIndex = this.options.zIndex;
+    }
+  },
+  isVisible: function () {
+    let map = this.options.mapEl._map;
+    // if query, isVisible is unconditionally true
+    if (this.options.query) return true;
+    // if the featureLayer is for static features, i.e. it is the mapmlvector layer,
+    // if it is empty, isVisible = false
+    // For static context: check if the featureLayer is empty
+    // this._features: check if the current static featureLayer is empty
+    // (Object.keys(this._features).length === 0 => this._features is an empty object)
+    else if (
+      this._context === 'static' &&
+      Object.keys(this._features).length === 0
+    ) {
+      return false;
+    } else {
+      let mapZoom = map.getZoom(),
+        zoomBounds = this.zoomBounds || this.options.zoomBounds,
+        layerBounds = this.layerBounds || this.options.layerBounds,
+        withinZoom = zoomBounds
+          ? mapZoom <= zoomBounds.maxZoom && mapZoom >= zoomBounds.minZoom
+          : false;
+      return (
+        withinZoom &&
+        this._layers &&
+        layerBounds &&
+        layerBounds.overlaps(
+          Util.pixelToPCRSBounds(
+            map.getPixelBounds(),
+            mapZoom,
+            map.options.projection
+          )
+        )
+      );
+    }
+  },
+
+  onAdd: function (map) {
+    this._map = map;
+    
+    // Re-append container to pane if it was removed
+    if (this._container && !this._container.isConnected && this.options.pane) {
+      this.options.pane.appendChild(this._container);
+    }
+    
+    FeatureGroup.prototype.onAdd.call(this, map);
+    if (this._context === 'static') {
+      this._validateRendering();
+    }
+    if (this._queryFeatures) {
+      map.on('featurepagination', this.showPaginationFeature, this);
+    }
+  },
+  addLayer: function (layerToAdd) {
+    FeatureGroup.prototype.addLayer.call(this, layerToAdd);
+    if (!this.options.layerBounds) {
+      this.layerBounds = this.layerBounds
+        ? this.layerBounds.extend(layerToAdd.layerBounds)
+        : bounds(layerToAdd.layerBounds.min, layerToAdd.layerBounds.max);
+
+      if (this.zoomBounds) {
+        if (layerToAdd.zoomBounds.minZoom < this.zoomBounds.minZoom)
+          this.zoomBounds.minZoom = layerToAdd.zoomBounds.minZoom;
+        if (layerToAdd.zoomBounds.maxZoom > this.zoomBounds.maxZoom)
+          this.zoomBounds.maxZoom = layerToAdd.zoomBounds.maxZoom;
+        if (layerToAdd.zoomBounds.minNativeZoom < this.zoomBounds.minNativeZoom)
+          this.zoomBounds.minNativeZoom = layerToAdd.zoomBounds.minNativeZoom;
+        if (layerToAdd.zoomBounds.maxNativeZoom > this.zoomBounds.maxNativeZoom)
+          this.zoomBounds.maxNativeZoom = layerToAdd.zoomBounds.maxNativeZoom;
+      } else {
+        this.zoomBounds = layerToAdd.zoomBounds;
+      }
+    }
+    if (this._context === 'static') {
+      // TODO: validate the use the feature.zoom which is new (was in createGeometry)
+      let featureZoom = layerToAdd.options.mapmlFeature.zoom;
+      if (featureZoom in this._features) {
+        this._features[featureZoom].push(layerToAdd);
+      } else {
+        this._features[featureZoom] = [layerToAdd];
+      }
+      // hide/display features based on the their zoom limits
+      this._validateRendering();
+    }
+    return this;
+  },
+  addRendering: function (featureToAdd) {
+    FeatureGroup.prototype.addLayer.call(this, featureToAdd);
+  },
+  onRemove: function (map) {
+    if (this._queryFeatures) {
+      map.off('featurepagination', this.showPaginationFeature, this);
+      delete this._queryFeatures;
+      DomUtil.remove(this._container);
+    }
+    if (this._context === 'static') {
+      DomUtil.remove(this._container);
+    }
+    FeatureGroup.prototype.onRemove.call(this, map);
+    this._map.featureIndex.cleanIndex();
+  },
+
+  removeLayer: function (featureToRemove) {
+    FeatureGroup.prototype.removeLayer.call(this, featureToRemove);
+    if (!this.options.layerBounds) {
+      delete this.layerBounds;
+      // this ensures that the <map-layer>.extent gets recalculated if needed
+      delete this.options._leafletLayer.bounds;
+      delete this.zoomBounds;
+      // this ensures that the <map-layer>.extent gets recalculated if needed
+      delete this.options._leafletLayer.zoomBounds;
+      delete this._layers[featureToRemove._leaflet_id];
+      this._removeFromFeaturesList(featureToRemove);
+      // iterate through all remaining layers
+      let layerBounds, zoomBounds;
+      let layerIds = Object.keys(this._layers);
+      // re-calculate the layerBounds and zoomBounds for the whole layer when
+      // a feature is permanently removed from the overall layer
+      // bug alert: it's necessary to create a new bounds object to initialize
+      // this.layerBounds, to avoid changing the layerBounds of the first geometry
+      // added to this layer
+      for (let id of layerIds) {
+        let layer = this._layers[id];
+        if (layerBounds) {
+          layerBounds.extend(layer.layerBounds);
+        } else {
+          layerBounds = bounds(layer.layerBounds.min, layer.layerBounds.max);
+        }
+        if (zoomBounds) {
+          if (layer.zoomBounds.minZoom < zoomBounds.minZoom)
+            zoomBounds.minZoom = layer.zoomBounds.minZoom;
+          if (layer.zoomBounds.maxZoom > zoomBounds.maxZoom)
+            zoomBounds.maxZoom = layer.zoomBounds.maxZoom;
+          if (layer.zoomBounds.minNativeZoom < zoomBounds.minNativeZoom)
+            zoomBounds.minNativeZoom = layer.zoomBounds.minNativeZoom;
+          if (layer.zoomBounds.maxNativeZoom > zoomBounds.maxNativeZoom)
+            zoomBounds.maxNativeZoom = layer.zoomBounds.maxNativeZoom;
+        } else {
+          zoomBounds = {};
+          zoomBounds.minZoom = layer.zoomBounds.minZoom;
+          zoomBounds.maxZoom = layer.zoomBounds.maxZoom;
+          zoomBounds.minNativeZoom = layer.zoomBounds.minNativeZoom;
+          zoomBounds.maxNativeZoom = layer.zoomBounds.maxNativeZoom;
+        }
+      }
+      // If the last feature is removed, we should remove the .layerBounds and
+      // .zoomBounds properties, so that the FeatureLayer may be ignored
+      if (layerBounds) {
+        this.layerBounds = layerBounds;
+      } else {
+        delete this.layerBounds;
+      }
+      if (zoomBounds) {
+        this.zoomBounds = zoomBounds;
+      } else {
+        delete this.zoomBounds;
+        delete this.options.zoomBounds;
+      }
+    }
+    return this;
+  },
+  /**
+   * Remove the geomtry rendering (an svg g/ M.Geomtry) from the L.FeatureGroup
+   * _layers array, so that it's not visible on the map, but still contributes
+   * to the bounds and zoom limits of the FeatureLayer.
+   *
+   * @param {type} featureToRemove
+   * @returns {undefined}
+   */
+  removeRendering: function (featureToRemove) {
+    FeatureGroup.prototype.removeLayer.call(this, featureToRemove);
+  },
+  _removeFromFeaturesList: function (feature) {
+    for (let zoom in this._features)
+      for (let i = 0; i < this._features[zoom].length; ++i) {
+        let feature = this._features[zoom][i];
+        if (feature._leaflet_id === feature._leaflet_id) {
+          this._features[zoom].splice(i, 1);
+          break;
+        }
+      }
+  },
+  getEvents: function () {
+    if (this._context === 'static') {
+      return {
+        moveend: this._handleMoveEnd,
+        zoomend: this._handleZoomEnd
+      };
+    }
+    return {};
+  },
+
+  // for query
+  showPaginationFeature: async function (e) {
+    if (this.options.query && this._queryFeatures[e.i]) {
+      let feature = this._queryFeatures[e.i];
+      feature._linkEl.shadowRoot.replaceChildren();
+      this.clearLayers();
+      // append all map-meta from mapml document
+      if (feature.meta) {
+        for (let i = 0; i < feature.meta.length; i++) {
+          feature._linkEl.shadowRoot.appendChild(feature.meta[i]);
+        }
+      }
+      feature._linkEl.shadowRoot.appendChild(feature);
+      // Wait for the map-feature component to be ready before calling addFeature
+      // Stencil components need time to hydrate after being appended to the DOM
+      await feature.whenReady();
+      feature.addFeature(this);
+      e.popup._navigationBar.querySelector('p').innerText =
+        e.i + 1 + '/' + this.options._leafletLayer._totalFeatureCount;
+      e.popup._content
+        .querySelector('iframe')
+        .setAttribute('sandbox', 'allow-same-origin allow-forms');
+      e.popup._content.querySelector('iframe').srcdoc =
+        feature.querySelector('map-properties').innerHTML;
+      // "zoom to here" link need to be re-set for every pagination
+      this._map.fire('attachZoomLink', { i: e.i, currFeature: feature });
+      this._map.once(
+        'popupclose',
+        function (e) {
+          this.shadowRoot.innerHTML = '';
+        },
+        feature._linkEl
+      );
+    }
+  },
+
+  _handleMoveEnd: function () {
+    this._removeCSS();
+  },
+
+  _handleZoomEnd: function (e) {
+    // handle zoom end gets called twice for every zoom, this condition makes it go through once only.
+    if (this.zoomBounds) {
+      this._validateRendering();
+    }
+  },
+  /*
+   * _validateRendering prunes the features currently in the _features hashmap (created
+   * by us).  _features categorizes features by zoom, and is used to remove or add
+   * features from the map based on the map-feature min/max getters.  It also
+   * maintains the _map.featureIndex property, which is used to control the tab
+   * order for interactive (static) features currently rendered on the map.
+   * @private
+   *  */
+  _validateRendering: function () {
+    // since features are removed and re-added by zoom level, need to clean the feature index before re-adding
+    if (this._map) this._map.featureIndex.cleanIndex();
+    let map = this._map || this.options._leafletLayer?._map;
+    // Guard against case where neither this._map nor _leafletLayer._map is available yet
+    if (!map) return;
+    // it's important that we not try to validate rendering if the FeatureLayer
+    // isn't actually  being rendered (i.e. on the map.  the _map property can't
+    // be used because once it's assigned  (by onAdd, above) it's never unassigned.
+    if (!map.hasLayer(this)) return;
+    if (this._features) {
+      for (let zoom in this._features) {
+        for (let k = 0; k < this._features[zoom].length; k++) {
+          let geometry = this._features[zoom][k],
+            renderable = geometry._checkRender(
+              map.getZoom(),
+              this.zoomBounds.minZoom,
+              this.zoomBounds.maxZoom
+            );
+          if (!renderable) {
+            // insert a placeholder in the dom rendering for the geometry
+            // so that it retains its layering order when it is next rendered
+            let placeholder = document.createElement('span');
+            placeholder.id = geometry._leaflet_id;
+            // geometry.defaultOptions.group is the rendered svg g element in sd
+            geometry.defaultOptions.group.insertAdjacentElement(
+              'beforebegin',
+              placeholder
+            );
+            // removing the rendering without removing the feature from the feature list
+            this.removeRendering(geometry);
+          } else if (
+            // checking for _map so we do not enter this code block during the connectedCallBack of the map-feature
+            !map.hasLayer(geometry) &&
+            !geometry._map
+          ) {
+            this.addRendering(geometry);
+            // update the layerbounds
+            // Only try to find placeholder if the geometry group has a parentNode
+            // If parentNode is null, the geometry is being handled by reRender()
+            // which will attach it to the DOM after _validateRendering completes
+            if (geometry.defaultOptions.group.parentNode) {
+              let placeholder =
+                geometry.defaultOptions.group.parentNode.querySelector(
+                  `span[id="${geometry._leaflet_id}"]`
+                );
+              if (placeholder) {
+                placeholder.replaceWith(geometry.defaultOptions.group);
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+
+  _setZoomTransform: function (center, clampZoom) {
+    var scale = this._map.getZoomScale(this._map.getZoom(), clampZoom),
+      translate = center
+        .multiplyBy(scale)
+        .subtract(this._map._getNewPixelOrigin(center, this._map.getZoom()))
+        .round();
+
+    if (Browser.any3d) {
+      DomUtil.setTransform(this._layers[clampZoom], translate, scale);
+    } else {
+      DomUtil.setPosition(this._layers[clampZoom], translate);
+    }
+  },
+
+  /**
+   * Render a <map-feature> as a Leaflet layer that can be added to a map or
+   * LayerGroup as required.  Kind of a "factory" method.
+   *
+   * Uses this.options, so if you need to, you can construct a FeatureLayer
+   * with options set as required
+   *
+   * @param feature - a <map-feature> element
+   * @param {String} fallbackCS - "gcrs" | "pcrs"
+   * @param {String} tileZoom - the zoom of the map at which the coordinates will exist
+   *
+   * @returns Geometry, which is an L.FeatureGroup
+   * @public
+   */
+  createGeometry: function (feature, fallbackCS, tileZoom) {
+    // was let options = this.options, but that was causing unwanted side-effects
+    // because we were adding .layerBounds and .zoomBounds to it before passing
+    // to _createGeometry, which meant that FeatureLayer was sprouting
+    // options.layerBounds and .zoomBounds when it should not have those props
+    let options = Object.assign({}, this.options);
+
+    if (options.filter && !options.filter(feature)) {
+      return;
+    }
+
+    if (feature.classList.length) {
+      options.className = feature.classList.value;
+    }
+    // tileZoom is only used when the map-feature is discarded i.e. for rendering
+    // vector tiles' feature geometries in bulk (in this case only the geomtry
+    // is rendered on a tile-shaped FeatureLayer
+    let zoom = feature.zoom ?? tileZoom,
+      title = feature.querySelector('map-featurecaption');
+    title = title
+      ? title.innerHTML
+      : this.options.mapEl.locale.dfFeatureCaption;
+
+    if (feature.querySelector('map-properties')) {
+      options.properties = document.createElement('div');
+      options.properties.classList.add('mapml-popup-content');
+      options.properties.insertAdjacentHTML(
+        'afterbegin',
+        feature.querySelector('map-properties').innerHTML
+      );
+    }
+    let cs =
+      feature.getElementsByTagName('map-geometry')[0]?.getAttribute('cs') ??
+      fallbackCS;
+    // options.layerBounds and options.zoomBounds are set by TemplatedTileLayer._createFeatures
+    // each geometry needs bounds so that it can be a good community member of this._layers
+    if (this._context === 'static' || this.options.query) {
+      options.layerBounds = Util.extentToBounds(feature.extent, 'PCRS');
+      options.zoomBounds = feature.extent.zoom;
+    }
+    let geom = this._geometryToLayer(feature, options, cs, +zoom, title);
+    if (geom && Object.keys(geom._layers).length !== 0) {
+      // if the layer is being used as a query handler output, it will have
+      // a color option set.  Otherwise, copy classes from the feature
+      if (!geom.options.color && feature.hasAttribute('class')) {
+        geom.options.className = feature.getAttribute('class');
+      }
+      geom.defaultOptions = geom.options;
+      this.resetStyle(geom);
+
+      if (options.onEachFeature) {
+        geom.bindTooltip(title, { interactive: true, sticky: true });
+      }
+      if (feature.tagName.toUpperCase() === 'MAP-FEATURE') {
+        feature._groupEl = geom.options.group;
+      }
+      return geom;
+    }
+  },
+
+  resetStyle: function (layer) {
+    var style = this.options.style;
+    if (style) {
+      // reset any custom styles
+      LeafletUtil.extend(layer.options, layer.defaultOptions);
+      this._setLayerStyle(layer, style);
+    }
+  },
+
+  setStyle: function (style) {
+    this.eachLayer(function (layer) {
+      this._setLayerStyle(layer, style);
+    }, this);
+  },
+
+  _setLayerStyle: function (layer, style) {
+    if (typeof style === 'function') {
+      style = style(layer.feature);
+    }
+    if (layer.setStyle) {
+      layer.setStyle(style);
+    }
+  },
+  _removeCSS: function () {
+    let toDelete = this._container.querySelectorAll(
+      'link[rel=stylesheet],style'
+    );
+    for (let i = 0; i < toDelete.length; i++) {
+      this._container.removeChild(toDelete[i]);
+    }
+  },
+  _geometryToLayer: function (feature, vectorOptions, cs, zoom, title) {
+    let geom = feature.getElementsByTagName('map-geometry')[0],
+      group = [],
+      groupOptions = {},
+      svgGroup = SVG.create('g'),
+      copyOptions = Object.assign({}, vectorOptions);
+    svgGroup._featureEl = feature; // rendered <g> has a reference to map-feature
+    if (geom) {
+      for (let geo of geom.querySelectorAll(
+        'map-polygon, map-linestring, map-multilinestring, map-point, map-multipoint'
+      )) {
+        group.push(
+          path(
+            geo,
+            Object.assign(copyOptions, {
+              nativeCS: cs,
+              nativeZoom: zoom,
+              projection: this.options.projection,
+              featureID: feature.id,
+              group: svgGroup,
+              wrappers: this._getGeometryParents(geo.parentElement),
+              featureLayer: this,
+              _leafletLayer: this.options._leafletLayer
+            })
+          )
+        );
+      }
+      let groupOptions = {
+          group: svgGroup,
+          mapmlFeature: feature,
+          featureID: feature.id,
+          accessibleTitle: title,
+          onEachFeature: vectorOptions.onEachFeature,
+          properties: vectorOptions.properties,
+          _leafletLayer: this.options._leafletLayer,
+          layerBounds: vectorOptions.layerBounds,
+          zoomBounds: vectorOptions.zoomBounds
+        },
+        collections =
+          geom.querySelector('map-multipolygon') ||
+          geom.querySelector('map-geometrycollection');
+      if (collections)
+        groupOptions.wrappers = this._getGeometryParents(
+          collections.parentElement
+        );
+      return geometry(group, groupOptions);
+    }
+  },
+
+  _getGeometryParents: function (subType, elems = []) {
+    if (subType && subType.tagName.toUpperCase() !== 'MAP-GEOMETRY') {
+      if (
+        subType.tagName.toUpperCase() === 'MAP-MULTIPOLYGON' ||
+        subType.tagName.toUpperCase() === 'MAP-GEOMETRYCOLLECTION'
+      )
+        return this._getGeometryParents(subType.parentElement, elems);
+      return this._getGeometryParents(
+        subType.parentElement,
+        elems.concat([subType])
+      );
+    } else {
+      return elems;
+    }
+  }
+});
+export var mapFeatureLayer = function (mapml, options) {
+  return new MapFeatureLayer(mapml, options);
+};