@prushforth/map 1.0.0-preview.1

package/dist/collection/components/utils/mapml/control/ScaleBar.js

@@ -0,0 +1,108 @@
+import { Control, DomUtil } from 'leaflet';
+
+export var ScaleBar = Control.Scale.extend({
+  options: {
+    maxWidth: 100,
+    updateWhenIdle: true,
+    position: 'bottomleft'
+  },
+
+  onAdd: function (map) {
+    // create output tag for screenreader to read from
+    let outputScale =
+      "<output role='status' aria-live='polite' aria-atomic='true' class='mapml-screen-reader-output-scale'></output>";
+    map._container.insertAdjacentHTML('beforeend', outputScale);
+
+    // initialize _container
+    this._container = DomUtil.create('div', 'mapml-control-scale');
+    let scaleControl = Control.Scale.prototype.onAdd.call(this, map);
+    this._container.appendChild(scaleControl);
+    this._container.setAttribute('tabindex', 0);
+    this._scaleControl = this;
+
+    // run on load
+    setTimeout(() => {
+      this._updateOutput();
+      this._focusOutput();
+    }, 0);
+
+    // update whenever map is zoomed or dragged
+    map.on('zoomend moveend', this._updateOutput, this);
+
+    // have screenreader read out everytime the map is focused
+    this._map._container.addEventListener('focus', () => this._focusOutput());
+
+    return this._container;
+  },
+
+  onRemove: function (map) {
+    map.off('zoomend moveend', this._updateOutput, this);
+  },
+
+  getContainer: function () {
+    return this._container;
+  },
+
+  _pixelsToDistance: function (px, units) {
+    let dpi = window.devicePixelRatio * 96; // default dpi
+    if (units === 'metric') {
+      return (px / dpi) * 2.54; // inches to cm
+    }
+    return px / dpi;
+  },
+
+  _scaleLength: function (scale) {
+    let scaleLength = scale.getAttribute('style');
+    let finalLength = parseInt(scaleLength.match(/width:\s*(\d+)px/)[1]);
+
+    return finalLength;
+  },
+
+  _focusOutput: function () {
+    setTimeout(() => {
+      let outputFocus = this._map._container.querySelector(
+        '.mapml-screen-reader-output-scale'
+      );
+      outputFocus.textContent = '';
+      setTimeout(() => {
+        outputFocus.textContent = this._container.getAttribute('aria-label');
+      }, 100);
+    }, 0);
+  },
+
+  _updateOutput: function () {
+    let output = '';
+    let scaleLine = this._scaleControl
+      .getContainer()
+      .getElementsByClassName('leaflet-control-scale-line')[0];
+
+    if (this.options.metric) {
+      let distance = parseFloat(
+        this._pixelsToDistance(this._scaleLength(scaleLine), 'metric').toFixed(
+          1
+        )
+      );
+      output = `${distance} centimeters to ${scaleLine.textContent.trim()}`;
+      output = output.replace(/(\d+)\s*m\b/g, '$1 meters');
+      output = output.replace(/ km/g, ' kilometers');
+    } else {
+      let distance = parseFloat(
+        this._pixelsToDistance(
+          this._scaleLength(scaleLine),
+          'imperial'
+        ).toFixed(1)
+      );
+      output = `${distance} inches to ${scaleLine.textContent.trim()}`;
+      output = output.replace(/ft/g, 'feet');
+      output = output.replace(/mi/g, 'miles');
+    }
+
+    this._container.setAttribute('aria-label', output);
+    this._map._container.querySelector(
+      '.mapml-screen-reader-output-scale'
+    ).textContent = output;
+  }
+});
+export var scaleBar = function (options) {
+  return new ScaleBar(options);
+};

package/dist/collection/components/utils/mapml/control/SearchButton.js

@@ -0,0 +1,565 @@
+import { Control, DomUtil, DomEvent, latLngBounds } from 'leaflet';
+
+export var SearchButton = Control.extend({
+  options: {
+    position: 'topleft'
+  },
+  _getLocale: function (map) {
+    return map.options.mapEl && map.options.mapEl.locale
+      ? map.options.mapEl.locale
+      : M.options.locale;
+  },
+  onAdd: function (map) {
+    let locale = this._getLocale(map);
+    this._locale = locale;
+    let container = DomUtil.create('div', 'mapml-search-control leaflet-bar');
+
+    let button = DomUtil.create(
+      'button',
+      'mapml-search-button mapml-button',
+      container
+    );
+    button.setAttribute('type', 'button');
+    button.setAttribute('aria-label', locale.btnSearch || 'Search');
+    button.title = locale.btnSearch || 'Search';
+    button.innerHTML =
+      '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 15 15" fill="currentColor">' +
+      '<path d="M6 0C9.31 0 12 2.69 12 6C12 7.3 11.59 8.5 10.89 9.48L14.71 13.29C15.1 13.68 15.1 14.32 14.71 14.71C14.32 15.1 13.68 15.1 13.29 14.71L9.48 10.89C8.5 11.59 7.3 12 6 12C2.69 12 0 9.31 0 6C0 2.69 2.69 0 6 0ZM6 2C3.79 2 2 3.79 2 6C2 8.21 3.79 10 6 10C8.21 10 10 8.21 10 6C10 3.79 8.21 2 6 2Z"/>' +
+      '</svg>';
+
+    DomEvent.disableClickPropagation(button);
+    DomEvent.on(button, 'click', DomEvent.stop);
+    DomEvent.on(button, 'click', this._openPanel, this);
+    DomEvent.on(
+      button,
+      'keydown',
+      function (e) {
+        if (e.key === 'Enter') {
+          DomEvent.stop(e);
+          this._openPanel();
+        }
+      },
+      this
+    );
+
+    this._button = button;
+
+    let panel = DomUtil.create('div', 'mapml-search-panel');
+    panel.setAttribute('hidden', '');
+    map.getContainer().appendChild(panel);
+    DomEvent.disableClickPropagation(panel);
+    DomEvent.on(panel, 'mouseenter', function () {
+      map.scrollWheelZoom.disable();
+    });
+    DomEvent.on(panel, 'mouseleave', function () {
+      map.scrollWheelZoom.enable();
+    });
+    DomEvent.on(panel, 'wheel', DomEvent.stopPropagation);
+
+    let input = DomUtil.create('input', 'mapml-search-input', panel);
+    input.setAttribute('type', 'search');
+    input.setAttribute('placeholder', locale.searchPlaceholder || 'Search...');
+    input.setAttribute('aria-label', locale.btnSearch || 'Search');
+
+    DomEvent.disableClickPropagation(input);
+    DomEvent.on(
+      input,
+      'keydown',
+      function (e) {
+        if (e.key === 'Escape') {
+          DomEvent.stop(e);
+          if (this._input.value) {
+            this._input.value = '';
+            this._results.innerHTML = '';
+          } else {
+            this._closePanel();
+          }
+        } else if (e.key === 'Enter') {
+          DomEvent.stop(e);
+          if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer);
+            this._debounceTimer = null;
+          }
+          this._doSearch(this._input.value.trim());
+        } else if (e.key === 'ArrowDown' || e.key === 'Down') {
+          DomEvent.stop(e);
+          let first = this._results.querySelector('.mapml-search-result');
+          if (first) first.focus();
+        }
+      },
+      this
+    );
+
+    // Debounced input handler for suggestions
+    this._debounceTimer = null;
+    this._abortController = null;
+    // Track IME composition to avoid searching on intermediate input
+    this._isComposing = false;
+    DomEvent.on(
+      input,
+      'compositionstart',
+      function () {
+        this._isComposing = true;
+      },
+      this
+    );
+    DomEvent.on(
+      input,
+      'compositionend',
+      function () {
+        this._isComposing = false;
+        // Trigger search after composition ends
+        let query = this._input.value.trim();
+        if (query.length < 2) {
+          this._results.innerHTML = '';
+          return;
+        }
+        if (this._debounceTimer) clearTimeout(this._debounceTimer);
+        this._debounceTimer = setTimeout(() => {
+          this._fetchSuggestions(query);
+        }, 300);
+      },
+      this
+    );
+    DomEvent.on(
+      input,
+      'input',
+      function () {
+        if (this._isComposing) return;
+        if (this._debounceTimer) clearTimeout(this._debounceTimer);
+        let query = this._input.value.trim();
+        if (query.length < 2) {
+          this._results.innerHTML = '';
+          return;
+        }
+        this._debounceTimer = setTimeout(() => {
+          this._fetchSuggestions(query);
+        }, 300);
+      },
+      this
+    );
+
+    this._input = input;
+
+    let results = DomUtil.create('div', 'mapml-search-results', panel);
+    this._results = results;
+
+    let closeBtn = DomUtil.create(
+      'button',
+      'mapml-search-close mapml-button',
+      panel
+    );
+    closeBtn.setAttribute('type', 'button');
+    closeBtn.setAttribute(
+      'aria-label',
+      locale.btnSearchClose || 'Close search'
+    );
+    closeBtn.title = locale.btnSearchClose || 'Close search';
+    closeBtn.innerHTML =
+      '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" fill="currentColor">' +
+      '<path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>' +
+      '</svg>';
+
+    DomEvent.disableClickPropagation(closeBtn);
+    DomEvent.on(closeBtn, 'click', DomEvent.stop);
+    DomEvent.on(closeBtn, 'click', this._closePanel, this);
+
+    this._closeBtn = closeBtn;
+    this._panel = panel;
+
+    this._mapEl = map.options.mapEl;
+
+    // Set up layer observation for disabled state
+    this._onLoadedMetadata = () => this._updateDisabled();
+    this._layerObserver = new MutationObserver((mutations) => {
+      this._updateDisabled();
+      // When new layers are added, listen for their loadedmetadata
+      for (let mutation of mutations) {
+        for (let node of mutation.addedNodes) {
+          if (
+            node.nodeName &&
+            (node.nodeName.toUpperCase() === 'MAP-LAYER' ||
+              node.nodeName.toUpperCase() === 'LAYER-')
+          ) {
+            node.addEventListener('loadedmetadata', this._onLoadedMetadata);
+          }
+        }
+      }
+    });
+    this._layerObserver.observe(this._mapEl, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['checked', 'rel']
+    });
+    // Attach loadedmetadata listener to existing layers
+    this._mapEl
+      .querySelectorAll('map-layer, layer-')
+      .forEach((layer) =>
+        layer.addEventListener('loadedmetadata', this._onLoadedMetadata)
+      );
+
+    this._updateDisabled();
+
+    return container;
+  },
+
+  onRemove: function () {
+    if (this._panel && this._panel.parentNode) {
+      this._panel.parentNode.removeChild(this._panel);
+    }
+    if (this._layerObserver) {
+      this._layerObserver.disconnect();
+    }
+    if (this._mapEl) {
+      this._mapEl
+        .querySelectorAll('map-layer, layer-')
+        .forEach((layer) =>
+          layer.removeEventListener('loadedmetadata', this._onLoadedMetadata)
+        );
+    }
+    DomEvent.off(this._button, 'click', this._openPanel, this);
+    DomEvent.off(this._closeBtn, 'click', this._closePanel, this);
+  },
+
+  _hasSearchLayers: function () {
+    let layers = this._mapEl.querySelectorAll(
+      'map-layer[checked], layer-[checked]'
+    );
+    for (let layer of layers) {
+      let root = layer.src ? layer.shadowRoot : layer;
+      if (root && root.querySelector('map-link[rel=search]')) {
+        return true;
+      }
+    }
+    return false;
+  },
+
+  _updateDisabled: function () {
+    let hasSearch = this._hasSearchLayers();
+    if (hasSearch) {
+      this._button.setAttribute('aria-disabled', 'false');
+    } else {
+      this._button.setAttribute('aria-disabled', 'true');
+      // If panel is open, close it
+      if (!this._panel.hasAttribute('hidden')) {
+        this._closePanel();
+      }
+    }
+  },
+
+  _openPanel: function () {
+    if (this._button.getAttribute('aria-disabled') === 'true') return;
+    this._panel.removeAttribute('hidden');
+    this._input.value = '';
+    this._results.innerHTML = '';
+    setTimeout(() => {
+      this._panel.classList.add('mapml-search-panel-open');
+      this._input.focus();
+    }, 0);
+  },
+
+  _closePanel: function () {
+    this._panel.classList.remove('mapml-search-panel-open');
+    if (this._abortController) {
+      this._abortController.abort();
+      this._abortController = null;
+    }
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = null;
+    }
+    let onEnd = () => {
+      this._panel.setAttribute('hidden', '');
+      this._button.focus();
+      this._panel.removeEventListener('transitionend', onEnd);
+    };
+    this._panel.addEventListener('transitionend', onEnd);
+    setTimeout(onEnd, 300);
+  },
+
+  _getLinks: function (rel) {
+    let results = [];
+    let layers = this._mapEl.querySelectorAll(
+      'map-layer[checked], layer-[checked]'
+    );
+    for (let layer of layers) {
+      let root = layer.src ? layer.shadowRoot : layer;
+      if (root) {
+        let link = root.querySelector('map-link[rel=' + rel + ']');
+        if (link) {
+          results.push({ link: link, layer: layer });
+        }
+      }
+    }
+    return results;
+  },
+
+  _getSearchLinks: function () {
+    return this._getLinks('search');
+  },
+
+  _getSuggestionsLinks: function () {
+    return this._getLinks('suggestions');
+  },
+
+  _resolveUrl: function (link, query) {
+    let tref = link.getAttribute('tref') || '';
+    let url = tref.replace('{searchTerms}', encodeURIComponent(query));
+    if (link.getBase) {
+      try {
+        return new URL(url, link.getBase()).href;
+      } catch (e) {
+        return url;
+      }
+    }
+    return url;
+  },
+
+  _fetchSuggestions: function (query) {
+    if (this._button.getAttribute('aria-disabled') === 'true') return;
+    let suggestionsLinks = this._getSuggestionsLinks();
+    if (suggestionsLinks.length === 0) return;
+
+    if (this._abortController) this._abortController.abort();
+    this._abortController = new AbortController();
+    let signal = this._abortController.signal;
+
+    let fetches = suggestionsLinks.map(({ link, layer }) => {
+      let url = this._resolveUrl(link, query);
+      return fetch(url, { signal })
+        .then((r) => r.json())
+        .then((data) => ({ data, link, layer }));
+    });
+
+    Promise.allSettled(fetches).then((settled) => {
+      if (signal.aborted) return;
+      let responses = settled
+        .filter((s) => s.status === 'fulfilled')
+        .map((s) => s.value);
+
+      let event = new CustomEvent('mapsuggestions', {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          query,
+          responses,
+          setResults: this._setResults.bind(this)
+        }
+      });
+      let cancelled = !this._mapEl.dispatchEvent(event);
+      if (!cancelled) {
+        this._defaultSuggestionsHandler({ query, responses });
+      }
+    });
+  },
+
+  _doSearch: function (query) {
+    if (!query || this._button.getAttribute('aria-disabled') === 'true') return;
+    let searchLinks = this._getSearchLinks();
+    if (searchLinks.length === 0) return;
+
+    if (this._abortController) this._abortController.abort();
+    this._abortController = new AbortController();
+    let signal = this._abortController.signal;
+
+    let fetches = searchLinks.map(({ link, layer }) => {
+      let url = this._resolveUrl(link, query);
+      return fetch(url, { signal })
+        .then((r) => r.json())
+        .then((data) => ({ data, link, layer }));
+    });
+
+    Promise.allSettled(fetches).then((settled) => {
+      if (signal.aborted) return;
+      let responses = settled
+        .filter((s) => s.status === 'fulfilled')
+        .map((s) => s.value);
+
+      let event = new CustomEvent('mapsearch', {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          query,
+          responses,
+          setResults: this._setResults.bind(this)
+        }
+      });
+      let cancelled = !this._mapEl.dispatchEvent(event);
+      if (!cancelled) {
+        this._defaultSearchHandler({ query, responses });
+      }
+    });
+  },
+
+  _defaultSuggestionsHandler: function ({ query, responses }) {
+    this._renderResults(responses);
+  },
+
+  _defaultSearchHandler: function ({ query, responses }) {
+    this._renderResults(responses);
+    // Navigate to the first result
+    for (let { data } of responses) {
+      if (!data || !data.features) continue;
+      for (let feature of data.features) {
+        this._navigateToFeature(feature);
+        break;
+      }
+      break;
+    }
+    // Keep focus on the search input so the user can refine or review
+    this._input.focus();
+  },
+
+  _navigateToFeature: function (feature) {
+    let map = this._map;
+    // Standard GeoJSON bbox
+    let bbox = feature.bbox;
+    // Photon stores extent in properties.extent [west, south, east, north]
+    if (
+      (!bbox || bbox.length !== 4) &&
+      feature.properties &&
+      feature.properties.extent &&
+      feature.properties.extent.length === 4
+    ) {
+      bbox = feature.properties.extent;
+    }
+    if (bbox && bbox.length === 4) {
+      let [west, south, east, north] = bbox;
+      map.fitBounds(latLngBounds([south, west], [north, east]));
+    } else if (
+      feature.geometry &&
+      feature.geometry.coordinates &&
+      feature.geometry.coordinates.length >= 2
+    ) {
+      let [lon, lat] = feature.geometry.coordinates;
+      let zoom = (feature.properties && feature.properties.zoom) || 14;
+      map.setView([lat, lon], zoom);
+    }
+  },
+
+  _renderResults: function (responses) {
+    this._results.innerHTML = '';
+    for (let { data, layer } of responses) {
+      if (!data || !data.features) continue;
+      for (let feature of data.features) {
+        let btn = document.createElement('button');
+        btn.className = 'mapml-search-result';
+        btn.setAttribute('type', 'button');
+        btn.textContent = this._formatResultName(feature.properties);
+        btn.addEventListener(
+          'click',
+          (
+            (f, l) => () =>
+              this._selectResult(f, l)
+          )(feature, layer)
+        );
+        btn.addEventListener('keydown', this._resultKeydown.bind(this));
+        this._results.appendChild(btn);
+      }
+    }
+  },
+
+  _resultKeydown: function (e) {
+    let btn = e.target;
+    let prev = btn.previousElementSibling;
+    let next = btn.nextElementSibling;
+    if (
+      e.key === 'ArrowDown' ||
+      e.key === 'ArrowRight' ||
+      e.key === 'Down' ||
+      e.key === 'Right'
+    ) {
+      DomEvent.stop(e);
+      if (next && next.classList.contains('mapml-search-result')) {
+        next.focus();
+      }
+    } else if (
+      e.key === 'ArrowUp' ||
+      e.key === 'ArrowLeft' ||
+      e.key === 'Up' ||
+      e.key === 'Left'
+    ) {
+      DomEvent.stop(e);
+      if (prev && prev.classList.contains('mapml-search-result')) {
+        prev.focus();
+      } else {
+        this._input.focus();
+      }
+    } else if (e.key === 'Escape') {
+      DomEvent.stop(e);
+      this._input.focus();
+    }
+  },
+
+  _formatResultName: function (props) {
+    if (!props) return this._locale?.searchResultWithNoName || 'Unnamed';
+    if (props.display_name) return props.display_name;
+    let parts = [props.name];
+    // Build context from common geocoder properties (Photon, etc.)
+    for (let key of ['city', 'county', 'state', 'country']) {
+      if (props[key] && props[key] !== props.name) parts.push(props[key]);
+    }
+    return (
+      parts.filter(Boolean).join(', ') ||
+      this._locale?.searchResultWithNoName ||
+      'Unnamed'
+    );
+  },
+
+  _selectResult: function (feature, layer) {
+    // Use the suggestion's display name as a refined search query
+    let name = this._formatResultName(feature.properties);
+    this._input.value = name;
+    this._doSearch(name);
+  },
+
+  /**
+   * Public API for custom event handlers.
+   * Renders items as buttons in the results dropdown.
+   *
+   * Item shape: { text, value?, lat?, lng?, bbox? }
+   *   - text (required): display string
+   *   - value: if present, clicking triggers _doSearch(value)
+   *   - lat/lng/bbox: if present and value is absent, clicking navigates
+   */
+  _setResults: function (items) {
+    this._results.innerHTML = '';
+    if (!items || !Array.isArray(items)) return;
+    for (let item of items) {
+      let btn = document.createElement('button');
+      btn.className = 'mapml-search-result';
+      btn.setAttribute('type', 'button');
+      btn.textContent = item.text || '';
+      btn.addEventListener(
+        'click',
+        ((it) => () => {
+          if (it.value != null) {
+            // Suggestion mode: refine the search
+            this._input.value = it.value;
+            this._doSearch(it.value);
+          } else {
+            // Result mode: navigate to location
+            this._navigateToItem(it);
+          }
+        })(item)
+      );
+      btn.addEventListener('keydown', this._resultKeydown.bind(this));
+      this._results.appendChild(btn);
+    }
+  },
+
+  _navigateToItem: function (item) {
+    let map = this._map;
+    if (item.bbox && item.bbox.length === 4) {
+      let [west, south, east, north] = item.bbox;
+      map.fitBounds(latLngBounds([south, west], [north, east]));
+    } else if (item.lat != null && item.lng != null) {
+      map.setView([item.lat, item.lng], 14);
+    }
+  }
+});
+
+export var searchButton = function (options) {
+  return new SearchButton(options);
+};