@prushforth/map 1.0.0-preview.1

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

@@ -0,0 +1,108 @@
+import { Layer, DomUtil, DomEvent } from 'leaflet';
+
+export var Crosshair = Layer.extend({
+  onAdd: function (map) {
+    // SVG crosshair design from https://github.com/xguaita/Leaflet.MapCenterCoord/blob/master/src/icons/MapCenterCoordIcon1.svg?short_path=81a5c76
+    // Optimized with SVGOMG: https://jakearchibald.github.io/svgomg/
+    let svgInnerHTML = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 100 100"><g stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><circle cx="50.028" cy="50.219" r="3.923" stroke-width="2" color="currentColor" overflow="visible"/><path stroke-width="3" d="M4.973 54.424h31.768a4.204 4.204 0 1 0 0-8.409H4.973A4.203 4.203 0 0 0 .77 50.22a4.203 4.203 0 0 0 4.204 4.205z" color="currentColor" overflow="visible"/><path stroke-width="3" d="M54.232 5.165a4.204 4.204 0 1 0-8.408 0v31.767a4.204 4.204 0 1 0 8.408 0V5.165z"/><path stroke-width="3" d="M99.288 50.22a4.204 4.204 0 0 0-4.204-4.205H63.317a4.204 4.204 0 1 0 0 8.409h31.767a4.205 4.205 0 0 0 4.204-4.205zM45.823 95.274a4.204 4.204 0 1 0 8.409 0V63.506a4.204 4.204 0 1 0-8.409 0v31.768z" color="currentColor" overflow="visible"/></g></svg>`;
+
+    this._container = DomUtil.create('div', 'mapml-crosshair', map._container);
+    this._container.innerHTML = svgInnerHTML;
+    map.isFocused = false;
+    this._isQueryable = false;
+
+    map.on(
+      'layerchange layeradd layerremove overlayremove',
+      this._toggleEvents,
+      this
+    );
+    map.on('popupopen', this._isMapFocused, this);
+    DomEvent.on(
+      map._container,
+      'keydown keyup mousedown',
+      this._isMapFocused,
+      this
+    );
+
+    this._addOrRemoveCrosshair();
+  },
+
+  onRemove: function (map) {
+    map.off(
+      'layerchange layeradd layerremove overlayremove',
+      this._toggleEvents
+    );
+    map.off('popupopen', this._isMapFocused);
+    DomEvent.off(map._container, 'keydown keyup mousedown', this._isMapFocused);
+  },
+
+  _toggleEvents: function () {
+    if (this._hasQueryableLayer()) {
+      this._map.on('viewreset move moveend', this._addOrRemoveCrosshair, this);
+    } else {
+      this._map.off('viewreset move moveend', this._addOrRemoveCrosshair, this);
+    }
+    this._addOrRemoveCrosshair();
+  },
+
+  _addOrRemoveCrosshair: function (e) {
+    if (this._hasQueryableLayer()) {
+      this._container.removeAttribute('hidden');
+    } else {
+      this._container.setAttribute('hidden', '');
+    }
+  },
+
+  _addOrRemoveMapOutline: function (e) {
+    let mapContainer = this._map._container;
+    if (this._map.isFocused && !this._outline) {
+      this._outline = DomUtil.create('div', 'mapml-outline', mapContainer);
+    } else if (!this._map.isFocused && this._outline) {
+      DomUtil.remove(this._outline);
+      delete this._outline;
+    }
+  },
+
+  _hasQueryableLayer: function () {
+    let layers = this._map.options.mapEl.layers;
+    if (this._map.isFocused) {
+      for (let layer of layers) {
+        if (layer.queryable && layer.queryable()) {
+          return true;
+        }
+      }
+    }
+    return false;
+  },
+
+  // TODO: should be merged with the 'mapfocused' event emitted by mapml-viewer and map, not trivial
+  _isMapFocused: function (e) {
+    //set this._map.isFocused = true if arrow buttons are used
+    if (!this._map._container.parentNode.activeElement) {
+      this._map.isFocused = false;
+      return;
+    }
+    let isLeafletContainer =
+      this._map._container.parentNode.activeElement.classList.contains(
+        'leaflet-container'
+      );
+    if (
+      isLeafletContainer &&
+      ['keydown'].includes(e.type) &&
+      e.shiftKey &&
+      e.keyCode === 9
+    ) {
+      this._map.isFocused = false;
+    } else
+      this._map.isFocused =
+        isLeafletContainer && ['keyup', 'keydown'].includes(e.type);
+
+    if (this._map.isFocused) this._map.fire('mapkeyboardfocused');
+    this._addOrRemoveMapOutline();
+    this._addOrRemoveCrosshair();
+  }
+});
+
+export var crosshair = function (options) {
+  return new Crosshair(options);
+};

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

@@ -0,0 +1,357 @@
+import {
+  Layer,
+  DomUtil,
+  GridLayer,
+  LayerGroup,
+  Path,
+  point,
+  circle,
+  bounds,
+  setOptions
+} from 'leaflet';
+
+export var DebugOverlay = Layer.extend({
+  onAdd: function (map) {
+    let mapSize = map.getSize();
+
+    //conditionally show container for debug panel/banner only when the map has enough space for it
+    if (mapSize.x > 400 || mapSize.y > 300) {
+      this._container = DomUtil.create('table', 'mapml-debug', map._container);
+
+      this._panel = debugPanel({
+        className: 'mapml-debug-panel',
+        pane: this._container
+      });
+      map.addLayer(this._panel);
+    }
+
+    this._grid = debugGrid({
+      className: 'mapml-debug-grid',
+      pane: map._panes.mapPane,
+      zIndex: 400,
+      tileSize: map.options.crs.options.crs.tile.bounds.max.x
+    });
+    map.addLayer(this._grid);
+
+    this._vectors = debugVectors({
+      className: 'mapml-debug-vectors',
+      pane: map._panes.mapPane,
+      toolPane: this._container
+    });
+    map.addLayer(this._vectors);
+  },
+
+  onRemove: function (map) {
+    map.removeLayer(this._grid);
+    map.removeLayer(this._vectors);
+    if (this._panel) {
+      //conditionally remove the panel, as it's not always added
+      map.removeLayer(this._panel);
+      DomUtil.remove(this._container);
+    }
+  }
+});
+
+export var debugOverlay = function () {
+  return new DebugOverlay();
+};
+
+export var DebugPanel = Layer.extend({
+  initialize: function (options) {
+    setOptions(this, options);
+  },
+
+  onAdd: function (map) {
+    this._title = DomUtil.create(
+      'caption',
+      'mapml-debug-banner',
+      this.options.pane
+    );
+    this._title.innerHTML = 'Debug mode';
+
+    map.debug = {};
+    map.debug._infoContainer = this._debugContainer = DomUtil.create(
+      'tbody',
+      'mapml-debug-panel',
+      this.options.pane
+    );
+
+    let infoContainer = map.debug._infoContainer;
+
+    map.debug._tileCoord = DomUtil.create(
+      'tr',
+      'mapml-debug-coordinates',
+      infoContainer
+    );
+    map.debug._tileMatrixCoord = DomUtil.create(
+      'tr',
+      'mapml-debug-coordinates',
+      infoContainer
+    );
+    map.debug._mapCoord = DomUtil.create(
+      'tr',
+      'mapml-debug-coordinates',
+      infoContainer
+    );
+    map.debug._tcrsCoord = DomUtil.create(
+      'tr',
+      'mapml-debug-coordinates',
+      infoContainer
+    );
+    map.debug._pcrsCoord = DomUtil.create(
+      'tr',
+      'mapml-debug-coordinates',
+      infoContainer
+    );
+    map.debug._gcrsCoord = DomUtil.create(
+      'tr',
+      'mapml-debug-coordinates',
+      infoContainer
+    );
+
+    this._map.on('mousemove', this._updateCoords);
+  },
+  onRemove: function () {
+    DomUtil.remove(this._title);
+    if (this._debugContainer) {
+      DomUtil.remove(this._debugContainer);
+      this._map.off('mousemove', this._updateCoords);
+    }
+  },
+  _updateCoords: function (e) {
+    if (this.contextMenu._visible) return;
+    let mapEl = this.options.mapEl,
+      pointCoords = mapEl._map.project(e.latlng),
+      scale = mapEl._map.options.crs.scale(+mapEl.zoom),
+      pcrs = mapEl._map.options.crs.transformation.untransform(
+        pointCoords,
+        scale
+      ),
+      tileSize = mapEl._map.options.crs.options.crs.tile.bounds.max.x,
+      pointI = pointCoords.x % tileSize,
+      pointJ = pointCoords.y % tileSize;
+
+    if (pointI < 0) pointI += tileSize;
+    if (pointJ < 0) pointJ += tileSize;
+
+    this.debug._tileCoord.innerHTML = `
+      <th scope="row">tile: </th>
+      <td>i: ${Math.trunc(pointI)}, </td>
+      <td>j: ${Math.trunc(pointJ)}</td>
+      `;
+    this.debug._mapCoord.innerHTML = `
+      <th scope="row">map: </th>
+      <td>i: ${Math.trunc(e.containerPoint.x)}, </td>
+      <td>j: ${Math.trunc(e.containerPoint.y)}</td>
+      `;
+    this.debug._gcrsCoord.innerHTML = `
+      <th scope="row">gcrs: </th>
+      <td>lon: ${e.latlng.lng.toFixed(6)}, </td>
+      <td>lat: ${e.latlng.lat.toFixed(6)}</td>
+      `;
+    this.debug._tcrsCoord.innerHTML = `
+      <th scope="row">tcrs: </th>
+      <td>x: ${Math.trunc(pointCoords.x)}, </td>
+      <td>y: ${Math.trunc(pointCoords.y)}</td>
+      `;
+    this.debug._tileMatrixCoord.innerHTML = `
+      <th scope="row">tilematrix: </th>
+      <td>column: ${Math.trunc(pointCoords.x / tileSize)}, </td>
+      <td>row: ${Math.trunc(pointCoords.y / tileSize)}</td>
+      `;
+    this.debug._pcrsCoord.innerHTML = `
+      <th scope="row">pcrs: </th>
+      <td>easting: ${pcrs.x.toFixed(2)}, </td>
+      <td>northing: ${pcrs.y.toFixed(2)}</td>
+      `;
+  }
+});
+
+export var debugPanel = function (options) {
+  return new DebugPanel(options);
+};
+
+export var DebugGrid = GridLayer.extend({
+  initialize: function (options) {
+    setOptions(this, options);
+    GridLayer.prototype.initialize.call(this, this._map);
+  },
+
+  createTile: function (coords) {
+    let tile = DomUtil.create('div', 'mapml-debug-tile');
+    tile.setAttribute('col', coords.x);
+    tile.setAttribute('row', coords.y);
+    tile.setAttribute('zoom', coords.z);
+    tile.innerHTML = [
+      `col: ${coords.x}`,
+      `row: ${coords.y}`,
+      `zoom: ${coords.z}`
+    ].join(', ');
+
+    tile.style.outline = '1px dashed red';
+    return tile;
+  }
+});
+
+export var debugGrid = function (options) {
+  return new DebugGrid(options);
+};
+
+export var DebugVectors = LayerGroup.extend({
+  initialize: function (options) {
+    setOptions(this, options);
+    LayerGroup.prototype.initialize.call(this, this._map, options);
+  },
+  onAdd: function (map) {
+    map.on('overlayremove', this._mapLayerUpdate, this);
+    map.on('overlayadd', this._mapLayerUpdate, this);
+    let center = map.options.crs.transformation.transform(
+      point(0, 0),
+      map.options.crs.scale(0)
+    );
+    this._centerVector = circle(map.options.crs.pointToLatLng(center, 0), {
+      radius: 250,
+      className: 'mapml-debug-vectors projection-centre'
+    });
+    this._centerVector.bindTooltip('Projection Center');
+
+    this._addBounds(map);
+  },
+  onRemove: function (map) {
+    this.clearLayers();
+  },
+
+  _addBounds: function (map) {
+    // to delay the addBounds to wait for the layer.extentbounds / layer.layerbounds to be ready when the map-layer checked attribute is changed
+    setTimeout(() => {
+      let id = Object.keys(map._layers),
+        layers = map._layers,
+        colors = ['#FF5733', '#8DFF33', '#3397FF', '#E433FF', '#F3FF33'],
+        j = 0;
+
+      this.addLayer(this._centerVector);
+
+      for (let i of id) {
+        if (layers[i].layerBounds || layers[i].extentBounds) {
+          let boundsArray;
+          if (layers[i].layerBounds) {
+            boundsArray = [
+              layers[i].layerBounds.min,
+              point(layers[i].layerBounds.max.x, layers[i].layerBounds.min.y),
+              layers[i].layerBounds.max,
+              point(layers[i].layerBounds.min.x, layers[i].layerBounds.max.y)
+            ];
+          } else {
+            boundsArray = [
+              layers[i].extentBounds.min,
+              point(layers[i].extentBounds.max.x, layers[i].extentBounds.min.y),
+              layers[i].extentBounds.max,
+              point(layers[i].extentBounds.min.x, layers[i].extentBounds.max.y)
+            ];
+          }
+
+          // boundsTestTag adds the value of from the <map-layer@data-testid> element
+          // if it exists. this simplifies debugging because the svg path will be
+          // tagged with the layer it came from
+          let boundsTestTag =
+            layers[i].extentBounds &&
+            layers[i].options.linkEl.getLayerEl().hasAttribute('data-testid')
+              ? layers[i].options.linkEl
+                  .getLayerEl()
+                  .getAttribute('data-testid')
+              : layers[i].layerBounds &&
+                layers[i].options?._leafletLayer?._layerEl?.hasAttribute(
+                  'data-testid'
+                )
+              ? layers[i].options._leafletLayer._layerEl.getAttribute(
+                  'data-testid'
+                )
+              : '';
+          let boundsRect = projectedExtent(boundsArray, {
+            className: this.options.className.concat(' ', boundsTestTag),
+            color: colors[j % colors.length],
+            weight: 2,
+            opacity: 1,
+            fillOpacity: 0.01,
+            fill: true
+          });
+          if (layers[i].options._leafletLayer)
+            boundsRect.bindTooltip(layers[i].options._leafletLayer._title, {
+              sticky: true
+            });
+          this.addLayer(boundsRect);
+          j++;
+        }
+      }
+
+      if (map.totalLayerBounds) {
+        let totalBoundsArray = [
+          map.totalLayerBounds.min,
+          point(map.totalLayerBounds.max.x, map.totalLayerBounds.min.y),
+          map.totalLayerBounds.max,
+          point(map.totalLayerBounds.min.x, map.totalLayerBounds.max.y)
+        ];
+
+        let totalBounds = projectedExtent(totalBoundsArray, {
+          className: 'mapml-debug-vectors mapml-total-bounds',
+          color: '#808080',
+          weight: 5,
+          opacity: 0.5,
+          fill: false
+        });
+        this.addLayer(totalBounds);
+      }
+    }, 0);
+  },
+
+  _mapLayerUpdate: function (e) {
+    this.clearLayers();
+    this._addBounds(e.target);
+  }
+});
+
+export var debugVectors = function (options) {
+  return new DebugVectors(options);
+};
+
+var ProjectedExtent = Path.extend({
+  getCenter: function (round) {
+    let crs = this._map.options.crs;
+    return crs.unproject(bounds(this._locations).getCenter());
+  },
+
+  options: {
+    className: 'mapml-debug-extent'
+  },
+  initialize: function (locations, options) {
+    //locations passed in as pcrs coordinates
+    this._locations = locations;
+    setOptions(this, options);
+  },
+
+  _project: function () {
+    this._rings = [];
+    let scale = this._map.options.crs.scale(this._map.getZoom()),
+      map = this._map;
+    for (let i = 0; i < this._locations.length; i++) {
+      let pt0 = map.options.crs.transformation.transform(
+        this._locations[i],
+        scale
+      );
+      //substract the pixel origin from the pixel coordinates to get the location relative to map viewport
+      this._rings.push(point(pt0.x, pt0.y)._subtract(map.getPixelOrigin()));
+    }
+    //leaflet SVG renderer looks for and array of arrays to build polygons,
+    //in this case it only deals with a rectangle so one closed array or points
+    this._parts = [this._rings];
+  },
+
+  _update: function () {
+    if (!this._map) return;
+    this._renderer._updatePoly(this, true); //passing true creates a closed path i.e. a rectangle
+  }
+});
+
+var projectedExtent = function (locations, options) {
+  return new ProjectedExtent(locations, options);
+};

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

@@ -0,0 +1,239 @@
+import { Layer, DomUtil, point, bounds } from 'leaflet';
+import { Util } from '../Util.js';
+
+export var FeatureIndexOverlay = Layer.extend({
+  onAdd: function (map) {
+    let svgInnerHTML = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 100 100"><path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M0 0h100v100H0z" color="#000" overflow="visible"/></svg>`;
+
+    this._container = DomUtil.create(
+      'div',
+      'mapml-feature-index-box',
+      map._container
+    );
+    this._container.innerHTML = svgInnerHTML;
+
+    this._output = DomUtil.create(
+      'output',
+      'mapml-feature-index',
+      map._container
+    );
+    this._output.setAttribute('role', 'status');
+    this._output.setAttribute('aria-live', 'polite');
+    this._output.setAttribute('aria-atomic', 'true');
+    this._body = DomUtil.create(
+      'span',
+      'mapml-feature-index-content',
+      this._output
+    );
+    this._body.index = 0;
+    this._output.initialFocus = false;
+    map.on('focus blur popupclose', this._addOrRemoveFeatureIndex, this);
+    map.on('moveend focus templatedfeatureslayeradd', this._checkOverlap, this);
+    map.on('keydown', this._onKeyDown, this);
+    this._addOrRemoveFeatureIndex();
+  },
+
+  _calculateReticleBounds: function () {
+    let bnds = this._map.getPixelBounds();
+    let center = bnds.getCenter();
+    let wRatio =
+      Math.abs(bnds.min.x - bnds.max.x) / this._map.options.mapEl.width;
+    let hRatio =
+      Math.abs(bnds.min.y - bnds.max.y) / this._map.options.mapEl.height;
+
+    let reticleDimension = getComputedStyle(this._container).width.replace(
+      /[^\d.]/g,
+      ''
+    );
+    if (getComputedStyle(this._container).width.slice(-1) === '%') {
+      reticleDimension =
+        (reticleDimension * this._map.options.mapEl.width) / 100;
+    }
+    let w = (wRatio * reticleDimension) / 2;
+    let h = (hRatio * reticleDimension) / 2;
+    let minPoint = point(center.x - w, center.y + h);
+    let maxPoint = point(center.x + w, center.y - h);
+    let b = bounds(minPoint, maxPoint);
+    return Util.pixelToPCRSBounds(
+      b,
+      this._map.getZoom(),
+      this._map.options.projection
+    );
+  },
+
+  _checkOverlap: function (e) {
+    if (e.type === 'focus') this._output.initialFocus = true;
+    if (!this._output.initialFocus) return;
+    if (this._output.popupClosed) {
+      this._output.popupClosed = false;
+      return;
+    }
+
+    this._map.fire('mapkeyboardfocused');
+
+    let featureIndexBounds = this._calculateReticleBounds();
+    let features = this._map.featureIndex.inBoundFeatures;
+    let index = 1;
+    let keys = Object.keys(features);
+    let body = this._body;
+    let noFeaturesMessage = document.createElement('span');
+    noFeaturesMessage.innerHTML =
+      this._map.options.mapEl.locale.fIndexNoFeatures;
+
+    body.innerHTML = '';
+    body.index = 0;
+
+    body.allFeatures = [];
+    keys.forEach((i) => {
+      let layer = features[i].layer;
+      let layers = features[i].layer._layers;
+      let b = bounds();
+
+      if (layers) {
+        let keys = Object.keys(layers);
+        keys.forEach((j) => {
+          if (!b)
+            b = bounds(
+              layer._layers[j]._bounds.min,
+              layer._layers[j]._bounds.max
+            );
+          b.extend(layer._layers[j]._bounds.min);
+          b.extend(layer._layers[j]._bounds.max);
+        });
+      } else if (layer._bounds) {
+        b = bounds(layer._bounds.min, layer._bounds.max);
+      }
+
+      if (featureIndexBounds.overlaps(b)) {
+        let label = features[i].path.getAttribute('aria-label');
+
+        if (index < 8) {
+          body.appendChild(this._updateOutput(label, index, index));
+        }
+        if (index % 7 === 0 || index === 1) {
+          body.allFeatures.push([]);
+        }
+        body.allFeatures[Math.floor((index - 1) / 7)].push({
+          label,
+          index,
+          layer
+        });
+        if (body.allFeatures[1] && body.allFeatures[1].length === 1) {
+          body.appendChild(this._updateOutput('More results', 0, 9));
+        }
+        index += 1;
+      }
+    });
+    this._addToggleKeys();
+    if (index === 1) {
+      body.appendChild(noFeaturesMessage);
+    }
+  },
+
+  _updateOutput: function (label, index, key) {
+    let span = document.createElement('span');
+    span.setAttribute('data-index', index);
+    //", " adds a brief auditory pause when a screen reader is reading through the feature index
+    //also prevents names with numbers + key from being combined when read
+    span.innerHTML = `<kbd>${key}</kbd>` + ' ' + label + '<span>, </span>';
+    return span;
+  },
+
+  _addToggleKeys: function () {
+    let allFeatures = this._body.allFeatures;
+    for (let i = 0; i < allFeatures.length; i++) {
+      if (allFeatures[i].length === 0) return;
+      if (allFeatures[i - 1]) {
+        let label = 'Previous results';
+        allFeatures[i].push({ label });
+      }
+
+      if (allFeatures[i + 1] && allFeatures[i + 1].length > 0) {
+        let label = 'More results';
+        allFeatures[i].push({ label });
+      }
+    }
+  },
+
+  _onKeyDown: function (e) {
+    let body = this._body;
+    let key = e.originalEvent.keyCode;
+    if (key >= 49 && key <= 55) {
+      if (!body.allFeatures[body.index]) return;
+      let feature = body.allFeatures[body.index][key - 49];
+      if (!feature) return;
+      let layer = feature.layer;
+      if (layer) {
+        this._map.featureIndex.currentIndex = feature.index - 1;
+        if (layer._popup) {
+          this._map.closePopup();
+          layer.openPopup();
+        } else layer.options.group.focus();
+      }
+    } else if (key === 56) {
+      this._newContent(body, -1);
+    } else if (key === 57) {
+      this._newContent(body, 1);
+    }
+  },
+
+  _newContent: function (body, direction) {
+    let index = body.firstChild.getAttribute('data-index');
+    let newContent = body.allFeatures[Math.floor((index - 1) / 7 + direction)];
+    if (newContent && newContent.length > 0) {
+      body.innerHTML = '';
+      body.index += direction;
+      for (let i = 0; i < newContent.length; i++) {
+        let feature = newContent[i];
+        let index = feature.index ? feature.index : 0;
+        let key = i + 1;
+        if (feature.label === 'More results') key = 9;
+        if (feature.label === 'Previous results') key = 8;
+        body.appendChild(this._updateOutput(feature.label, index, key));
+      }
+    }
+  },
+
+  _addOrRemoveFeatureIndex: function (e) {
+    //Toggle aria-hidden attribute so screen reader rereads the feature index on focus
+    if (!this._output.initialFocus) {
+      this._output.setAttribute('aria-hidden', 'true');
+    } else if (this._output.hasAttribute('aria-hidden')) {
+      let obj = this;
+      setTimeout(function () {
+        obj._output.removeAttribute('aria-hidden');
+      }, 100);
+    }
+
+    if (e && e.type === 'popupclose') {
+      this._output.setAttribute('aria-hidden', 'true');
+      this._output.popupClosed = true;
+    } else if (e && e.type === 'focus') {
+      this._container.removeAttribute('hidden');
+      this._output.classList.remove('mapml-screen-reader-output');
+      // this is a very subtle branch.  The event that gets handled below is a blur
+      // event, which happens to have the e.target._popup property
+      // when there will be a popup.  Because blur gets handled here, it doesn't
+      // get handled in the next else if block, which would hide both the reticle
+      // and the index menu, and then recursively call this method with no event
+      // argument, which manipulates the aria-hidden attribute on the output
+      // in order to have the screenreader read its contents when the focus returns
+      // to (what exactly???).
+    } else if (e && e.target._popup) {
+      this._container.setAttribute('hidden', '');
+    } else if (e && e.type === 'blur') {
+      this._container.setAttribute('hidden', '');
+      this._output.classList.add('mapml-screen-reader-output');
+      this._output.initialFocus = false;
+      this._addOrRemoveFeatureIndex();
+    } else {
+      // this is the default block, called when no event is passed (recursive call)
+      this._container.setAttribute('hidden', '');
+      this._output.classList.add('mapml-screen-reader-output');
+    }
+  }
+});
+
+export var featureIndexOverlay = function (options) {
+  return new FeatureIndexOverlay(options);
+};