Maps4HTML · prushforth · Jan 15, 2021 · Dec 29, 2020 · Dec 29, 2020 · Jan 5, 2021
diff --git a/debug/clientTile.html b/debug/clientTile.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Client Tiles</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: 500px;height: 500px;" projection="WGS84" zoom="1" lat="59.87304909" lon="-53.22587225"
+    width="900" height="400" controls>
+
+    <layer- label="Inline Templated Tile" checked>
+      <meta name="zoom" content="min=0,max=5" />
+      <extent units="WGS84">
+        <input name="zoomLevel" type="zoom" min="1" max="1" value="0" />
+
+        <input name="row" type="location" axis="row" units="tilematrix" min="0" max="1" />
+        <input name="col" type="location" axis="column" units="tilematrix" min="0" max="1" />
+
+        <link rel='tile' type='text/mapml' title='Tiles for ne_10m_admin_0_countries (as MapML)' />
+
+      </extent>
+    </layer->
+  </mapml-viewer>
+  <script>
+    let layer = document.querySelector("body > mapml-viewer > layer- > extent > link");
+    layer.addEventListener("tileloadstart", (e) => {
+      //let cust = document.createElement("IMG")
+      //cust.src = "https://1000logos.net/wp-content/uploads/2018/11/GitHub-logo-500x452.png";
+      //cust.width = 50;
+      //cust.height = 50;
+      let cust = document.createElement("IFRAME");
+      cust.src = "https://www.youtube.com/embed/yI2oS2hoL0k?autoplay=1&mute=1";
+      cust.width = 256;
+      cust.height = 256;
+      e.detail.appendTile(cust);
+    });
+  </script>
+</body>
+
+</html>
diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js
@@ -1,4 +1,4 @@
-import { FALLBACK_PROJECTION } from '../utils/Constants';
+import { FALLBACK_PROJECTION, BLANK_TT_TREF } from '../utils/Constants';
 
 export var MapMLLayer = L.Layer.extend({
     // zIndex has to be set, for the case where the layer is added to the
@@ -648,8 +648,16 @@ export var MapMLLayer = L.Layer.extend({
                       zoomInput = serverExtent.querySelector('input[type="zoom" i]'),
                       includesZoom = false;
                   for (var i=0;i< tlist.length;i++) {
-                    var t = tlist[i],
-                        template = t.getAttribute('tref'), v,
+                    var t = tlist[i], template = t.getAttribute('tref'); 
+                    if(!template){
+                      template = BLANK_TT_TREF;
+                      let blankInputs = mapml.querySelectorAll('input');
+                      for (let i of blankInputs){
+                        template += `{${i.getAttribute("name")}}`;
+                      }
+                    }
+
+                    var v,
                         title = t.hasAttribute('title') ? t.getAttribute('title') : 'Query this layer',
                         vcount=template.match(varNamesRe),
                         trel = (!t.hasAttribute('rel') || t.getAttribute('rel').toLowerCase() === 'tile') ? 'tile' : t.getAttribute('rel').toLowerCase(),
@@ -704,7 +712,7 @@ export var MapMLLayer = L.Layer.extend({
                         break;
                       }
                     }
-                    if (template && vcount.length === inputs.length) {
+                    if (template && vcount.length === inputs.length || template === BLANK_TT_TREF) {
                       if (trel === 'query') {
                         layer.queryable = true;
                       }
@@ -714,6 +722,7 @@ export var MapMLLayer = L.Layer.extend({
                       // template has a matching input for every variable reference {varref}
                       layer._templateVars.push({
                         template:decodeURI(new URL(template, base)), 
+                        linkEl: t,
                         title:title, 
                         rel: trel, 
                         type: ttype, 

diff --git a/src/mapml/layers/TemplatedTileLayer.js b/src/mapml/layers/TemplatedTileLayer.js
@@ -1,3 +1,5 @@
+import { BLANK_TT_TREF } from '../utils/Constants';
+
 export var TemplatedTileLayer = L.TileLayer.extend({
     // a TemplateTileLayer is similar to a L.TileLayer except its templates are
     // defined by the <extent><template/></extent>
@@ -59,22 +61,38 @@ export var TemplatedTileLayer = L.TileLayer.extend({
       this._parentOnMoveEnd();
     },
     createTile: function (coords) {
-      let tileSize = this._map.options.crs.options.crs.tile.bounds.max.x;
+      let tileGroup = document.createElement("DIV"),
+          tileSize = this._map.options.crs.options.crs.tile.bounds.max.x;
+      L.DomUtil.addClass(tileGroup, "mapml-tile-group");
+      L.DomUtil.addClass(tileGroup, "leaflet-tile");
+
+      tileGroup.setAttribute("width", `${tileSize}`);
+      tileGroup.setAttribute("height", `${tileSize}`);
+
+      this._template.linkEl.dispatchEvent(new CustomEvent('tileloadstart', {
+        detail:{
+          x:coords.x,
+          y:coords.y,
+          zoom:coords.z,
+          appendTile: (elem)=>{tileGroup.appendChild(elem);},
+        },
+      }));
+
       if (this._template.type.startsWith('image/')) {
-        return L.TileLayer.prototype.createTile.call(this, coords, function(){});
-      } else {
+        tileGroup.appendChild(L.TileLayer.prototype.createTile.call(this, coords, function(){}));
+      } else if(!this._url.includes(BLANK_TT_TREF)) {
         // tiles of type="text/mapml" will have to fetch content while creating
         // the tile here, unless there can be a callback associated to the element
         // that will render the content in the alread-placed tile
         // var tile = L.DomUtil.create('canvas', 'leaflet-tile');
         var tile = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        this._fetchTile(coords, tile);
         tile.setAttribute("width", `${tileSize}`);
         tile.setAttribute("height", `${tileSize}`);
-//        tile.style.outline="1px solid red";
         L.DomUtil.addClass(tile, "leaflet-tile");
-        this._fetchTile(coords, tile);
-        return tile;
+        tileGroup.appendChild(tile);
       }
+      return tileGroup;
     },
     _mapmlTileReady: function(tile) {
         L.DomUtil.addClass(tile,'leaflet-tile-loaded');

diff --git a/src/mapml/utils/Constants.js b/src/mapml/utils/Constants.js
@@ -1,3 +1,4 @@
 export const TILE_SIZE = 256;
 export const FALLBACK_PROJECTION = "OSMTILE";
-export const FALLBACK_CS = "TILEMATRIX";
+export const FALLBACK_CS = "TILEMATRIX";
+export const BLANK_TT_TREF = "mapmltemplatedtileplaceholder";
diff --git a/test/e2e/core/styleParsing.test.js b/test/e2e/core/styleParsing.test.js
@@ -75,15 +75,15 @@ jest.setTimeout(50000);
         //testing done on 2nd map in the page
         test("[" + browserType + "]" + " CSS from a retrieved MapML file added inorder inside svg within templated-tile-container", async () => {
           const firstStyle = await page.$eval(
-            "xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > svg:nth-child(1) > style:nth-child(1)",
+            "xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > div > svg:nth-child(1) > style:nth-child(1)",
             (styleE) => styleE.innerHTML
           );
           const secondStyle = await page.$eval(
-            "xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > svg:nth-child(1) > style:nth-child(2)",
+            "xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > div > svg:nth-child(1) > style:nth-child(2)",
             (styleE) => styleE.innerHTML
           );
           const foundStyleLink = await page.$(
-            "xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > svg:nth-child(1) > link"
+            "xpath=//html/body/map[2]/div >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.leaflet-layer.mapml-templatedlayer-container > div > div > div > svg:nth-child(1) > link"
           );
           expect(firstStyle).toMatch("refStyleOne");
           expect(secondStyle).toMatch("refStyleTwo");

diff --git a/test/e2e/core/tms.test.js b/test/e2e/core/tms.test.js
@@ -26,7 +26,7 @@ jest.setTimeout(50000);
           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})`,
+              `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 > div:nth-child(${i + 1}) > img`,
               (tile) => tile.getAttribute("src")
             );
             expect(feature).toEqual(`https://maps4html.org/TiledArt-Rousseau/TheBanksOfTheBièvreNearBicêtre/${tileOrder[i]}.png`);

diff --git a/test/e2e/layers/clientTemplatedTileLayer.html b/test/e2e/layers/clientTemplatedTileLayer.html
@@ -0,0 +1,55 @@
+<html>
+
+<head>
+  <title>Client Tiles</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: 500px;height: 500px;" projection="WGS84" zoom="0" lat="59.87304909" lon="-53.22587225"
+    width="900" height="400" controls>
+
+    <layer- label="Inline Templated Tile" checked>
+      <meta name="zoom" content="min=0,max=5" />
+      <extent units="WGS84">
+        <input name="zoomLevel" type="zoom" min="1" max="1" value="0" />
+
+        <input name="row" type="location" axis="row" units="tilematrix" min="0" max="1" />
+        <input name="col" type="location" axis="column" units="tilematrix" min="0" max="1" />
+
+        <link rel='tile' type='text/mapml' title='Tiles for ne_10m_admin_0_countries (as MapML)' />
+
+      </extent>
+    </layer->
+  </mapml-viewer>
+  <script>
+    let layer = document.querySelector("body > mapml-viewer > layer- > extent > link");
+    layer.addEventListener("tileloadstart", (e) => {
+      //let cust = document.createElement("IMG")
+      //cust.src = "https://1000logos.net/wp-content/uploads/2018/11/GitHub-logo-500x452.png";
+      //cust.width = 50;
+      //cust.height = 50;
+      let cust = document.createElement("P");
+      cust.textContent = `${e.detail.x}${e.detail.y}${e.detail.zoom}`;
+      e.detail.appendTile(cust);
+    });
+  </script>
+</body>
+
+</html>
diff --git a/test/e2e/layers/clientTemplatedTileLayer.test.js b/test/e2e/layers/clientTemplatedTileLayer.test.js
@@ -0,0 +1,74 @@
+const playwright = require("playwright");
+
+jest.setTimeout(50000);
+(async () => {
+
+  for (const browserType of BROWSER) {
+    let page, browser, context;
+    describe(
+      "Playwright Client Tile 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 + "clientTemplatedTileLayer.html");
+        });
+
+        afterAll(async function () {
+          await browser.close();
+        });
+
+        test("[" + browserType + "]" + " Custom Tiles Loaded In, Accurate Coordinates", async () => {
+          const one = 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 > div:nth-child(1) > p",
+            (tile) => tile.textContent
+          );
+          const two = 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 > div:nth-child(2) > p",
+            (tile) => tile.textContent
+          );
+          const three = 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 > div:nth-child(3) > p",
+            (tile) => tile.textContent
+          );
+          const four = 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 > div:nth-child(4) > p",
+            (tile) => tile.textContent
+          );
+          const five = 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 > div:nth-child(5) > p",
+            (tile) => tile.textContent
+          );
+          const six = 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 > div:nth-child(6) > p",
+            (tile) => tile.textContent
+          );
+          const seven = 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 > div:nth-child(7) > p",
+            (tile) => tile.textContent
+          );
+          const eight = 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 > div:nth-child(8) > p",
+            (tile) => tile.textContent
+          );
+
+          expect(one).toEqual("101");
+          expect(two).toEqual("001");
+          expect(three).toEqual("201");
+          expect(four).toEqual("111");
+          expect(five).toEqual("011");
+          expect(six).toEqual("211");
+          expect(seven).toEqual("301");
+          expect(eight).toEqual("311");
+
+        });
+      });
+  }
+})();