@prushforth/map 1.0.0-preview.1

package/dist/components/p-EYVT9Efh.js

@@ -0,0 +1 @@
+function e(e){let t=e.link||e.styleElement;if(void 0===t)return;let n=(e=>{const t=Array.from(this._container.querySelectorAll(':scope > style, :scope > link[rel="stylesheet"]'));if(0===t.length){const e=this._container.lastChild;if(!e)return{position:"afterbegin",node:this._container};const t="SVG"===e.nodeName,n=e.classList?.contains("mapml-vector-container")||e.classList?.contains("mapml-extentlayer-container");return t||n?{position:"beforebegin",node:e}:{position:"afterend",node:e}}const n=e.mapStyle||e.mapLink;for(let e=0;e<t.length;e++){const o=t[e],i=o.mapStyle||o.mapLink;if(i&&n.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_FOLLOWING)return{position:"beforebegin",node:o}}return{position:"afterend",node:t.at(-1)}})(t);n.node.insertAdjacentElement(n.position,t)}export{e as r}

package/dist/components/p-gwC_yeRa.js

@@ -0,0 +1 @@
+import{l as t,U as i}from"./p-CwRxGZga.js";var s=t.GridLayer.extend({initialize:function(i){t.GridLayer.prototype.initialize.call(this,i),this._mapTiles=i.mapTiles||[],this._tileMap={},this._pendingTiles={},this._buildTileMap(),this._container=t.DomUtil.create("div","leaflet-layer"),i.zIndex&&(this._container.style.zIndex=i.zIndex),t.DomUtil.addClass(this._container,"mapml-static-tile-container")},getEvents:function(){const i=t.GridLayer.prototype.getEvents?t.GridLayer.prototype.getEvents.call(this):{};return i.zoomend=this._handleZoomChange,i},onAdd:function(i){this.options.pane.appendChild(this._container),t.GridLayer.prototype.onAdd.call(this,i)},onRemove:function(){this._pendingTiles={},t.DomUtil.remove(this._container)},setZIndex:function(t){return this.options.zIndex=t,this._updateZIndex(),this},_updateZIndex:function(){this._container&&null!=this.options.zIndex&&(this._container.style.zIndex=this.options.zIndex)},_handleZoomChange:function(){const t=this._map.getZoom();for(const i in this._tiles)this._keyToTileCoords(i).z!==t&&this._removeTile(i)},addMapTile:function(t){this._mapTiles.includes(t)||(this._mapTiles.push(t),this._addToTileMap(t),this._updateBounds(),this._map&&this.redraw())},removeMapTile:function(t){const i=this._mapTiles.indexOf(t);-1!==i&&(this._mapTiles.splice(i,1),this._removeFromTileMap(t),this._updateBounds(),this._map&&this.redraw())},removeMapTileAt:function(t,i){const s=this._mapTiles.indexOf(t);-1!==s&&(this._mapTiles.splice(s,1),this._removeFromTileMapAt(i),t._tileDiv&&(t._tileDiv._mapTile=null,t._tileDiv=null),this._updateBounds(),this._map&&this.redraw())},isVisible:function(){if(!this._map)return!1;this.layerBounds||this._updateBounds();let t=this._map,s=t.getZoom(),n=this.zoomBounds,o=this.layerBounds;return s<=n.maxZoom&&s>=n.minZoom&&this._mapTiles&&o&&o.overlaps(i.pixelToPCRSBounds(t.getPixelBounds(),s,t.options.projection))},createTile:function(i,s){const n=this._tileCoordsToKey(i),o=this.getTileSize(),e=document.createElement("div");e.setAttribute("col",i.x),e.setAttribute("row",i.y),e.setAttribute("zoom",i.z),t.DomUtil.addClass(e,"leaflet-tile"),e.style.width=o.x+"px",e.style.height=o.y+"px";const h=this._tileMap[n];if(h){const i=document.createElement("img");i.src=h.src,i.width=o.x,i.height=o.y,i.alt="",i.setAttribute("role","presentation"),e._mapTile=h,h._tileDiv=e,e.appendChild(i),t.DomUtil.addClass(e,"leaflet-tile-loaded"),s(null,e)}else this._pendingTiles||(this._pendingTiles={}),this._pendingTiles[n]={element:e,done:s};return e},_buildTileMap:function(){this._tileMap={};for(const t of this._mapTiles)this._addToTileMap(t)},_addToTileMap:function(i){const s=`${i.col}:${i.row}:${i.zoom}`;if(this._tileMap[s]=i,this._pendingTiles&&this._pendingTiles[s]){const n=this._pendingTiles[s],o=n.element,e=n.done,h=this.getTileSize(),l=document.createElement("img");l.src=i.src,l.width=h.x,l.height=h.y,l.alt="",l.setAttribute("role","presentation"),o._mapTile=i,i._tileDiv=o,o.appendChild(l),t.DomUtil.addClass(o,"leaflet-tile-loaded"),e&&e(null,o),delete this._pendingTiles[s]}},_removeFromTileMap:function(t){const i=`${t.col}:${t.row}:${t.zoom}`;delete this._tileMap[i],t._tileDiv&&(t._tileDiv._mapTile=null,t._tileDiv=null),this._pendingTiles&&this._pendingTiles[i]&&delete this._pendingTiles[i]},_removeFromTileMapAt:function(t){const i=`${t.col}:${t.row}:${t.zoom}`;delete this._tileMap[i],this._pendingTiles&&this._pendingTiles[i]&&delete this._pendingTiles[i]},_updateBounds:function(){this.layerBounds=this._computeLayerBounds(),this.zoomBounds=this._computeZoomBounds()},_computeLayerBounds:function(){if(0===this._mapTiles.length)return t.bounds([0,0],[0,0]);const s={},n=this.options.projection,o=M[n].options.crs.tile.bounds.max.x;for(const t of this._mapTiles){const i=t.zoom;s[i]||(s[i]=[]),s[i].push({x:t.col,y:t.row,z:i})}const e={};for(const h in s){const l=s[h];let c=null;for(const i of l){const s=i.x*o,n=i.y*o;c?(c.extend(t.point(s,n)),c.extend(t.point(s+o,n+o))):c=t.bounds(t.point(s,n),t.point(s+o,n+o))}c&&(e[h]=i.pixelToPCRSBounds(c,parseInt(h),n))}let h=null;for(const t in e)h?(h.extend(e[t].min),h.extend(e[t].max)):h=e[t].pad(0);return h||t.bounds([0,0],[0,0])},_computeZoomBounds:function(){const t={minZoom:1/0,maxZoom:-1/0,minNativeZoom:1/0,maxNativeZoom:-1/0};if(0===this._mapTiles.length)return{minZoom:0,maxZoom:22,minNativeZoom:0,maxNativeZoom:22};for(const i of this._mapTiles){const s=i.zoom;t.minNativeZoom=Math.min(t.minNativeZoom,s),t.maxNativeZoom=Math.max(t.maxNativeZoom,s)}return t.minZoom=t.minNativeZoom,t.maxZoom=t.maxNativeZoom,t}}),n=function(t){return new s(t)};export{s as M,n as m}

package/dist/esm/AttributionButton-CfaoSLCu.js

@@ -0,0 +1,103 @@
+import { l as leafletSrcExports } from './index-BUsJ7i5g.js';
+
+var AttributionButton = leafletSrcExports.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 = leafletSrcExports.DomUtil.create('details', 'leaflet-control-attribution');
+    leafletSrcExports.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}`);
+  }
+});
+
+leafletSrcExports.Map.mergeOptions({
+  attributionControl: false,
+  toggleableAttributionControl: true
+});
+
+leafletSrcExports.Map.addInitHook(function () {
+  if (this.options.toggleableAttributionControl) {
+    attributionButton({ mapEl: this.options.mapEl }).addTo(this);
+  }
+});
+
+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);
+};
+
+export { AttributionButton, attributionButton };

package/dist/esm/MapTileLayer-DvC_iOIS.js

@@ -0,0 +1,451 @@
+import { l as leafletSrcExports, U as Util } from './index-BUsJ7i5g.js';
+
+/**
+ * Leaflet layer for handling map-tile elements
+ * Extends GridLayer to create tiles based on map-tile elements
+ *
+ * Similar in intent to MapFeatureLayer, which is a receiver for
+ * map-feature elements' leaflet layer object
+ *
+ * This layer will be inserted into the LayerGroup hosted by the <map-link> or
+ * <map-layer> immediately after creation, so that its index within the _layers array of
+ * that LayerGroup will be equal to its z-index within the LayerGroup's container
+ *
+ * <map-tile row="10" col="12" src="url1"></map-tile>  LayerGroup._layers[0] <- each *set* of adjacent tiles
+ * <map-tile row="11" col="12" src="url2"></map-tile>  LayerGroup._layers[0] <- is a *single* MapTileLayer
+ * <map-extent units="OSMTILE" checked hidden> LayerGroup._layers[1] *each* <map-extent> is a LayerGroup of Templated*Layer.js
+ * <map-feature id="a"> LayerGroup._layers[2] <- each *set* of adjacent features
+ * <map-feature id="b"> LayerGroup._layers[2] <- is a single MapFeatureLayer FeatureGroup
+ * <map-tile row="10" col="12" src="url3"></map-tile>  LayerGroup._layers[3]
+ * <map-tile row="11" col="12" src="url4"></map-tile>  LayerGroup._layers[3]
+ * <map-feature id="c"> LayerGroup._layers[4]
+ * <map-feature id="d"> LayerGroup._layers[4]
+ * and so on
+ */
+var MapTileLayer = leafletSrcExports.GridLayer.extend({
+  initialize: function (options) {
+    leafletSrcExports.GridLayer.prototype.initialize.call(this, options);
+    this._mapTiles = options.mapTiles || [];
+    this._tileMap = {};
+    this._pendingTiles = {};
+    this._buildTileMap();
+    this._container = leafletSrcExports.DomUtil.create('div', 'leaflet-layer');
+    if (options.zIndex) {
+      this._container.style.zIndex = options.zIndex;
+    }
+    leafletSrcExports.DomUtil.addClass(this._container, 'mapml-static-tile-container');
+    // Store bounds for visibility checks
+    //    this.layerBounds = this._computeLayerBounds();
+    //    this.zoomBounds = this._computeZoomBounds();
+  },
+
+  getEvents: function () {
+    const events = leafletSrcExports.GridLayer.prototype.getEvents
+      ? leafletSrcExports.GridLayer.prototype.getEvents.call(this)
+      : {};
+
+    // Add our custom zoom change handler
+    events.zoomend = this._handleZoomChange;
+
+    return events;
+  },
+  onAdd: function (map) {
+    this.options.pane.appendChild(this._container);
+    // Call the parent method
+    leafletSrcExports.GridLayer.prototype.onAdd.call(this, map);
+  },
+  onRemove: function (map) {
+    // Clean up pending tiles
+    this._pendingTiles = {};
+    // remove _container from the dom, but don't delete it
+    leafletSrcExports.DomUtil.remove(this._container);
+  },
+  setZIndex: function (zIndex) {
+    this.options.zIndex = zIndex;
+    this._updateZIndex();
+
+    return this;
+  },
+  _updateZIndex: function () {
+    if (
+      this._container &&
+      this.options.zIndex !== undefined &&
+      this.options.zIndex !== null
+    ) {
+      this._container.style.zIndex = this.options.zIndex;
+    }
+  },
+
+  _handleZoomChange: function () {
+    // this is necessary for CBMTILE in particular, I think because
+    // Leaflet relies on Web Mercator powers of 2 inter-zoom tile relations
+    // to calculate what tiles to clean up/remove.  CBMTILE doesn't have that
+    // relationship between zoom levels /tiles.
+    //
+    // Force removal of all tiles that don't match current zoom
+    const currentZoom = this._map.getZoom();
+
+    for (const key in this._tiles) {
+      const coords = this._keyToTileCoords(key);
+      if (coords.z !== currentZoom) {
+        this._removeTile(key);
+      }
+    }
+  },
+  /**
+   * Adds a map-tile element to the layer
+   * @param {HTMLTileElement} mapTile - The map-tile element to add
+   */
+  addMapTile: function (mapTile) {
+    if (!this._mapTiles.includes(mapTile)) {
+      this._mapTiles.push(mapTile);
+      this._addToTileMap(mapTile);
+      this._updateBounds();
+      if (this._map) {
+        this.redraw();
+      }
+    }
+  },
+
+  /**
+   * Removes a map-tile element from the layer
+   * @param {HTMLTileElement} mapTile - The map-tile element to remove
+   */
+  removeMapTile: function (mapTile) {
+    const index = this._mapTiles.indexOf(mapTile);
+    if (index !== -1) {
+      this._mapTiles.splice(index, 1);
+      this._removeFromTileMap(mapTile);
+      this._updateBounds();
+      if (this._map) {
+        this.redraw();
+      }
+    }
+  },
+
+  /**
+   * Removes a map-tile element from the layer using specific coordinates
+   * Used when tile coordinates have changed and we need to remove based on old coordinates
+   * @param {HTMLTileElement} mapTile - The map-tile element to remove
+   * @param {Object} coords - The coordinates to use for removal {col, row, zoom}
+   */
+  removeMapTileAt: function (mapTile, coords) {
+    const index = this._mapTiles.indexOf(mapTile);
+    if (index !== -1) {
+      this._mapTiles.splice(index, 1);
+      this._removeFromTileMapAt(coords);
+      // Clean up bidirectional links using current tile reference
+      if (mapTile._tileDiv) {
+        mapTile._tileDiv._mapTile = null;
+        mapTile._tileDiv = null;
+      }
+      this._updateBounds();
+      if (this._map) {
+        this.redraw();
+      }
+    }
+  },
+
+  /**
+   * Checks if the layer is currently visible on the map
+   * @returns {boolean} - True if the layer is visible, false otherwise
+   */
+  isVisible: function () {
+    if (!this._map) return false;
+    if (!this.layerBounds) this._updateBounds();
+    // approach copied/refactored from MapFeatureLayer
+    let map = this._map,
+      mapZoom = map.getZoom(),
+      zoomBounds = this.zoomBounds,
+      layerBounds = this.layerBounds,
+      withinZoom =
+        mapZoom <= zoomBounds.maxZoom && mapZoom >= zoomBounds.minZoom;
+    return (
+      withinZoom &&
+      this._mapTiles &&
+      layerBounds &&
+      layerBounds.overlaps(
+        Util.pixelToPCRSBounds(
+          map.getPixelBounds(),
+          mapZoom,
+          map.options.projection
+        )
+      )
+    );
+  },
+
+  /**
+   * Overrides GridLayer createTile to use map-tile elements
+   * @param {Object} coords - Tile coordinates
+   * @param {Function} done - Callback to be called when the tile is ready, with error and tile element params
+   * @returns {HTMLElement} - The created tile element
+   */
+  createTile: function (coords, done) {
+    const tileKey = this._tileCoordsToKey(coords);
+    const tileSize = this.getTileSize();
+
+    // Create container element
+    const tileElement = document.createElement('div');
+    tileElement.setAttribute('col', coords.x);
+    tileElement.setAttribute('row', coords.y);
+    tileElement.setAttribute('zoom', coords.z);
+    leafletSrcExports.DomUtil.addClass(tileElement, 'leaflet-tile');
+
+    // Set size
+    tileElement.style.width = tileSize.x + 'px';
+    tileElement.style.height = tileSize.y + 'px';
+
+    // Find matching tile in our map
+    const matchingTile = this._tileMap[tileKey];
+
+    if (matchingTile) {
+      // Create an image element with the src from the matching map-tile
+      const img = document.createElement('img');
+      img.src = matchingTile.src;
+      img.width = tileSize.x;
+      img.height = tileSize.y;
+      img.alt = '';
+      img.setAttribute('role', 'presentation');
+      // bidirectional link map-tile element and rendered div
+      tileElement._mapTile = matchingTile;
+      matchingTile._tileDiv = tileElement;
+
+      tileElement.appendChild(img);
+
+      // Add the loaded class manually to ensure tile is visible
+      leafletSrcExports.DomUtil.addClass(tileElement, 'leaflet-tile-loaded');
+
+      // Call the done callback to signal that the tile is ready
+      done(null, tileElement);
+    } else {
+      // The tile might be added later, register a pending tile
+      if (!this._pendingTiles) {
+        this._pendingTiles = {};
+      }
+
+      // Store the tile element and done callback for later update
+      this._pendingTiles[tileKey] = {
+        element: tileElement,
+        done: done
+      };
+
+      // Don't call done yet - we'll call it when the map-tile is added
+    }
+
+    return tileElement;
+  },
+
+  /**
+   * Builds the tile map from the current map-tile elements
+   * @private
+   */
+  _buildTileMap: function () {
+    this._tileMap = {};
+    for (const mapTile of this._mapTiles) {
+      this._addToTileMap(mapTile);
+    }
+  },
+
+  /**
+   * Adds a map-tile element to the tile map
+   * @param {HTMLTileElement} mapTile - The map-tile element to add
+   * @private
+   */
+  _addToTileMap: function (mapTile) {
+    const tileKey = `${mapTile.col}:${mapTile.row}:${mapTile.zoom}`;
+    this._tileMap[tileKey] = mapTile;
+
+    // Check if this tile was requested but not available at that time
+    if (this._pendingTiles && this._pendingTiles[tileKey]) {
+      const pendingTile = this._pendingTiles[tileKey];
+      const tileElement = pendingTile.element;
+      const doneCallback = pendingTile.done;
+
+      // Create and append the image to the tile
+      const tileSize = this.getTileSize();
+      const img = document.createElement('img');
+      img.src = mapTile.src;
+      img.width = tileSize.x;
+      img.height = tileSize.y;
+      img.alt = '';
+      img.setAttribute('role', 'presentation');
+
+      // bidirectional link map-tile element and rendered div
+      tileElement._mapTile = mapTile;
+      mapTile._tileDiv = tileElement;
+
+      tileElement.appendChild(img);
+
+      // Add the loaded class manually to ensure tile is visible
+      leafletSrcExports.DomUtil.addClass(tileElement, 'leaflet-tile-loaded');
+
+      // Call the done callback to signal that the tile is now ready
+      if (doneCallback) {
+        doneCallback(null, tileElement);
+      }
+
+      // Remove from pending tiles
+      delete this._pendingTiles[tileKey];
+    }
+  },
+  /**
+   * Removes a map-tile element from the tile map
+   * @param {HTMLTileElement} mapTile - The map-tile element to remove
+   * @private
+   */
+  _removeFromTileMap: function (mapTile) {
+    const tileKey = `${mapTile.col}:${mapTile.row}:${mapTile.zoom}`;
+    delete this._tileMap[tileKey];
+
+    // Clean up bidirectional links
+    if (mapTile._tileDiv) {
+      mapTile._tileDiv._mapTile = null;
+      mapTile._tileDiv = null;
+    }
+
+    // Also remove from pending tiles if it exists there
+    if (this._pendingTiles && this._pendingTiles[tileKey]) {
+      delete this._pendingTiles[tileKey];
+    }
+  },
+
+  /**
+   * Removes a tile from the tile map using specific coordinates
+   * @param {Object} coords - The coordinates {col, row, zoom}
+   * @private
+   */
+  _removeFromTileMapAt: function (coords) {
+    const tileKey = `${coords.col}:${coords.row}:${coords.zoom}`;
+    delete this._tileMap[tileKey];
+
+    // Also remove from pending tiles if it exists there
+    if (this._pendingTiles && this._pendingTiles[tileKey]) {
+      delete this._pendingTiles[tileKey];
+    }
+  },
+
+  /**
+   * Updates layer bounds when tiles are added or removed
+   * @private
+   */
+  _updateBounds: function () {
+    this.layerBounds = this._computeLayerBounds();
+    this.zoomBounds = this._computeZoomBounds();
+  },
+
+  /**
+   * Computes the layer bounds from all map-tile elements
+   * @returns {L.Bounds} - The computed layer bounds
+   * @private
+   */
+  _computeLayerBounds: function () {
+    if (this._mapTiles.length === 0) {
+      return leafletSrcExports.bounds([0, 0], [0, 0]);
+    }
+
+    const tilesByZoom = {};
+    const projection = this.options.projection;
+    const tileSize = M[projection].options.crs.tile.bounds.max.x;
+
+    // Group tiles by zoom
+    for (const mapTile of this._mapTiles) {
+      const zoom = mapTile.zoom;
+
+      if (!tilesByZoom[zoom]) {
+        tilesByZoom[zoom] = [];
+      }
+
+      tilesByZoom[zoom].push({
+        x: mapTile.col,
+        y: mapTile.row,
+        z: zoom
+      });
+    }
+
+    // Calculate bounds for each zoom level
+    const layerBoundsByZoom = {};
+    for (const zoom in tilesByZoom) {
+      const tiles = tilesByZoom[zoom];
+      let pixelBounds = null;
+
+      for (const tile of tiles) {
+        const pixelX = tile.x * tileSize;
+        const pixelY = tile.y * tileSize;
+
+        if (!pixelBounds) {
+          pixelBounds = leafletSrcExports.bounds(
+            leafletSrcExports.point(pixelX, pixelY),
+            leafletSrcExports.point(pixelX + tileSize, pixelY + tileSize)
+          );
+        } else {
+          pixelBounds.extend(leafletSrcExports.point(pixelX, pixelY));
+          pixelBounds.extend(leafletSrcExports.point(pixelX + tileSize, pixelY + tileSize));
+        }
+      }
+
+      if (pixelBounds) {
+        layerBoundsByZoom[zoom] = Util.pixelToPCRSBounds(
+          pixelBounds,
+          parseInt(zoom),
+          projection
+        );
+      }
+    }
+
+    // Combine all zoom level bounds
+    let combinedBounds = null;
+    for (const zoom in layerBoundsByZoom) {
+      if (!combinedBounds) {
+        // makes a clone of the bounds, including methods
+        combinedBounds = layerBoundsByZoom[zoom].pad(0);
+      } else {
+        combinedBounds.extend(layerBoundsByZoom[zoom].min);
+        combinedBounds.extend(layerBoundsByZoom[zoom].max);
+      }
+    }
+
+    return combinedBounds || leafletSrcExports.bounds([0, 0], [0, 0]);
+  },
+
+  /**
+   * Computes zoom bounds from all map-tile elements
+   * @returns {Object} - The computed zoom bounds
+   * @private
+   */
+  _computeZoomBounds: function () {
+    const result = {
+      minZoom: Infinity,
+      maxZoom: -Infinity,
+      minNativeZoom: Infinity,
+      maxNativeZoom: -Infinity
+    };
+
+    if (this._mapTiles.length === 0) {
+      return {
+        minZoom: 0,
+        maxZoom: 22,
+        minNativeZoom: 0,
+        maxNativeZoom: 22
+      };
+    }
+
+    // Find min/max zoom from map-tile elements
+    for (const mapTile of this._mapTiles) {
+      const zoom = mapTile.zoom;
+      result.minNativeZoom = Math.min(result.minNativeZoom, zoom);
+      result.maxNativeZoom = Math.max(result.maxNativeZoom, zoom);
+    }
+
+    // Set min/max zoom based on native zoom
+    result.minZoom = result.minNativeZoom;
+    result.maxZoom = result.maxNativeZoom;
+
+    return result;
+  }
+});
+
+var mapTileLayer = function (options) {
+  return new MapTileLayer(options);
+};
+
+export { MapTileLayer as M, mapTileLayer as m };