Get rendering of map-tile kinda working.

Author: prushforth

src/map-tile.js

@@ -166,11 +166,12 @@ export class HTMLTileElement extends HTMLElement {
       // Create a new MapTileLayer
       this._tileLayer = mapTileLayer({
         projection: this.getMapEl()._map.options.projection,
-        mapTiles: [this],
-        opacity: 1
+        opacity: 1,
+        pane: parentElement._templatedLayer.getContainer()
       });
+      this._tileLayer.addMapTile(this);
 
-      // If there's a FeaturesTilesLayerGroup in the parentElement, add the layer to it
+      // add MapTileLayer to TemplatedFeaturesOrTilesLayerGroup of the parentElement
       if (
         parentElement._templatedLayer &&
         parentElement._templatedLayer.addLayer

src/mapml/layers/MapTileLayer.js

@@ -27,13 +27,26 @@ export var MapTileLayer = GridLayer.extend({
     GridLayer.prototype.initialize.call(this, options);
     this._mapTiles = options.mapTiles || [];
     this._tileMap = {};
+    this._pendingTiles = {};
     this._buildTileMap();
-
+    this._container = DomUtil.create('div', 'leaflet-layer');
+    DomUtil.addClass(this._container, 'mapml-static-tile-container');
     // Store bounds for visibility checks
     //    this.layerBounds = this._computeLayerBounds();
     //    this.zoomBounds = this._computeZoomBounds();
   },
 
+  onAdd: function (map) {
+    this.options.pane.appendChild(this._container);
+    // Call the parent method
+    GridLayer.prototype.onAdd.call(this, map);
+  },
+  onRemove: function (map) {
+    // Clean up pending tiles
+    this._pendingTiles = {};
+    DomUtil.remove(this._container);
+  },
+
   /**
    * Adds a map-tile element to the layer
    * @param {HTMLTileElement} mapTile - The map-tile element to add
@@ -91,14 +104,18 @@ export var MapTileLayer = GridLayer.extend({
   /**
    * 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) {
+  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);
     DomUtil.addClass(tileElement, 'leaflet-tile');
 
     // Set size
@@ -116,11 +133,30 @@ export var MapTileLayer = GridLayer.extend({
       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);
 
-      // This is needed for Leaflet to properly handle the tile
-      this._tileReady(coords, null, tileElement);
+      // Add the loaded class manually to ensure tile is visible
+      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;
@@ -145,8 +181,40 @@ export var MapTileLayer = GridLayer.extend({
   _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
+      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
@@ -155,6 +223,11 @@ export var MapTileLayer = GridLayer.extend({
   _removeFromTileMap: function (mapTile) {
     const tileKey = `${mapTile.col}:${mapTile.row}:${mapTile.zoom}`;
     delete this._tileMap[tileKey];
+
+    // Also remove from pending tiles if it exists there
+    if (this._pendingTiles && this._pendingTiles[tileKey]) {
+      delete this._pendingTiles[tileKey];
+    }
   },
 
   /**

src/mapml/layers/TemplatedFeaturesOrTilesLayerGroup.js

@@ -68,14 +68,16 @@ export var TemplatedFeaturesOrTilesLayerGroup = LayerGroup.extend({
   onRemove: function (map) {
     // Remove container from DOM, but not from this
     DomUtil.remove(this._container);
+    // should clean up the container
+    for (let child of this._container.children) {
+      DomUtil.remove(child);
+    }
 
     // Remove each layer from the map, but does not clearLayers
     LayerGroup.prototype.onRemove.call(this, map);
-
-    this.clearLayers();
-
-    // Clear reference to the map
-    this._map = null;
+  },
+  getContainer: function () {
+    return this._container;
   },
   getEvents: function () {
     var events = {