@prushforth/map 1.0.0-preview.1

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

@@ -0,0 +1,101 @@
+import { Control, DomUtil, DomEvent, Map } from 'leaflet';
+
+export var AttributionButton = Control.Attribution.extend({
+  _getLocale: function () {
+    return this.options.mapEl && this.options.mapEl.locale
+      ? this.options.mapEl.locale
+      : M.options.locale;
+  },
+  onAdd: function (map) {
+    map.attributionControl = this;
+    this._container = DomUtil.create('details', 'leaflet-control-attribution');
+    DomEvent.disableClickPropagation(this._container);
+
+    for (var i in map._layers) {
+      if (map._layers[i].getAttribution) {
+        this.addAttribution(map._layers[i].getAttribution());
+      }
+    }
+
+    this._update();
+
+    map.on('layeradd', this._addAttribution, this);
+
+    let dialog = document.createElement('dialog');
+    dialog.setAttribute('class', 'shortcuts-dialog');
+    dialog.setAttribute('autofocus', '');
+    dialog.onclick = function (e) {
+      e.stopPropagation();
+    };
+    let locale = this._getLocale();
+    dialog.innerHTML =
+      `<b>${locale.kbdShortcuts} </b><button aria-label="Close" onclick='this.parentElement.close()'><span class="gcds-icon-close" aria-hidden="true"></span></button>` +
+      `<ul><b>${locale.kbdMovement}</b><li><kbd>&#8593</kbd> ${locale.kbdPanUp}</li><li><kbd>&#8595</kbd> ${locale.kbdPanDown}</li><li><kbd>&#8592</kbd> ${locale.kbdPanLeft}</li><li><kbd>&#8594</kbd> ${locale.kbdPanRight}</li><li><kbd>+</kbd> ${locale.btnZoomIn}</li><li><kbd>-</kbd> ${locale.btnZoomOut}</li><li><kbd>shift</kbd> + <kbd>&#8592/&#8593/&#8594/&#8595</kbd> 3x ${locale.kbdPanIncrement}</li><li><kbd>ctrl</kbd> + <kbd>&#8592/&#8593/&#8594/&#8595</kbd> 0.2x ${locale.kbdPanIncrement}</li><li><kbd>shift</kbd> + <kbd>+/-</kbd> ${locale.kbdZoom}</li></ul>` +
+      `<ul><b>${locale.kbdFeature}</b><li><kbd>&#8592/&#8593</kbd> ${locale.kbdPrevFeature}</li><li><kbd>&#8594/&#8595</kbd> ${locale.kbdNextFeature}</li></ul>`;
+    map._container.appendChild(dialog);
+
+    return this._container;
+  },
+
+  _update: function () {
+    if (!this._map) {
+      return;
+    }
+
+    var attribs = [];
+
+    for (var i in this._attributions) {
+      if (this._attributions[i]) {
+        attribs.push(i);
+      }
+    }
+
+    var prefixAndAttribs = [];
+
+    if (this.options.prefix) {
+      prefixAndAttribs.push(this.options.prefix);
+    }
+    if (attribs.length) {
+      prefixAndAttribs.push(attribs.join(', '));
+    }
+    let locale = this._getLocale();
+    this._container.innerHTML =
+      `<summary><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></summary>` +
+      '<div class="mapml-attribution-container">' +
+      `<button onclick="this.closest(\'.leaflet-container\').querySelector(\'.shortcuts-dialog\').showModal()" class="shortcuts-button mapml-button">${locale.kbdShortcuts}</button> | ` +
+      prefixAndAttribs.join(' <span aria-hidden="true">|</span> ') +
+      '</div>';
+    this._container.setAttribute('role', 'group');
+    this._container.setAttribute('aria-label', `${locale.btnAttribution}`);
+  }
+});
+
+Map.mergeOptions({
+  attributionControl: false,
+  toggleableAttributionControl: true
+});
+
+Map.addInitHook(function () {
+  if (this.options.toggleableAttributionControl) {
+    attributionButton({ mapEl: this.options.mapEl }).addTo(this);
+  }
+});
+
+export var attributionButton = function (opts) {
+  // Inline the Canada flag icon as data URL to avoid asset path resolution issues
+  const flagIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE1NS4zOCA3NS4wMSI+PHBhdGggZD0iTTAsMCAzNi44NCwwIDM2Ljg0LDc1LjAxIDAsNzUuMDF6IE0xMTguNTQsMCAxNTUuMzgsMCAxNTUuMzgsNzUuMDEgMTE4LjU0LDc1LjAxeiBNNzIuNTgsMTUuNjEsNzcuODQsNC45bDUuMjIsMTAuMzJjLjY1LDEuMDksMS4xOCwxLDIuMjIuNDhsNC40OS0yLjIyTDg2Ljg1LDI3Ljg5Yy0uNjEsMi44MywxLDMuNjYsMi43NSwxLjc0TDk2LDIyLjc5bDEuNywzLjg3Yy41NywxLjE3LDEuNDMsMSwyLjU3Ljc5bDYuNjEtMS4zOS0yLjIyLDguMzUsMCwuMThjLS4yNiwxLjA5LS43OCwyLC40NCwyLjUzbDIuMzUsMS4xN0w5My43Nyw0OS44MmMtMS4zOSwxLjQzLS45MSwxLjg3LS4zOSwzLjQ4bDEuMjYsMy44Ny0xMi43MS0yLjNjLTEuNTctLjM5LTIuNjYtLjM5LTIuNy44N2wuNTIsMTQuNThINzUuOTNsLjUyLTE0LjU0YzAtMS40My0xLjA5LTEuMzktMy42Ni0uODZMNjEsNTcuMThsMS41Mi0zLjg3Yy41Mi0xLjQ4LjY2LTIuNDgtLjUyLTMuNDhMNDguMTEsMzguNDZsMi41Ny0xLjU3Yy43NC0uNTcuNzgtMS4xNy4zOS0yLjQ0TDQ4LjQ2LDI2bDYuNywxLjQzYzEuODcuNDQsMi4zOSwwLDIuODctMWwxLjg3LTMuODNMNjYuNTIsMzBjMS4xNywxLjM5LDIuODMuNDgsMi4zMS0xLjUyTDY1LjY1LDEyLjg2bDQuOTIsMi44M2MuNzguNDgsMS42MS42MSwyLjA5LS4zIiBmaWxsPSIjRUIyRDM3Ii8+PC9zdmc+';
+  const isFr = opts.mapEl && opts.mapEl.closest && opts.mapEl.closest(':lang(fr)') === opts.mapEl;
+  const gcdsHref = isFr
+    ? 'https://nrcan.github.io/gcds-ext-map/fr/composants/composants-de-carte/'
+    : 'https://nrcan.github.io/gcds-ext-map/en/components/map-components/';
+  const gcdsLabel = isFr
+    ? 'Système de design GC - Cartes'
+    : 'GC Design System - Maps';
+  const gcdsAlt = isFr
+    ? 'Système de design du gouvernement du Canada - Cartes'
+    : 'Government of Canada Design System - Maps';
+  const options = Object.assign(opts, {
+    prefix: `<img src="${flagIcon}" style="position: relative; top: 2px" alt="${gcdsAlt}"> <a href="${gcdsHref}">${gcdsLabel}</a> `
+  });
+  return new AttributionButton(options);
+};

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

@@ -0,0 +1,181 @@
+import { Control, DomUtil, DomEvent, Map, Util as LeafletUtil } from 'leaflet';
+import { Util } from '../Util.js';
+
+export var FullscreenButton = Control.extend({
+  options: {
+    position: 'topleft',
+    title: {
+      false: M.options.locale.btnFullScreen,
+      true: M.options.locale.btnExitFullScreen
+    }
+  },
+  _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.options.title = {
+      false: locale.btnFullScreen,
+      true: locale.btnExitFullScreen
+    };
+    var container = DomUtil.create(
+      'div',
+      'leaflet-control-fullscreen leaflet-bar leaflet-control'
+    );
+
+    this.link = DomUtil.create(
+      'a',
+      'leaflet-control-fullscreen-button leaflet-bar-part',
+      container
+    );
+    this.link.href = '#';
+    this.link.setAttribute('role', 'button');
+
+    this._map = map;
+    this._map.on('fullscreenchange', this._toggleTitle, this);
+    this._toggleTitle();
+
+    DomEvent.on(this.link, 'click', this._click, this);
+
+    return container;
+  },
+
+  onRemove: function (map) {
+    map.off('fullscreenchange', this._toggleTitle, this);
+  },
+
+  _click: function (e) {
+    DomEvent.stopPropagation(e);
+    DomEvent.preventDefault(e);
+    this._map.toggleFullscreen(this.options);
+  },
+
+  _toggleTitle: function () {
+    this.link.title = this.options.title[this._map.isFullscreen()];
+  }
+});
+
+Map.include({
+  isFullscreen: function () {
+    return this._isFullscreen || false;
+  },
+
+  toggleFullscreen: function (options) {
+    // <gcds-ext-map> can contain a shadow root, so return it directly
+    var mapEl = Util.getClosest(
+      this.getContainer(),
+      'gcds-ext-map'
+    );
+    if (this.isFullscreen()) {
+      if (options && options.pseudoFullscreen) {
+        this._disablePseudoFullscreen(mapEl);
+      } else if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitCancelFullScreen) {
+        document.webkitCancelFullScreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else {
+        this._disablePseudoFullscreen(mapEl);
+      }
+    } else {
+      if (options && options.pseudoFullscreen) {
+        this._enablePseudoFullscreen(mapEl);
+      } else if (mapEl.requestFullscreen) {
+        mapEl.requestFullscreen();
+      } else if (mapEl.mozRequestFullScreen) {
+        mapEl.mozRequestFullScreen();
+      } else if (mapEl.webkitRequestFullscreen) {
+        mapEl.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      } else if (mapEl.msRequestFullscreen) {
+        mapEl.msRequestFullscreen();
+      } else {
+        this._enablePseudoFullscreen(mapEl);
+      }
+    }
+    this.getContainer().focus();
+  },
+
+  _enablePseudoFullscreen: function (container) {
+    DomUtil.addClass(container, 'leaflet-pseudo-fullscreen');
+    this._setFullscreen(true);
+    this.fire('fullscreenchange');
+  },
+
+  _disablePseudoFullscreen: function (container) {
+    DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen');
+    this._setFullscreen(false);
+    this.fire('fullscreenchange');
+  },
+
+  _setFullscreen: function (fullscreen) {
+    this._isFullscreen = fullscreen;
+    var container = Util.getClosest(
+      this.getContainer(),
+      'gcds-ext-map'
+    );
+    if (fullscreen) {
+      DomUtil.addClass(container, 'mapml-fullscreen-on');
+    } else {
+      DomUtil.removeClass(container, 'mapml-fullscreen-on');
+    }
+    this.invalidateSize();
+  },
+
+  _onFullscreenChange: function (e) {
+    var fullscreenElement = Util.getClosest(this.getContainer(), ':fullscreen'),
+      mapEl = Util.getClosest(this.getContainer(), 'gcds-ext-map');
+    if (fullscreenElement === mapEl && !this._isFullscreen) {
+      this._setFullscreen(true);
+      this.fire('fullscreenchange');
+    } else if (fullscreenElement !== mapEl && this._isFullscreen) {
+      this._setFullscreen(false);
+      this.fire('fullscreenchange');
+    }
+  }
+});
+
+Map.mergeOptions({
+  fullscreenControl: false
+});
+
+Map.addInitHook(function () {
+  if (this.options.fullscreenControl) {
+    this.fullscreenControl = new FullscreenButton(
+      this.options.fullscreenControl
+    );
+    this.addControl(this.fullscreenControl);
+  }
+
+  var fullscreenchange;
+
+  if ('onfullscreenchange' in document) {
+    fullscreenchange = 'fullscreenchange';
+  } else if ('onmozfullscreenchange' in document) {
+    fullscreenchange = 'mozfullscreenchange';
+  } else if ('onwebkitfullscreenchange' in document) {
+    fullscreenchange = 'webkitfullscreenchange';
+  } else if ('onmsfullscreenchange' in document) {
+    fullscreenchange = 'MSFullscreenChange';
+  }
+
+  if (fullscreenchange) {
+    var onFullscreenChange = LeafletUtil.bind(this._onFullscreenChange, this);
+
+    this.whenReady(function () {
+      DomEvent.on(document, fullscreenchange, onFullscreenChange);
+    });
+
+    this.on('unload', function () {
+      DomEvent.off(document, fullscreenchange, onFullscreenChange);
+    });
+  }
+});
+
+export var fullscreenButton = function (options) {
+  return new FullscreenButton(options);
+};

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

@@ -0,0 +1,70 @@
+import { Control } from 'leaflet';
+import { LocateControl } from 'leaflet.locatecontrol';
+
+export var GeolocationButton = Control.extend({
+  options: {
+    position: 'bottomright'
+  },
+  _getLocale: function (map) {
+    return map.options.mapEl && map.options.mapEl.locale
+      ? map.options.mapEl.locale
+      : M.options.locale;
+  },
+  onAdd: function (map) {
+    // customize locate control to focus map after start/stop, so that
+    // featureIndexOverlay is correctly displayed
+    Control.CustomLocate = LocateControl.extend({
+      start: function () {
+        LocateControl.prototype.start.call(this);
+        map.getContainer().focus();
+      },
+      stop: function () {
+        LocateControl.prototype.stop.call(this);
+        map.getContainer().focus();
+      }
+    });
+    let locale = this._getLocale(map);
+
+    this.locateControl = new Control.CustomLocate({
+      showPopup: false,
+      strings: {
+        title: locale.btnLocTrackOff
+      },
+      position: this.options.position,
+      locateOptions: {
+        maxZoom: 16
+      }
+    }).addTo(map);
+
+    var container = this.locateControl._container;
+    var button = this.locateControl;
+    var observer = new MutationObserver(function (mutations) {
+      if (
+        container.classList.contains('active') &&
+        container.classList.contains('following')
+      ) {
+        container.firstChild.title = locale.btnLocTrackOn;
+        button._marker.bindTooltip(locale.btnMyLocTrackOn, {
+          permanent: true
+        });
+      } else if (container.classList.contains('active')) {
+        container.firstChild.title = locale.btnLocTrackLastKnown;
+        button._marker.bindTooltip(locale.btnMyLastKnownLocTrackOn);
+      } else {
+        container.firstChild.title = locale.btnLocTrackOff;
+      }
+    });
+    var observerConfig = { attributes: true, attributeFilter: ['class'] };
+    observer.observe(container, observerConfig);
+
+    return container;
+  },
+
+  stop: function () {
+    return this.locateControl.stop();
+  }
+});
+
+export var geolocationButton = function (options) {
+  return new GeolocationButton(options);
+};

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

@@ -0,0 +1,212 @@
+import { Control, DomEvent, DomUtil, setOptions, stamp } from 'leaflet';
+
+// Refactored LayerControl to remove global L dependency
+export var LayerControl = Control.Layers.extend({
+  options: {
+    autoZIndex: false,
+    sortLayers: true,
+    sortFunction: function (layerA, layerB) {
+      return layerA.options.zIndex < layerB.options.zIndex
+        ? -1
+        : layerA.options.zIndex > layerB.options.zIndex
+        ? 1
+        : 0;
+    }
+  },
+  initialize: function (overlays, options) {
+    setOptions(this, options);
+
+    // the _layers array contains objects like {layer: layer, name: "name", overlay: true}
+    // the array index is the id of the layer returned by stamp(layer) which I guess is a unique hash
+    this._layerControlInputs = [];
+    this._layers = [];
+    this._lastZIndex = 0;
+    this._handlingClick = false;
+
+    for (var i in overlays) {
+      this._addLayer(overlays[i], i, true);
+    }
+  },
+  onAdd: function () {
+    this._initLayout();
+    // Adding event on layer control button
+    DomEvent.on(
+      this._container.getElementsByTagName('a')[0],
+      'keydown',
+      this._focusFirstLayer,
+      this._container
+    );
+    DomEvent.on(
+      this._container,
+      'contextmenu',
+      this._preventDefaultContextMenu,
+      this
+    );
+    this._update();
+    if (this._layers.length < 1 && !this._map._showControls) {
+      this._container.setAttribute('hidden', '');
+    } else {
+      this._map._showControls = true;
+    }
+    return this._container;
+  },
+  onRemove: function (map) {
+    DomEvent.off(
+      this._container.getElementsByTagName('a')[0],
+      'keydown',
+      this._focusFirstLayer,
+      this._container
+    );
+  },
+  addOrUpdateOverlay: function (layer, name) {
+    var alreadyThere = false;
+    for (var i = 0; i < this._layers.length; i++) {
+      if (this._layers[i].layer === layer) {
+        alreadyThere = true;
+        this._layers[i].name = name;
+        // replace the controls with updated controls if necessary.
+        break;
+      }
+    }
+    if (!alreadyThere) {
+      this.addOverlay(layer, name);
+    }
+    if (this._layers.length > 0) {
+      this._container.removeAttribute('hidden');
+      this._map._showControls = true;
+    }
+    return this._map ? this._update() : this;
+  },
+  removeLayer: function (layer) {
+    Control.Layers.prototype.removeLayer.call(this, layer);
+    if (this._layers.length === 0) {
+      this._container.setAttribute('hidden', '');
+    }
+  },
+
+  _checkDisabledLayers: function () {},
+
+  // focus the first layer in the layer control when enter is pressed
+  _focusFirstLayer: function (e) {
+    if (
+      e.key === 'Enter' &&
+      this.className ===
+        'leaflet-control-layers leaflet-control leaflet-control-layers-expanded'
+    ) {
+      var elem =
+        this.children[1].children[2].children[0].children[0].children[0]
+          .children[0];
+      if (elem) setTimeout(() => elem.focus(), 0);
+    }
+  },
+
+  // imported from leaflet with slight modifications
+  // for layerControl ordering based on zIndex
+  _update: function () {
+    if (!this._container) {
+      return this;
+    }
+
+    DomUtil.empty(this._baseLayersList);
+    DomUtil.empty(this._overlaysList);
+
+    this._layerControlInputs = [];
+    var baseLayersPresent,
+      overlaysPresent,
+      i,
+      obj,
+      baseLayersCount = 0;
+
+    // <----------- MODIFICATION from the default _update method
+    // sort the layercontrol layers object based on the zIndex
+    // provided by MapLayer
+    if (this.options.sortLayers) {
+      this._layers.sort((a, b) =>
+        this.options.sortFunction(a.layer, b.layer, a.name, b.name)
+      );
+    }
+
+    for (i = 0; i < this._layers.length; i++) {
+      obj = this._layers[i];
+      this._addItem(obj);
+      overlaysPresent = overlaysPresent || obj.overlay;
+      baseLayersPresent = baseLayersPresent || !obj.overlay;
+      baseLayersCount += !obj.overlay ? 1 : 0;
+    }
+
+    // Hide base layers section if there's only one layer.
+    if (this.options.hideSingleBase) {
+      baseLayersPresent = baseLayersPresent && baseLayersCount > 1;
+      this._baseLayersList.style.display = baseLayersPresent ? '' : 'none';
+    }
+
+    this._separator.style.display =
+      overlaysPresent && baseLayersPresent ? '' : 'none';
+
+    return this;
+  },
+
+  _addItem: function (obj) {
+    var layercontrols = obj.layer._layerEl._layerControlHTML;
+    // the input is required by Leaflet...
+    obj.input = layercontrols.querySelector(
+      'input.leaflet-control-layers-selector'
+    );
+
+    this._layerControlInputs.push(obj.input);
+    obj.input.layerId = stamp(obj.layer);
+
+    this._overlaysList.appendChild(layercontrols);
+    return layercontrols;
+  },
+
+  //overrides collapse and conditionally collapses the panel
+  collapse: function (e) {
+    // if layer control is not expanded, return
+    if (!this._container.className.includes('expanded')) {
+      return;
+    }
+    // return if layer contextmenu is still open
+    if (
+      !this._map.contextMenu._extentLayerMenu.hidden ||
+      !this._map.contextMenu._layerMenu.hidden
+    ) {
+      return;
+    }
+    if (
+      e.target.tagName === 'SELECT' ||
+      (e.relatedTarget &&
+        e.relatedTarget.parentElement &&
+        (e.relatedTarget.className === 'mapml-contextmenu mapml-layer-menu' ||
+          e.relatedTarget.parentElement.className ===
+            'mapml-contextmenu mapml-layer-menu')) ||
+      (this._map && this._map.contextMenu._layerMenu.style.display === 'block')
+    )
+      return this;
+
+    DomUtil.removeClass(this._container, 'leaflet-control-layers-expanded');
+    if (e.originalEvent?.pointerType === 'touch') {
+      this._container._isExpanded = false;
+    }
+    return this;
+  },
+  _preventDefaultContextMenu: function (e) {
+    let latlng = this._map.mouseEventToLatLng(e);
+    let containerPoint = this._map.mouseEventToContainerPoint(e);
+    e.preventDefault();
+    // for touch devices, when the layer control is not expanded,
+    // the layer context menu should not show on map
+    if (!this._container._isExpanded && e.pointerType === 'touch') {
+      this._container._isExpanded = true;
+      return;
+    }
+    this._map.fire('contextmenu', {
+      originalEvent: e,
+      containerPoint: containerPoint,
+      latlng: latlng
+    });
+  }
+});
+export var layerControl = function (layers, options) {
+  return new LayerControl(layers, options);
+};

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

@@ -0,0 +1,75 @@
+import { Control, DomUtil, DomEvent } from 'leaflet';
+
+export var ReloadButton = 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);
+    let container = DomUtil.create('div', 'mapml-reload-button leaflet-bar');
+
+    let link = DomUtil.create('button', 'mapml-reload-button', container);
+    link.innerHTML = "<span aria-hidden='true'>&#x021BA</span>";
+    link.title = locale.cmReload;
+    link.setAttribute('type', 'button');
+    link.classList.add('mapml-button');
+    link.setAttribute('aria-label', 'Reload');
+
+    DomEvent.disableClickPropagation(link);
+    DomEvent.on(link, 'click', DomEvent.stop);
+    DomEvent.on(link, 'click', this._goReload, this);
+
+    this._reloadButton = link;
+
+    this._updateDisabled();
+    map.on('moveend', this._updateDisabled, this);
+
+    return container;
+  },
+
+  onRemove: function (map) {
+    map.off('moveend', this._updateDisabled, this);
+  },
+
+  disable: function () {
+    this._disabled = true;
+    this._updateDisabled();
+    return this;
+  },
+
+  enable: function () {
+    this._disabled = false;
+    this._updateDisabled();
+    return this;
+  },
+
+  _goReload: function (e) {
+    if (!this._disabled && this._map.options.mapEl._history.length > 1) {
+      this._map.options.mapEl.reload();
+    }
+  },
+
+  _updateDisabled: function () {
+    setTimeout(() => {
+      DomUtil.removeClass(this._reloadButton, 'leaflet-disabled');
+      this._reloadButton.setAttribute('aria-disabled', 'false');
+
+      if (
+        this._map &&
+        (this._disabled || this._map.options.mapEl._history.length <= 1)
+      ) {
+        DomUtil.addClass(this._reloadButton, 'leaflet-disabled');
+        this._reloadButton.setAttribute('aria-disabled', 'true');
+      }
+    }, 0);
+  }
+});
+
+export var reloadButton = function (options) {
+  return new ReloadButton(options);
+};