in progress work on map-tile testing

Author: prushforth

src/map-tile.js

@@ -17,6 +17,9 @@ export class HTMLTileElement extends HTMLElement {
     return +(this.hasAttribute('row') ? this.getAttribute('row') : 0);
   }
   set row(val) {
+    if (this.#hasConnected) {
+      return;
+    }
     var parsedVal = parseInt(val, 10);
     if (!isNaN(parsedVal)) {
       this.setAttribute('row', parsedVal);
@@ -26,6 +29,9 @@ export class HTMLTileElement extends HTMLElement {
     return +(this.hasAttribute('col') ? this.getAttribute('col') : 0);
   }
   set col(val) {
+    if (this.#hasConnected) {
+      return;
+    }
     var parsedVal = parseInt(val, 10);
     if (!isNaN(parsedVal)) {
       this.setAttribute('col', parsedVal);
@@ -58,6 +64,9 @@ export class HTMLTileElement extends HTMLElement {
     }
   }
   set zoom(val) {
+    if (this.#hasConnected) {
+      return;
+    }
     var parsedVal = parseInt(val, 10);
     if (!isNaN(parsedVal) && parsedVal >= 0 && parsedVal <= 25) {
       this.setAttribute('zoom', parsedVal);
@@ -170,10 +179,16 @@ export class HTMLTileElement extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (this.#hasConnected /* jshint ignore:line */) {
       switch (name) {
-        case 'src':
         case 'row':
         case 'col':
         case 'zoom':
+          // Prevent changes to row, col, and zoom after initialization
+          if (oldValue !== newValue) {
+            this.setAttribute(name, oldValue);
+            return;
+          }
+          break;
+        case 'src':
           if (oldValue !== newValue) {
             // If we've already calculated an extent, recalculate it
             if (this._extent) {
@@ -182,7 +197,7 @@ export class HTMLTileElement extends HTMLElement {
 
             // If this tile is connected to a tile layer, update it
             if (this._tileLayer) {
-              // Remove and re-add to update the tile's position
+              // For src changes, normal removal works since coordinates haven't changed
               this._tileLayer.removeMapTile(this);
               this._tileLayer.addMapTile(this);
             }

src/mapml/layers/MapTileLayer.js

@@ -102,7 +102,9 @@ export var MapTileLayer = GridLayer.extend({
       this._mapTiles.push(mapTile);
       this._addToTileMap(mapTile);
       this._updateBounds();
-      //      this.redraw();
+      if (this._map) {
+        this.redraw();
+      }
     }
   },
 
@@ -116,7 +118,32 @@ export var MapTileLayer = GridLayer.extend({
       this._mapTiles.splice(index, 1);
       this._removeFromTileMap(mapTile);
       this._updateBounds();
-      //      this.redraw();
+      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();
+      }
     }
   },
 
@@ -271,6 +298,27 @@ export var MapTileLayer = GridLayer.extend({
     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];