@prushforth/map 1.0.0-preview.1

package/dist/collection/components/utils/mapml/handlers/FeatureIndex.js

@@ -0,0 +1,116 @@
+import { Handler } from 'leaflet';
+import { Util } from '../Util.js';
+export var FeatureIndex = Handler.extend({
+  initialize: function (map) {
+    Handler.prototype.initialize.call(this, map);
+    this.inBoundFeatures = [];
+    this.outBoundFeatures = [];
+    this.currentIndex = 0;
+    this._mapPCRSBounds = Util.pixelToPCRSBounds(
+      map.getPixelBounds(),
+      map.getZoom(),
+      map.options.projection
+    );
+  },
+
+  addHooks: function () {
+    this._map.on('mapkeyboardfocused', this._updateMapBounds, this);
+    this._map.on('mapkeyboardfocused', this._sortIndex, this);
+  },
+
+  removeHooks: function () {
+    this._map.off('mapkeyboardfocused', this._updateMapBounds);
+    this._map.off('mapkeyboardfocused', this._sortIndex);
+  },
+
+  /**
+   * Adds a svg element to the index of tabbable features, it also keeps track of the layer it's associated + center
+   * @param layer - the layer object the feature is associated with
+   * @param lc - the layer center
+   * @param path - the svg element that needs to be focused, can be a path or g
+   */
+  addToIndex: function (layer, lc, path) {
+    let mc = this._mapPCRSBounds.getCenter();
+    let dist = Math.sqrt(Math.pow(lc.x - mc.x, 2) + Math.pow(lc.y - mc.y, 2));
+    let index = this._mapPCRSBounds.contains(lc)
+      ? this.inBoundFeatures
+      : this.outBoundFeatures;
+
+    let elem = { path: path, layer: layer, center: lc, dist: dist };
+    path.setAttribute('tabindex', -1);
+
+    index.push(elem);
+
+    // TODO: this insertion loop has potential to be improved slightly
+    for (
+      let i = index.length - 1;
+      i > 0 && index[i].dist < index[i - 1].dist;
+      i--
+    ) {
+      let tmp = index[i];
+      index[i] = index[i - 1];
+      index[i - 1] = tmp;
+    }
+
+    if (this._mapPCRSBounds.contains(lc)) this.inBoundFeatures = index;
+    else this.outBoundFeatures = index;
+  },
+
+  /**
+   * Removes features that are no longer on the map, also moves features to the respective array depending
+   * on whether the feature is in the maps viewport or not
+   */
+  cleanIndex: function () {
+    this.currentIndex = 0;
+    this.inBoundFeatures = this.inBoundFeatures.filter((elem) => {
+      let inbound = this._mapPCRSBounds.contains(elem.center);
+      elem.path.setAttribute('tabindex', -1);
+      if (elem.layer._map && !inbound) {
+        this.outBoundFeatures.push(elem);
+      }
+      return elem.layer._map && inbound;
+    });
+    this.outBoundFeatures = this.outBoundFeatures.filter((elem) => {
+      let inbound = this._mapPCRSBounds.contains(elem.center);
+      elem.path.setAttribute('tabindex', -1);
+      if (elem.layer._map && inbound) {
+        this.inBoundFeatures.push(elem);
+      }
+      return elem.layer._map && !inbound;
+    });
+  },
+
+  /**
+   * Sorts the index of features in the map's viewport based on distance from center
+   * @private
+   */
+  _sortIndex: function () {
+    this.cleanIndex();
+    if (this.inBoundFeatures.length === 0) return;
+
+    let mc = this._mapPCRSBounds.getCenter();
+
+    this.inBoundFeatures.sort(function (a, b) {
+      let ac = a.center;
+      let bc = b.center;
+      a.dist = Math.sqrt(Math.pow(ac.x - mc.x, 2) + Math.pow(ac.y - mc.y, 2));
+      b.dist = Math.sqrt(Math.pow(bc.x - mc.x, 2) + Math.pow(bc.y - mc.y, 2));
+      return a.dist - b.dist;
+    });
+    this.inBoundFeatures[0].path.setAttribute('tabindex', 0);
+  },
+
+  /**
+   * Event handler for 'mapfocused' event to update the map's bounds in terms of PCRS
+   * @param e - the event object
+   * @private
+   */
+  _updateMapBounds: function (e) {
+    // TODO: map's PCRS bounds is used in other parts of the viewer, can be moved out to the map object directly
+    this._mapPCRSBounds = Util.pixelToPCRSBounds(
+      this._map.getPixelBounds(),
+      this._map.getZoom(),
+      this._map.options.projection
+    );
+  }
+});

package/dist/collection/components/utils/mapml/handlers/QueryHandler.js

@@ -0,0 +1,476 @@
+import {
+  Handler,
+  DomEvent,
+  DomUtil,
+  setOptions,
+  Bounds,
+  Util as LeafletUtil
+} from 'leaflet';
+import { MapFeatureLayer } from '../layers/MapFeatureLayer.js';
+import { featureRenderer } from '../features/featureRenderer.js';
+
+// Determine if a GeoJSON object has projected (non-CRS:84) coordinates.
+// Returns true if a "crs" member is present and non-null, or if coordinate
+// values exceed CRS:84 bounds (lon [-180,180], lat [-90,90]), indicating
+// meter-based projected units (e.g. from WMS GetFeatureInfo responses).
+function _hasProjectedCoordinates(json) {
+  if (json.crs != null) return true;
+  let c = _firstCoordinate(json);
+  return c !== null && (Math.abs(c[0]) > 180 || Math.abs(c[1]) > 90);
+}
+
+// Extract the first [x, y] coordinate pair from a GeoJSON object,
+// drilling into FeatureCollection → Feature → Geometry → coordinates.
+function _firstCoordinate(json) {
+  if (!json) return null;
+  let type = json.type && json.type.toUpperCase();
+  if (type === 'FEATURECOLLECTION') {
+    if (json.features && json.features.length > 0)
+      return _firstCoordinate(json.features[0]);
+  } else if (type === 'FEATURE') {
+    return _firstCoordinate(json.geometry);
+  } else if (json.coordinates) {
+    // Unwrap nested arrays until we reach a [number, number] pair
+    let coords = json.coordinates;
+    while (Array.isArray(coords) && Array.isArray(coords[0])) {
+      coords = coords[0];
+    }
+    if (coords.length >= 2 && typeof coords[0] === 'number') return coords;
+  } else if (type === 'GEOMETRYCOLLECTION' && json.geometries) {
+    if (json.geometries.length > 0) return _firstCoordinate(json.geometries[0]);
+  }
+  return null;
+}
+
+export var QueryHandler = Handler.extend({
+  addHooks: function () {
+    // get a reference to the actual <map> element, so we can
+    // use its layers property to iterate the layers from top down
+    // evaluating if they are 'on the map' (enabled)
+    setOptions(this, { mapEl: this._map.options.mapEl });
+    DomEvent.on(this._map, 'click', this._queryTopLayer, this);
+    DomEvent.on(this._map, 'keypress', this._queryTopLayerAtMapCenter, this);
+  },
+  removeHooks: function () {
+    DomEvent.off(this._map, 'click', this._queryTopLayer, this);
+    DomEvent.on(this._map, 'keypress', this._queryTopLayerAtMapCenter, this);
+  },
+  _getTopQueryableLayer: function () {
+    var layers = this.options.mapEl.layers;
+    // work backwards in document order (top down)
+    for (var l = layers.length - 1; l >= 0; l--) {
+      if (layers[l].queryable && layers[l].queryable()) {
+        return layers[l]._layer;
+      }
+    }
+  },
+  _queryTopLayerAtMapCenter: function (event) {
+    setTimeout(() => {
+      if (
+        this._map.isFocused &&
+        !this._map._popupClosed &&
+        (event.originalEvent.key === ' ' || +event.originalEvent.keyCode === 13)
+      ) {
+        this._map.fire('click', {
+          latlng: this._map.getCenter(),
+          layerPoint: this._map.latLngToLayerPoint(this._map.getCenter()),
+          containerPoint: this._map.latLngToContainerPoint(
+            this._map.getCenter()
+          )
+        });
+      } else {
+        delete this._map._popupClosed;
+      }
+    }, 0);
+  },
+  _queryTopLayer: function (event) {
+    var layer = this._getTopQueryableLayer();
+    if (layer) {
+      if (layer._mapmlFeatures) delete layer._mapmlFeatures;
+      this._query(event, layer);
+    }
+  },
+  _query(e, layer) {
+    var zoom = e.target.getZoom(),
+      map = this._map,
+      crs = M[layer.options.projection], // the crs for each extent would be the same
+      tileSize = map.options.crs.options.crs.tile.bounds.max.x,
+      container = layer._container,
+      popupOptions = {
+        autoClose: false,
+        autoPan: true,
+        maxHeight: map.getSize().y * 0.5 - 50,
+        maxWidth: map.getSize().x * 0.7
+      },
+      tcrs2pcrs = function (c) {
+        return crs.transformation.untransform(c, crs.scale(zoom));
+      },
+      tcrs2gcrs = function (c) {
+        return crs.unproject(
+          crs.transformation.untransform(c, crs.scale(zoom)),
+          zoom
+        );
+      };
+    var tcrsClickLoc = crs.latLngToPoint(e.latlng, zoom),
+      tileMatrixClickLoc = tcrsClickLoc.divideBy(tileSize).floor(),
+      tileBounds = new Bounds(
+        tcrsClickLoc.divideBy(tileSize).floor().multiplyBy(tileSize),
+        tcrsClickLoc.divideBy(tileSize).ceil().multiplyBy(tileSize)
+      );
+
+    let point = this._map.project(e.latlng),
+      scale = this._map.options.crs.scale(this._map.getZoom()),
+      pcrsClick = this._map.options.crs.transformation.untransform(
+        point,
+        scale
+      );
+    let templates = layer.getQueryTemplates(pcrsClick, zoom);
+
+    let fetches = [];
+
+    var fetchFeatures = function (template, obj) {
+      const parser = new DOMParser();
+      return fetch(LeafletUtil.template(template.template, obj), {
+        redirect: 'follow'
+      })
+        .then((response) => {
+          if (response.status >= 200 && response.status < 300) {
+            return response.text().then((text) => {
+              return {
+                contenttype: response.headers.get('Content-Type'),
+                text: text
+              };
+            });
+          } else {
+            throw new Error(response.status);
+          }
+        })
+        .then((response) => {
+          let features = [];
+          let queryMetas = [];
+          let geom =
+            "<map-geometry cs='gcrs'><map-point><map-coordinates>" +
+            e.latlng.lng +
+            ' ' +
+            e.latlng.lat +
+            '</map-coordinates></map-point></map-geometry>';
+          if (response.contenttype.startsWith('text/mapml')) {
+            // the mapmldoc could have <map-meta> elements that are important, perhaps
+            // also, the mapmldoc can have many features
+            let mapmldoc = parser.parseFromString(
+              response.text,
+              'application/xml'
+            );
+            let geometrylessFeatures = mapmldoc.querySelectorAll(
+              'map-feature:not(:has(map-geometry))'
+            );
+            if (geometrylessFeatures.length) {
+              let g = parser.parseFromString(geom, 'application/xml');
+              for (let i = 0; i < geometrylessFeatures.length; i++) {
+                let f = geometrylessFeatures[i];
+                f.appendChild(g.firstElementChild.cloneNode(true));
+              }
+            }
+            features = Array.prototype.slice.call(
+              mapmldoc.querySelectorAll('map-feature')
+            );
+            // <map-meta> elements for this query
+            queryMetas = Array.prototype.slice.call(
+              mapmldoc.querySelectorAll(
+                'map-meta[name=cs], map-meta[name=zoom], map-meta[name=projection]'
+              )
+            );
+            if (queryMetas.length)
+              features.forEach((f) => (f.meta = queryMetas));
+          } else if (
+            response.contenttype.startsWith('application/json') ||
+            response.contenttype.startsWith('application/geo+json') ||
+            response.contenttype.startsWith('application/geojson')
+          ) {
+            try {
+              let json = JSON.parse(response.text);
+              // Replace null geometries with a point at the click location
+              // so geojson2mapml can process the features without error
+              let clickPoint = {
+                type: 'Point',
+                coordinates: [e.latlng.lng, e.latlng.lat]
+              };
+              if (json.type === 'FeatureCollection' && json.features) {
+                for (let f of json.features) {
+                  if (f.geometry === null || f.geometry === undefined) {
+                    f.geometry = clickPoint;
+                  }
+                }
+              } else if (json.type === 'Feature') {
+                if (json.geometry === null || json.geometry === undefined) {
+                  json.geometry = clickPoint;
+                }
+              }
+              let mapmlLayer = M.geojson2mapml(json, {
+                projection: layer.options.projection
+              });
+              // if crs member is present and non-null, or coordinate
+              // values exceed CRS:84 range, the response coordinates
+              // are in the layer's projected CRS, not CRS:84
+              if (_hasProjectedCoordinates(json)) {
+                let csMeta = mapmlLayer.querySelector('map-meta[name=cs]');
+                if (csMeta) csMeta.setAttribute('content', 'pcrs');
+              }
+              features = Array.prototype.slice.call(
+                mapmlLayer.querySelectorAll('map-feature')
+              );
+              queryMetas = Array.prototype.slice.call(
+                mapmlLayer.querySelectorAll(
+                  'map-meta[name=cs], map-meta[name=zoom], map-meta[name=projection]'
+                )
+              );
+              let geometrylessFeatures = features.filter(
+                (f) => !f.querySelector('map-geometry')
+              );
+              if (geometrylessFeatures.length) {
+                let g = parser.parseFromString(geom, 'text/html');
+                for (let f of geometrylessFeatures) {
+                  f.appendChild(
+                    g.querySelector('map-geometry').cloneNode(true)
+                  );
+                }
+              }
+              if (queryMetas.length)
+                features.forEach((f) => (f.meta = queryMetas));
+            } catch (err) {
+              // not valid GeoJSON, fall through to HTML rendering
+              let html = parser.parseFromString(response.text, 'text/html');
+              let featureDoc = parser.parseFromString(
+                '<map-feature><map-properties>' +
+                  '</map-properties>' +
+                  geom +
+                  '</map-feature>',
+                'text/html'
+              );
+              if (html.body) {
+                featureDoc
+                  .querySelector('map-properties')
+                  .appendChild(html.querySelector('html'));
+              } else {
+                featureDoc
+                  .querySelector('map-properties')
+                  .append(response.text);
+              }
+              features.push(featureDoc.querySelector('map-feature'));
+            }
+          } else {
+            try {
+              let featureDocument = parser.parseFromString(
+                response.text,
+                'application/xml'
+              );
+              let featureCollection =
+                featureDocument.querySelectorAll('map-feature');
+              if (
+                featureDocument.querySelector('parsererror') ||
+                featureCollection.length === 0
+              ) {
+                throw new Error('parsererror');
+              }
+              let g = parser.parseFromString(geom, 'application/xml');
+              queryMetas = Array.prototype.slice.call(
+                featureDocument.querySelectorAll(
+                  'map-meta[name=cs], map-meta[name=zoom], map-meta[name=projection]'
+                )
+              );
+              for (let feature of featureCollection) {
+                if (!feature.querySelector('map-geometry')) {
+                  feature.appendChild(g.firstElementChild.cloneNode(true));
+                }
+                feature.meta = queryMetas;
+                features.push(feature);
+              }
+            } catch (err) {
+              // try the html parser; script elements are marked as non-functional
+              // by that api, which hopefully works!
+              let html = parser.parseFromString(response.text, 'text/html');
+
+              // synthesize a single feature from text or html content
+              let featureDoc = parser.parseFromString(
+                '<map-feature><map-properties>' +
+                  '</map-properties>' +
+                  geom +
+                  '</map-feature>',
+                'text/html'
+              );
+              if (html.body) {
+                featureDoc
+                  .querySelector('map-properties')
+                  .appendChild(html.querySelector('html'));
+              } else {
+                featureDoc
+                  .querySelector('map-properties')
+                  .append(response.text);
+              }
+              features.push(featureDoc.querySelector('map-feature'));
+            }
+          }
+          return { features: features, template: template };
+        })
+        .catch((err) => {
+          console.log('Looks like there was a problem. Status: ' + err.message);
+        });
+    };
+
+    for (let i = 0; i < templates.length; i++) {
+      var obj = {},
+        template = templates[i];
+
+      // all of the following are locations that might be used in a query, I think.
+      obj[template.query.tilei] =
+        tcrsClickLoc.x.toFixed() - tileMatrixClickLoc.x * tileSize;
+      obj[template.query.tilej] =
+        tcrsClickLoc.y.toFixed() - tileMatrixClickLoc.y * tileSize;
+
+      // this forces the click to the centre of the map extent in the layer crs
+      obj[template.query.mapi] = map.getSize().divideBy(2).x.toFixed();
+      obj[template.query.mapj] = map.getSize().divideBy(2).y.toFixed();
+
+      obj[template.query.pixelleft] = crs.pointToLatLng(tcrsClickLoc, zoom).lng;
+      obj[template.query.pixeltop] = crs.pointToLatLng(tcrsClickLoc, zoom).lat;
+      obj[template.query.pixelright] = crs.pointToLatLng(
+        tcrsClickLoc.add([1, 1]),
+        zoom
+      ).lng;
+      obj[template.query.pixelbottom] = crs.pointToLatLng(
+        tcrsClickLoc.add([1, 1]),
+        zoom
+      ).lat;
+
+      obj[template.query.column] = tileMatrixClickLoc.x;
+      obj[template.query.row] = tileMatrixClickLoc.y;
+      obj[template.query.x] = tcrsClickLoc.x.toFixed();
+      obj[template.query.y] = tcrsClickLoc.y.toFixed();
+
+      // whereas the layerPoint is calculated relative to the origin plus / minus any
+      // pan movements so is equal to containerPoint at first before any pans, but
+      // changes as the map pans.
+      obj[template.query.easting] = tcrs2pcrs(tcrsClickLoc).x;
+      obj[template.query.northing] = tcrs2pcrs(tcrsClickLoc).y;
+      obj[template.query.longitude] = tcrs2gcrs(tcrsClickLoc).lng;
+      obj[template.query.latitude] = tcrs2gcrs(tcrsClickLoc).lat;
+      obj[template.query.zoom] = zoom;
+      obj[template.query.width] = map.getSize().x;
+      obj[template.query.height] = map.getSize().y;
+      // assumes the click is at the centre of the map, per template.query.mapi, mapj above
+      obj[template.query.mapbottom] = tcrs2pcrs(
+        tcrsClickLoc.add(map.getSize().divideBy(2))
+      ).y;
+      obj[template.query.mapleft] = tcrs2pcrs(
+        tcrsClickLoc.subtract(map.getSize().divideBy(2))
+      ).x;
+      obj[template.query.maptop] = tcrs2pcrs(
+        tcrsClickLoc.subtract(map.getSize().divideBy(2))
+      ).y;
+      obj[template.query.mapright] = tcrs2pcrs(
+        tcrsClickLoc.add(map.getSize().divideBy(2))
+      ).x;
+
+      obj[template.query.tilebottom] = tcrs2pcrs(tileBounds.max).y;
+      obj[template.query.tileleft] = tcrs2pcrs(tileBounds.min).x;
+      obj[template.query.tiletop] = tcrs2pcrs(tileBounds.min).y;
+      obj[template.query.tileright] = tcrs2pcrs(tileBounds.max).x;
+      // add hidden or other variables that may be present into the values to
+      // be processed by Util.template below.
+      for (var v in template.query) {
+        if (
+          [
+            'mapi',
+            'mapj',
+            'tilei',
+            'tilej',
+            'row',
+            'col',
+            'x',
+            'y',
+            'easting',
+            'northing',
+            'longitude',
+            'latitude',
+            'width',
+            'height',
+            'zoom',
+            'mapleft',
+            'mapright',
+            ',maptop',
+            'mapbottom',
+            'tileleft',
+            'tileright',
+            'tiletop',
+            'tilebottom',
+            'pixeltop',
+            'pixelbottom',
+            'pixelleft',
+            'pixelright'
+          ].indexOf(v) < 0
+        ) {
+          obj[v] = template.query[v];
+        }
+      }
+      fetches.push(fetchFeatures(template, obj));
+    }
+    Promise.allSettled(fetches).then((results) => {
+      layer._mapmlFeatures = [];
+      // f is an array of {features[], template}
+
+      for (let f of results) {
+        if (f.status === 'fulfilled') {
+          // create connection between queried <map-feature> and its parent <map-link>
+          for (let feature of f.value.features) {
+            feature._linkEl = f.value.template.linkEl;
+          }
+          layer._mapmlFeatures = layer._mapmlFeatures.concat(f.value.features);
+        }
+      }
+      if (layer._mapmlFeatures.length > 0)
+        displayFeaturesPopup(layer._mapmlFeatures, e.latlng);
+    });
+
+    function displayFeaturesPopup(features, loc) {
+      if (features.length === 0) return;
+      let f = new MapFeatureLayer(features, {
+        // pass the vector layer a renderer of its own, otherwise leaflet
+        // puts everything into the overlayPane
+        renderer: featureRenderer(),
+        // pass the vector layer the container for the parent into which
+        // it will append its own container for rendering into
+        pane: container,
+        //color: 'yellow',
+        // instead of unprojecting and then projecting and scaling,
+        // a much smarter approach would be to scale at the current
+        // zoom
+        projection: map.options.projection,
+        _leafletLayer: layer,
+        query: true,
+        mapEl: map.options.mapEl
+      });
+
+      f.addTo(layer);
+
+      let div = DomUtil.create('div', 'mapml-popup-content'),
+        c = DomUtil.create('iframe');
+      c.style = 'border: none';
+      c.srcdoc = features[0].querySelector(
+        'map-feature map-properties'
+      ).innerHTML;
+      c.setAttribute('sandbox', 'allow-same-origin allow-forms');
+      div.appendChild(c);
+      // passing a latlng to the popup is necessary for when there is no
+      // geometry / null geometry
+      layer._totalFeatureCount = features.length;
+      layer.bindPopup(div, popupOptions).openPopup(loc);
+      layer.on('popupclose', function () {
+        layer.removeLayer(f);
+      });
+      f.showPaginationFeature({
+        i: 0,
+        popup: layer._popup
+      });
+    }
+  }
+});

package/dist/collection/components/utils/mapml/handlers/keyboard.js

@@ -0,0 +1,60 @@
+import { Map, DomEvent, point } from 'leaflet';
+Map.Keyboard.include({
+  _onKeyDown: function (e) {
+    if (e.altKey || e.metaKey) {
+      return;
+    }
+
+    let zoomIn = {
+      187: 187,
+      107: 107,
+      61: 61,
+      171: 171
+    };
+
+    let zoomOut = {
+      189: 189,
+      109: 109,
+      54: 54,
+      173: 173
+    };
+
+    var key = e.keyCode,
+      map = this._map,
+      offset;
+
+    if (key in this._panKeys) {
+      if (!map._panAnim || !map._panAnim._inProgress) {
+        offset = this._panKeys[key];
+        if (e.shiftKey) {
+          offset = point(offset).multiplyBy(3);
+        }
+        if (e.ctrlKey) {
+          offset = point(offset).divideBy(5);
+        }
+
+        map.panBy(offset);
+
+        if (map.options.maxBounds) {
+          map.panInsideBounds(map.options.maxBounds);
+        }
+      }
+    } else if (key in this._zoomKeys) {
+      if (
+        (key in zoomIn && map.getMaxZoom() !== map.getZoom()) ||
+        (key in zoomOut && map._layersMinZoom !== map.getZoom())
+      )
+        map.setZoom(map.getZoom() + (e.shiftKey ? 3 : 1) * this._zoomKeys[key]);
+    } else if (
+      key === 27 &&
+      map._popup &&
+      map._popup.options.closeOnEscapeKey
+    ) {
+      map.closePopup();
+    } else {
+      return;
+    }
+
+    DomEvent.stop(e);
+  }
+});