@prushforth/map 1.0.0-preview.1

package/dist/collection/components/utils/mapml/elementSupport/layers/createLayerControlForLayer.js

@@ -0,0 +1,326 @@
+import { DomUtil, SVG, DomEvent, stamp } from 'leaflet';
+export var createLayerControlHTML = async function () {
+  var fieldset = DomUtil.create('fieldset', 'mapml-layer-item'),
+    input = DomUtil.create('input'),
+    layerItemName = DomUtil.create('span', 'mapml-layer-item-name'),
+    settingsButtonNameIcon = DomUtil.create('span'),
+    layerItemProperty = DomUtil.create(
+      'div',
+      'mapml-layer-item-properties',
+      fieldset
+    ),
+    layerItemSettings = DomUtil.create(
+      'div',
+      'mapml-layer-item-settings',
+      fieldset
+    ),
+    itemToggleLabel = DomUtil.create(
+      'label',
+      'mapml-layer-item-toggle',
+      layerItemProperty
+    ),
+    layerItemControls = DomUtil.create(
+      'div',
+      'mapml-layer-item-controls',
+      layerItemProperty
+    ),
+    opacityControl = DomUtil.create(
+      'details',
+      'mapml-layer-item-opacity mapml-control-layers',
+      layerItemSettings
+    ),
+    opacity = DomUtil.create('input'),
+    opacityControlSummary = DomUtil.create('summary'),
+    svgSettingsControlIcon = SVG.create('svg'),
+    settingsControlPath1 = SVG.create('path'),
+    settingsControlPath2 = SVG.create('path'),
+    extentsFieldset = DomUtil.create('fieldset', 'mapml-layer-grouped-extents'),
+    mapEl = this.parentNode;
+    opacity.setAttribute('data-testid', 'layer-item-opacity');
+
+  // append the paths in svg for the remove layer and toggle icons
+  svgSettingsControlIcon.setAttribute('viewBox', '0 0 24 24');
+  svgSettingsControlIcon.setAttribute('height', '22');
+  svgSettingsControlIcon.setAttribute('width', '22');
+  svgSettingsControlIcon.setAttribute('fill', 'currentColor');
+  settingsControlPath1.setAttribute('d', 'M0 0h24v24H0z');
+  settingsControlPath1.setAttribute('fill', 'none');
+  settingsControlPath2.setAttribute(
+    'd',
+    'M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'
+  );
+  svgSettingsControlIcon.appendChild(settingsControlPath1);
+  svgSettingsControlIcon.appendChild(settingsControlPath2);
+
+  layerItemSettings.hidden = true;
+  settingsButtonNameIcon.setAttribute('aria-hidden', true);
+
+  let removeControlButton = DomUtil.create(
+    'button',
+    'mapml-layer-item-remove-control',
+    layerItemControls
+  );
+  removeControlButton.type = 'button';
+  removeControlButton.title = mapEl.locale.lmRemoveLayer;
+  removeControlButton.innerHTML = "<span aria-hidden='true'>&#10005;</span>";
+  removeControlButton.classList.add('mapml-button');
+  DomEvent.on(removeControlButton, 'click', DomEvent.stop);
+  DomEvent.on(
+    removeControlButton,
+    'click',
+    (e) => {
+      let fieldset = 0,
+        elem,
+        root;
+      root =
+        mapEl.tagName === 'GCDS-EXT-MAP'
+          ? mapEl.shadowRoot
+          : mapEl.querySelector('.mapml-web-map').shadowRoot;
+      if (
+        e.target.closest('fieldset').nextElementSibling &&
+        !e.target.closest('fieldset').nextElementSibling.disbaled
+      ) {
+        elem = e.target.closest('fieldset').previousElementSibling;
+        while (elem) {
+          fieldset += 2; // find the next layer menu item
+          elem = elem.previousElementSibling;
+        }
+      } else {
+        // focus on the link
+        elem = 'link';
+      }
+      mapEl.removeChild(
+        e.target.closest('fieldset').querySelector('span').layer._layerEl
+      );
+      elem = elem
+        ? root.querySelector('.leaflet-control-attribution').firstElementChild
+        : (elem = root.querySelectorAll('input')[fieldset]);
+      elem.focus();
+    },
+    this._layer
+  );
+
+  let itemSettingControlButton = DomUtil.create(
+    'button',
+    'mapml-layer-item-settings-control',
+    layerItemControls
+  );
+  itemSettingControlButton.type = 'button';
+  itemSettingControlButton.title = mapEl.locale.lmLayerSettings;
+  itemSettingControlButton.setAttribute('aria-expanded', false);
+  itemSettingControlButton.classList.add('mapml-button');
+  DomEvent.on(
+    itemSettingControlButton,
+    'click',
+    (e) => {
+      let layerControl = this._layer._layerEl._layerControl._container;
+      if (!layerControl._isExpanded && e.pointerType === 'touch') {
+        layerControl._isExpanded = true;
+        return;
+      }
+      if (layerItemSettings.hidden === true) {
+        itemSettingControlButton.setAttribute('aria-expanded', true);
+        layerItemSettings.hidden = false;
+      } else {
+        itemSettingControlButton.setAttribute('aria-expanded', false);
+        layerItemSettings.hidden = true;
+      }
+    },
+    this._layer
+  );
+
+  input.defaultChecked = this.checked;
+  input.type = 'checkbox';
+  input.setAttribute('class', 'leaflet-control-layers-selector');
+  input.setAttribute('data-testid', 'layer-item-checkbox');
+  layerItemName.layer = this._layer;
+  const changeCheck = function () {
+    this.checked = !this.checked;
+    this.dispatchEvent(new CustomEvent('map-change'));
+    this._layerControlCheckbox.focus();
+  };
+  input.addEventListener('change', changeCheck.bind(this));
+  if (this._layer._legendUrl) {
+    var legendLink = document.createElement('a');
+    legendLink.text = ' ' + this._layer._title;
+    legendLink.href = this._layer._legendUrl;
+    legendLink.target = '_blank';
+    legendLink.draggable = false;
+    layerItemName.appendChild(legendLink);
+  } else {
+    layerItemName.innerHTML = this._layer._title;
+  }
+  layerItemName.id = 'mapml-layer-item-name-{' + stamp(layerItemName) + '}';
+  opacityControlSummary.innerText = mapEl.locale.lcOpacity;
+  opacityControlSummary.id =
+    'mapml-layer-item-opacity-' + stamp(opacityControlSummary);
+  opacityControl.appendChild(opacityControlSummary);
+  opacityControl.appendChild(opacity);
+  opacity.setAttribute('type', 'range');
+  opacity.setAttribute('min', '0');
+  opacity.setAttribute('max', '1.0');
+  opacity.setAttribute('value', this._opacity || '1.0');
+  opacity.setAttribute('step', '0.1');
+  opacity.setAttribute(
+    'aria-labelledby',
+    'mapml-layer-item-opacity-' + stamp(opacityControlSummary)
+  );
+
+  const changeOpacity = function (e) {
+    if (e && e.target && e.target.value >= 0 && e.target.value <= 1.0) {
+      this._layer.changeOpacity(e.target.value);
+    }
+  };
+  opacity.value = this._opacity || '1.0';
+  opacity.addEventListener('change', changeOpacity.bind(this));
+
+  fieldset.setAttribute('aria-grabbed', 'false');
+  fieldset.setAttribute('aria-labelledby', layerItemName.id);
+
+  fieldset.ontouchstart = fieldset.onmousedown = (downEvent) => {
+    if (
+      (downEvent.target.parentElement.tagName.toLowerCase() === 'label' &&
+        downEvent.target.tagName.toLowerCase() !== 'input') ||
+      downEvent.target.tagName.toLowerCase() === 'label'
+    ) {
+      downEvent =
+        downEvent instanceof TouchEvent ? downEvent.touches[0] : downEvent;
+      let control = fieldset,
+        controls = fieldset.parentNode,
+        moving = false,
+        yPos = downEvent.clientY,
+        originalPosition = Array.from(
+          controls.querySelectorAll('fieldset')
+        ).indexOf(fieldset);
+
+      document.body.ontouchmove = document.body.onmousemove = (moveEvent) => {
+        moveEvent.preventDefault();
+        moveEvent =
+          moveEvent instanceof TouchEvent ? moveEvent.touches[0] : moveEvent;
+
+        // Fixes flickering by only moving element when there is enough space
+        let offset = moveEvent.clientY - yPos;
+        moving = Math.abs(offset) > 15 || moving;
+        if (
+          (controls && !moving) ||
+          (controls && controls.childElementCount <= 1) ||
+          controls.getBoundingClientRect().top >
+            control.getBoundingClientRect().bottom ||
+          controls.getBoundingClientRect().bottom <
+            control.getBoundingClientRect().top
+        ) {
+          return;
+        }
+
+        controls.classList.add('mapml-draggable');
+        control.style.transform = 'translateY(' + offset + 'px)';
+        control.style.pointerEvents = 'none';
+
+        let x = moveEvent.clientX,
+          y = moveEvent.clientY,
+          root =
+            mapEl.tagName === 'GCDS-EXT-MAP'
+              ? mapEl.shadowRoot
+              : mapEl.querySelector('.mapml-web-map').shadowRoot,
+          elementAt = root.elementFromPoint(x, y),
+          swapControl =
+            !elementAt || !elementAt.closest('fieldset')
+              ? control
+              : elementAt.closest('fieldset');
+
+        swapControl =
+          Math.abs(offset) <= swapControl.offsetHeight ? control : swapControl;
+
+        control.setAttribute('aria-grabbed', 'true');
+        control.setAttribute('aria-dropeffect', 'move');
+        if (swapControl && controls === swapControl.parentNode) {
+          swapControl =
+            swapControl !== control.nextSibling
+              ? swapControl
+              : swapControl.nextSibling;
+          if (control !== swapControl) {
+            yPos = moveEvent.clientY;
+            control.style.transform = null;
+          }
+          controls.insertBefore(control, swapControl);
+        }
+      };
+
+      document.body.ontouchend = document.body.onmouseup = () => {
+        let newPosition = Array.from(
+          controls.querySelectorAll('fieldset')
+        ).indexOf(fieldset);
+        control.setAttribute('aria-grabbed', 'false');
+        control.removeAttribute('aria-dropeffect');
+        control.style.pointerEvents = null;
+        control.style.transform = null;
+        if (originalPosition !== newPosition) {
+          let controlsElems = controls.children,
+            zIndex = 1;
+          // re-order layer elements DOM order
+          for (let c of controlsElems) {
+            let layerEl = c.querySelector('span').layer._layerEl;
+            layerEl.setAttribute('data-moving', '');
+            mapEl.insertAdjacentElement('beforeend', layerEl);
+            layerEl.removeAttribute('data-moving');
+          }
+          // update zIndex of all map-layer elements
+          let layers = mapEl.querySelectorAll('map-layer,layer-');
+          for (let i = 0; i < layers.length; i++) {
+            let layer = layers[i]._layer;
+            if (layer.options.zIndex !== zIndex) {
+              layer.setZIndex(zIndex);
+            }
+            zIndex++;
+          }
+        }
+        controls.classList.remove('mapml-draggable');
+        document.body.ontouchmove =
+          document.body.onmousemove =
+          document.body.onmouseup =
+            null;
+      };
+    }
+  };
+
+  itemToggleLabel.appendChild(input);
+  itemToggleLabel.appendChild(layerItemName);
+  itemSettingControlButton.appendChild(settingsButtonNameIcon);
+  settingsButtonNameIcon.appendChild(svgSettingsControlIcon);
+
+  let mapml = this.src ? this.shadowRoot : this;
+  var styleLinks = mapml.querySelectorAll(
+    'map-link[rel=style],map-link[rel="self style"],map-link[rel="style self"]'
+  );
+  let styles;
+  if (styleLinks) {
+    styles = this.getAlternateStyles(styleLinks);
+    if (styles) {
+      layerItemSettings.appendChild(styles);
+    }
+  }
+
+  this._layerControlCheckbox = input;
+  this._layerControlLabel = itemToggleLabel;
+  this._opacityControl = opacityControl;
+  this._opacitySlider = opacity;
+  this._layerControlHTML = fieldset;
+  this._layerItemSettingsHTML = layerItemSettings;
+  this._propertiesGroupAnatomy = extentsFieldset;
+  this._styles = styles;
+  extentsFieldset.setAttribute('aria-label', 'Sublayers');
+  extentsFieldset.setAttribute('hidden', '');
+  let mapExtents = mapml.querySelectorAll('map-extent:not([hidden])');
+  let mapExtentLayerControls = [];
+  for (let i = 0; i < mapExtents.length; i++) {
+    mapExtentLayerControls.push(mapExtents[i].whenReady());
+    // if any map-extent is not hidden, the parent fieldset should not be hidden
+    extentsFieldset.removeAttribute('hidden');
+  }
+  await Promise.all(mapExtentLayerControls);
+  for (let i = 0; i < mapExtents.length; i++) {
+    extentsFieldset.appendChild(mapExtents[i].getLayerControlHTML());
+  }
+  layerItemSettings.appendChild(extentsFieldset);
+  return this._layerControlHTML;
+};

package/dist/collection/components/utils/mapml/elementSupport/layers/renderStyles.js

@@ -0,0 +1,55 @@
+export function renderStyles(mapStyleOrLink) {
+  let e = mapStyleOrLink.link || mapStyleOrLink.styleElement;
+  if (e === undefined) return;
+
+  const getStylePositionAndNode = (styleOrLink) => {
+    // Get all already rendered <style> or <link> elements in the shadow DOM container
+    const renderedSiblingStyles = Array.from(
+      this._container.querySelectorAll(':scope > style, :scope > link[rel="stylesheet"]')
+    );
+
+    // If there are no rendered styles or links yet, insert before any content
+    if (renderedSiblingStyles.length === 0) {
+      const lastChild = this._container.lastChild;
+      if (!lastChild) {
+        return { position: 'afterbegin', node: this._container };
+      }
+      
+      const isSVG = lastChild.nodeName === 'SVG';
+      const isContainer = lastChild.classList?.contains('mapml-vector-container') ||
+                          lastChild.classList?.contains('mapml-extentlayer-container');
+      
+      return (isSVG || isContainer)
+        ? { position: 'beforebegin', node: lastChild }
+        : { position: 'afterend', node: lastChild };
+    }
+
+    // Peek into the light DOM context for comparison
+    const mapStyleOrLinkLightDOMElement =
+      styleOrLink.mapStyle || styleOrLink.mapLink;
+
+    // Traverse the rendered siblings in the shadow DOM
+    for (let i = 0; i < renderedSiblingStyles.length; i++) {
+      const rendered = renderedSiblingStyles[i];
+      const siblingMapStyleOrLinkLightDOMElement =
+        rendered.mapStyle || rendered.mapLink;
+
+      // Compare the light DOM order
+      if (
+        siblingMapStyleOrLinkLightDOMElement &&
+        mapStyleOrLinkLightDOMElement.compareDocumentPosition(
+          siblingMapStyleOrLinkLightDOMElement
+        ) & Node.DOCUMENT_POSITION_FOLLOWING
+      ) {
+        // Insert the new style or link before the already-rendered sibling element
+        return { position: 'beforebegin', node: rendered };
+      }
+    }
+
+    // If no preceding sibling was found, insert after the last rendered element
+    return { position: 'afterend', node: renderedSiblingStyles.at(-1) };
+  };
+
+  let positionAndNode = getStylePositionAndNode(e);
+  positionAndNode.node.insertAdjacentElement(positionAndNode.position, e);
+}

package/dist/collection/components/utils/mapml/elementSupport/viewers/matchMedia.js

@@ -0,0 +1,251 @@
+import { parseMediaQueryList } from 'media-query-parser';
+import { solveMediaQueryList } from 'media-query-solver';
+
+export const matchMedia = function (query) {
+  // useful features for maps: prefers-color-scheme, prefers-lang, projection, zoom, extent
+  const parsedQuery = parseMediaQueryList(query);
+
+  // less obviously useful: aspect-ratio, orientation, (device) resolution, overflow-block, overflow-inline
+
+  const map = this;
+  const features = {
+    'prefers-lang': {
+      type: 'discrete',
+      get values() {
+        return [navigator.language.substring(0, 2)];
+      }
+    },
+    'map-projection': {
+      type: 'discrete',
+      get values() {
+        return [map.projection.toLowerCase()];
+      }
+    },
+    'map-zoom': {
+      type: 'range',
+      valueType: 'integer',
+      canBeNegative: false,
+      canBeZero: true,
+      get extraValues() {
+        return {
+          min: 0,
+          max: map.zoom
+        };
+      }
+    },
+    'map-top-left-easting': {
+      type: 'range',
+      valueType: 'integer',
+      canBeNegative: true,
+      canBeZero: true,
+      get values() {
+        return [Math.trunc(map.extent.topLeft.pcrs.horizontal)];
+      }
+    },
+    'map-top-left-northing': {
+      type: 'range',
+      valueType: 'integer',
+      canBeNegative: true,
+      canBeZero: true,
+      get values() {
+        return [Math.trunc(map.extent.topLeft.pcrs.vertical)];
+      }
+    },
+    'map-bottom-right-easting': {
+      type: 'range',
+      valueType: 'integer',
+      canBeNegative: true,
+      canBeZero: true,
+      get values() {
+        return [Math.trunc(map.extent.bottomRight.pcrs.horizontal)];
+      }
+    },
+    'map-bottom-right-northing': {
+      type: 'range',
+      valueType: 'integer',
+      canBeNegative: true,
+      canBeZero: true,
+      get values() {
+        return [Math.trunc(map.extent.bottomRight.pcrs.vertical)];
+      }
+    },
+    'prefers-color-scheme': {
+      type: 'discrete',
+      get values() {
+        return [
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+        ];
+      }
+    },
+    'prefers-map-content': {
+      type: 'discrete',
+      get values() {
+        return M.options.contentPreference;
+      }
+    }
+  };
+
+  const solveUnknownFeature = (featureNode) => {
+    let feature = featureNode.feature;
+    let queryValue = featureNode.value.value;
+
+    if (feature === 'prefers-lang') {
+      return features['prefers-lang'].values.includes(queryValue).toString();
+    } else if (
+      feature === 'map-zoom' ||
+      feature === 'map-top-left-easting' ||
+      feature === 'map-top-left-northing' ||
+      feature === 'map-bottom-right-easting' ||
+      feature === 'map-bottom-right-northing'
+    ) {
+      return solveRangeFeature(featureNode);
+    } else if (feature === 'map-projection') {
+      return features['map-projection'].values
+        .some((p) => p === queryValue)
+        .toString();
+    } else if (feature === 'prefers-color-scheme') {
+      return features['prefers-color-scheme'].values
+        .some((s) => s === queryValue)
+        .toString();
+    } else if (feature === 'prefers-map-content') {
+      return features[feature].values
+        .some((pref) => pref === queryValue)
+        .toString();
+    }
+    return 'false';
+  };
+  let matches =
+    solveMediaQueryList(parsedQuery, {
+      features,
+      solveUnknownFeature
+    }) === 'true'
+      ? true
+      : false;
+
+  function solveRangeFeature(featureNode) {
+    const { context, feature, value, op } = featureNode;
+
+    if (!feature.startsWith('map-')) {
+      return 'unknown';
+    }
+
+    const currentValue = getMapFeatureValue(feature);
+
+    if (currentValue === undefined) {
+      return 'unknown';
+    }
+
+    if (context === 'value') {
+      // Plain case: <mf-name>: <mf-value>
+      // Example: (map-zoom: 15)
+      return currentValue === value.value ? 'true' : 'false';
+    }
+
+    if (context === 'range') {
+      // Range case: <mf-name> <mf-comparison> <mf-value>
+      // Example: (0 <= map-zoom < 15)
+      switch (op) {
+        case '<':
+          return currentValue < value.value ? 'true' : 'false';
+        case '<=':
+          return currentValue <= value.value ? 'true' : 'false';
+        case '>':
+          return currentValue > value.value ? 'true' : 'false';
+        case '>=':
+          return currentValue >= value.value ? 'true' : 'false';
+        case '=':
+          return currentValue === value.value ? 'true' : 'false';
+        default:
+          return 'unknown';
+      }
+    }
+
+    return 'unknown'; // If the context is neither "value" nor "range"
+  }
+
+  function getMapFeatureValue(feature) {
+    switch (feature) {
+      case 'map-zoom':
+        return map.zoom;
+      case 'map-top-left-easting':
+        return Math.trunc(map.extent.topLeft.pcrs.horizontal);
+      case 'map-top-left-northing':
+        return Math.trunc(map.extent.topLeft.pcrs.vertical);
+      case 'map-bottom-right-easting':
+        return Math.trunc(map.extent.bottomRight.pcrs.horizontal);
+      case 'map-bottom-right-northing':
+        return Math.trunc(map.extent.bottomRight.pcrs.vertical);
+      default:
+        return undefined; // Unsupported or unknown feature
+    }
+  }
+
+  // Make mediaQueryList an EventTarget for dispatching events
+  const mediaQueryList = Object.assign(new EventTarget(), {
+    matches,
+    media: query,
+    listeners: [],
+    // this is a client facing api
+    addEventListener(event, listener) {
+      if (event === 'change') {
+        this.listeners.push(listener);
+
+        // Start observing properties only if there is at least one listener
+        if (this.listeners.length !== 0) {
+          observeProperties();
+        }
+        EventTarget.prototype.addEventListener.call(this, event, listener);
+      }
+    },
+
+    // this is a client facing api
+    removeEventListener(event, listener) {
+      if (event === 'change') {
+        this.listeners = this.listeners.filter((l) => l !== listener);
+
+        // Stop observing if there are no more listeners
+        if (this.listeners.length === 0) {
+          stopObserving();
+        }
+        EventTarget.prototype.removeEventListener.call(this, event, listener);
+      }
+    }
+  });
+
+  const observeProperties = () => {
+    const notifyIfChanged = () => {
+      const newMatches =
+        solveMediaQueryList(parsedQuery, {
+          features,
+          solveUnknownFeature
+        }) === 'true'
+          ? true
+          : false;
+      if (newMatches !== mediaQueryList.matches) {
+        mediaQueryList.matches = newMatches;
+
+        // Dispatch a "change" event to notify listeners of the update
+        mediaQueryList.dispatchEvent(new Event('change'));
+      }
+    };
+    notifyIfChanged.bind(this);
+    // Subscribe to internal events for changes in projection, zoom, and extent
+    this.addEventListener('map-projectionchange', notifyIfChanged);
+    this.addEventListener('map-moveend', notifyIfChanged);
+    const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    colorSchemeQuery.addEventListener('change', notifyIfChanged);
+
+    // Stop observing function
+    stopObserving = () => {
+      this.removeEventListener('map-projectionchange', notifyIfChanged);
+      this.removeEventListener('map-moveend', notifyIfChanged);
+      colorSchemeQuery.removeEventListener('change', notifyIfChanged);
+    };
+  };
+
+  let stopObserving; // Declare here so it can be assigned within observeProperties
+
+  return mediaQueryList;
+};