Fix tile clean up in MapTileLayer esp for CBMTILE <map-tile>s

Author: Peter Rushforth

src/mapml/layers/MapTileLayer.js

@@ -37,6 +37,16 @@ export var MapTileLayer = GridLayer.extend({
     //    this.zoomBounds = this._computeZoomBounds();
   },
 
+  getEvents: function () {
+    const events = GridLayer.prototype.getEvents
+      ? 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
@@ -46,8 +56,25 @@ export var MapTileLayer = GridLayer.extend({
     // Clean up pending tiles
     this._pendingTiles = {};
     DomUtil.remove(this._container);
+    GridLayer.prototype.onRemove.call(this, map);
   },
 
+  _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