Maps4HTML · prushforth · Nov 10, 2020 · Oct 25, 2020 · Oct 27, 2020 · Oct 27, 2020
diff --git a/demo/painting.html b/demo/painting.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Painting Example</title>
+        <meta charset="UTF-8">
+            <script type="module" src="../dist/mapml-viewer.js"></script>
+         <style>
+           html {height: 100%} body,map {height: inherit} * {margin: 0;padding: 0;}
+        </style>
+    </head>
+    <body>
+        <mapml-viewer style="width: 600px;height:600px" projection="WGS84" zoom="0" lat="0" lon="0" controls>
+
+            <layer- label="Inline Countries" checked>
+                <meta name="zoom" content="min=0,max=4">
+                <extent units="WGS84">
+                    <input name="zoomLevel" type="zoom" value="1" min="0" max="4"/>
+
+                    <input name="row" type="location" axis="row" units="tilematrix" min="0" max="2"/>
+                    <input name="col" type="location" axis="column" units="tilematrix" min="0" max="2"/>
+
+                    <link tms rel="tile" tref="https://maps4html.org/TiledArt-Rousseau/TheBanksOfTheBièvreNearBicêtre/{zoomLevel}/{col}/{row}.png" />
+
+                </extent>
+            </layer->
+        </mapml-viewer>
+    </body>
+</html>
diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js
@@ -626,13 +626,14 @@ export var MapMLLayer = L.Layer.extend({
                         vcount=template.match(varNamesRe),
                         trel = (!t.hasAttribute('rel') || t.getAttribute('rel').toLowerCase() === 'tile') ? 'tile' : t.getAttribute('rel').toLowerCase(),
                         ttype = (!t.hasAttribute('type')? 'image/*':t.getAttribute('type').toLowerCase()),
-                        inputs = [];
+                        inputs = [],
+                        tms = t && t.hasAttribute("tms");
                         var zoomBounds = mapml.querySelector('meta[name=zoom]')?
                                           M.metaContentToObject(mapml.querySelector('meta[name=zoom]').getAttribute('content')):
                                           undefined;
                     while ((v = varNamesRe.exec(template)) !== null) {
                       var varName = v[1],
-                      inp = serverExtent.querySelector('input[name='+varName+'],select[name='+varName+']');
+                          inp = serverExtent.querySelector('input[name='+varName+'],select[name='+varName+']');
                       if (inp) {
                         inputs.push(inp);
                         includesZoom = includesZoom || inp.hasAttribute("type") && inp.getAttribute("type").toLowerCase() === "zoom";
@@ -690,7 +691,8 @@ export var MapMLLayer = L.Layer.extend({
                         type: ttype, 
                         values: inputs, 
                         zoomBounds:zoomBounds, 
-                        projection:serverExtent.getAttribute("units") || FALLBACK_PROJECTION
+                        projection:serverExtent.getAttribute("units") || FALLBACK_PROJECTION,
+                        tms:tms,
                       });
                     }
                   }

diff --git a/src/mapml/layers/TemplatedTileLayer.js b/src/mapml/layers/TemplatedTileLayer.js
@@ -15,6 +15,7 @@ export var TemplatedTileLayer = L.TileLayer.extend({
       this.layerBounds=inputData.bounds;
       this.isVisible = true;
       L.extend(options, this.zoomBounds);
+      options.tms = template.tms;
       L.setOptions(this, options);
       this._setUpTileTemplateVars(template);
 
@@ -455,6 +456,13 @@ export var TemplatedTileLayer = L.TileLayer.extend({
                 obj[v] = this._template.tile[v];
             }
         }
+        if (this._map && !this._map.options.crs.infinite) {
+          let invertedY = this._globalTileRange.max.y - coords.y;
+          if (this.options.tms) {
+            obj[this._template.tilematrix.row.name] = invertedY;
+          }
+          //obj[`-${this._template.tilematrix.row.name}`] = invertedY; //leaflet has this but I dont see a use in storing row and -row as it doesnt follow that pattern
+        }
         obj.r = this.options.detectRetina && L.Browser.retina && this.options.maxZoom > 0 ? '@2x' : '';
         return L.Util.template(this._url, obj);
     },

diff --git a/test/e2e/core/tms.html b/test/e2e/core/tms.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Painting Example</title>
+        <meta charset="UTF-8">
+            <script type="module" src="mapml-viewer.js"></script>
+         <style>
+           html {height: 100%} body,map {height: inherit} * {margin: 0;padding: 0;}
+        </style>
+    </head>
+    <body>
+        <mapml-viewer style="width: 600px;height:600px" projection="WGS84" zoom="1" lat="-10" lon="-112" controls>
+
+            <layer- label="Inline Countries" checked>
+                <meta name="zoom" content="min=0,max=4">
+                <extent units="WGS84">
+                    <input name="zoomLevel" type="zoom" value="1" min="0" max="4"/>
+
+                    <input name="row" type="location" axis="row" units="tilematrix" min="0" max="2"/>
+                    <input name="col" type="location" axis="column" units="tilematrix" min="0" max="2"/>
+
+                    <link tms rel="tile" tref="https://maps4html.org/TiledArt-Rousseau/TheBanksOfTheBièvreNearBicêtre/{zoomLevel}/{col}/{row}.png" />
+
+                </extent>
+            </layer->
+        </mapml-viewer>
+    </body>
+</html>
diff --git a/test/e2e/core/tms.test.js b/test/e2e/core/tms.test.js
@@ -0,0 +1,38 @@
+const playwright = require("playwright");
+jest.setTimeout(50000);
+(async () => {
+  for (const browserType of BROWSER) {
+    describe(
+      "Playwright Map Element Tests in " + browserType,
+      () => {
+        beforeAll(async () => {
+          browser = await playwright[browserType].launch({
+            headless: ISHEADLESS,
+            slowMo: 50,
+          });
+          context = await browser.newContext();
+          page = await context.newPage();
+          if (browserType === "firefox") {
+            await page.waitForNavigation();
+          }
+          await page.goto(PATH + "tms.html");
+        });
+
+        afterAll(async function () {
+          await browser.close();
+        });
+
+        test("[" + browserType + "]" + " Painting tiles are in proper order", async () => {
+          let tileOrder = ["1/0/1", "1/0/0", "1/1/1", "1/1/0"]
+          for (let i = 0; i < 4; i++) {
+            const feature = await page.$eval(
+              `xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > img:nth-child(${i + 1})`,
+              (tile) => tile.getAttribute("src")
+            );
+            expect(feature).toEqual(`https://maps4html.org/TiledArt-Rousseau/TheBanksOfTheBièvreNearBicêtre/${tileOrder[i]}.png`);
+          }
+        });
+      }
+    );
+  }
+})();