Place templated image layer at at (0,0) of CS when add it to map (#761)

* fix issue#759

* small fix

* fix misplacement and duplication bug

* add a test

* remove unnecessary codes, change way to test

* continue removing unnecessary codes

* Linting

---------

Co-authored-by: Peter Rushforth <peter.rushforth@gmail.com>

src/mapml/layers/TemplatedImageLayer.js

@@ -13,7 +13,8 @@ export var TemplatedImageLayer =  L.Layer.extend({
     },
     getEvents: function () {
         var events = {
-            moveend: this._onMoveEnd
+            moveend: this._onMoveEnd,
+            zoomstart: this._clearLayer
         };
         return events;
     },
@@ -66,9 +67,12 @@ export var TemplatedImageLayer =  L.Layer.extend({
 
         if (zoom % step !== 0) steppedZoom = Math.floor(zoom / step) * step;
         let bounds = this._map.getPixelBounds(this._map.getCenter(), steppedZoom);
-        this._addImage(bounds, steppedZoom, L.point(0,0));
         this._pixelOrigins = {};
         this._pixelOrigins[steppedZoom] = bounds.min;
+        // if the map is panned before the new image layer is added,
+        // the location that the layer should be added to is no longer (0,0) but need to be calculated
+        let loc = this._map.getPixelBounds().min.subtract(this._map.getPixelOrigin());
+        this._addImage(bounds, steppedZoom, loc);
         if(zoom !== steppedZoom) {
             this._scaleImage(bounds, zoom);
         }
@@ -81,7 +85,7 @@ export var TemplatedImageLayer =  L.Layer.extend({
         let previous = history[history.length - 2];
         if(!previous) previous = current;
         let step = this._template.step;
-        let steppedZoom =   Math.floor(mapZoom / step) * step;
+        let steppedZoom = Math.floor(mapZoom / step) * step;
         let bounds = this._map.getPixelBounds(this._map.getCenter(), steppedZoom);
         //Zooming from one step increment into a lower one
         if((step !== "1") && ((mapZoom + 1) % step === 0) &&
@@ -93,18 +97,19 @@ export var TemplatedImageLayer =  L.Layer.extend({
             this._imageOverlay._overlayToRemove = this._imageOverlay._url;
             if (current.zoom !== previous.zoom) {
                 //Zoomed from within one step increment into another
-                if(steppedZoom !== Math.floor(previous.zoom / step) * step){
-                    this._addImage(bounds, steppedZoom, L.point(0,0));
-                    this._pixelOrigins[steppedZoom] = bounds.min;
-                }
+                this._addImage(bounds, steppedZoom, L.point(0,0));
+                this._pixelOrigins[steppedZoom] = bounds.min;
                 this._scaleImage(bounds, mapZoom);
             } else {
+                // Panning within a step increment
                 let pixelOrigin = this._pixelOrigins[steppedZoom];
                 let loc = bounds.min.subtract(pixelOrigin);
                 if(this.getImageUrl(bounds, steppedZoom) === this._imageOverlay._url) return;
                 this._addImage(bounds, steppedZoom, loc);
                 this._scaleImage(bounds, mapZoom);
             }
+        // Zooming from one step decrement into a higher one
+        // OR panning when mapZoom % step === 0
         } else {
             let mapBounds = M.pixelToPCRSBounds(this._map.getPixelBounds(),mapZoom,this._map.options.projection);
             this.isVisible = mapZoom <= this.zoomBounds.maxZoom && mapZoom >= this.zoomBounds.minZoom &&
@@ -220,7 +225,7 @@ export var TemplatedImageLayer =  L.Layer.extend({
         }
       }
       return extentVarNames;
-    },
+    }
 });
 export var templatedImageLayer = function(template, options) {
     return new TemplatedImageLayer(template, options);

test/e2e/layers/templatedImageLayer.test.js

@@ -28,4 +28,37 @@ test.describe("Playwright templatedImage Layer Tests", () => {
   isVisible.test("templatedImageLayer.html", 2, 1);
   zoomLimit.test("templatedImageLayer.html", 1, 0);
   extentProperty.test("templatedImageLayer.html", expectedPCRS, expectedGCRS);
-});
+
+  let page;
+  let context;
+  test.beforeAll(async () => {
+    context = await chromium.launchPersistentContext('', {slowMo: 250});
+    page = await context.newPage();
+    await page.goto("templatedImageLayer.html");
+  });
+
+  test("Templated image layer position when turn it off then on", async () => {
+    await page.click("body > map");
+    for (let i = 0; i < 5; ++i) {
+      await page.keyboard.press("ArrowUp");
+      await page.waitForTimeout(200);
+    }
+    await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div");
+    await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > input");
+    await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > input");
+    await page.waitForTimeout(500);
+    const imagePos = await page.$eval(
+      "body > map",
+      (map) => {
+        let layers = map._map._layers;
+        let keys = Object.keys(layers);
+        return layers[keys[keys.length - 1]]._location;
+      }
+    );
+    const expectedPos = {
+      x: 0,
+      y: -400
+    };
+    expect(imagePos).toEqual(expectedPos);
+  });
+});