WIP on map-link:

* add getMapEl(), getLayerEl() API to map-link
* add mapEl reference to options for FeatureLayer wherever created
* update TemplatedFeaturesLayer, TemplatedTileLayer, TemplatedImageLayer
FeatureLayer .isVisible method so that it doesn't require the layer to be on the 
map when it is run; will use reference to mapEl._map in order to run
* update DebugOverlay to use linkEl reference to get layerEl ref

src/layer.js

@@ -341,38 +341,47 @@ export class MapLayer extends HTMLElement {
         for (let i = 0; i < mapExtents.length; i++) {
           extentLinksReady.push(mapExtents[i].whenLinksReady());
         }
-        Promise.allSettled(extentLinksReady).then(() => {
-          let disabledExtentCount = 0,
-            totalExtentCount = 0,
-            layerTypes = ['_staticTileLayer', '_mapmlvectors', '_extentLayer'];
-          for (let j = 0; j < layerTypes.length; j++) {
-            let type = layerTypes[j];
-            if (this.checked) {
-              if (type === '_extentLayer' && mapExtents.length > 0) {
-                for (let i = 0; i < mapExtents.length; i++) {
+        Promise.allSettled(extentLinksReady)
+          .then(() => {
+            let disabledExtentCount = 0,
+              totalExtentCount = 0,
+              layerTypes = [
+                '_staticTileLayer',
+                '_mapmlvectors',
+                '_extentLayer'
+              ];
+            for (let j = 0; j < layerTypes.length; j++) {
+              let type = layerTypes[j];
+              if (this.checked) {
+                if (type === '_extentLayer' && mapExtents.length > 0) {
+                  for (let i = 0; i < mapExtents.length; i++) {
+                    totalExtentCount++;
+                    if (mapExtents[i]._validateDisabled())
+                      disabledExtentCount++;
+                  }
+                } else if (layer[type]) {
+                  // not a templated layer
                   totalExtentCount++;
-                  if (mapExtents[i]._validateDisabled()) disabledExtentCount++;
+                  if (!layer[type].isVisible()) disabledExtentCount++;
                 }
-              } else if (layer[type]) {
-                // not a templated layer
-                totalExtentCount++;
-                if (!layer[type].isVisible()) disabledExtentCount++;
               }
             }
-          }
-          // if all extents are not visible / disabled, set layer to disabled
-          if (
-            disabledExtentCount === totalExtentCount &&
-            disabledExtentCount !== 0
-          ) {
-            this.setAttribute('disabled', '');
-            this.disabled = true;
-          } else {
-            this.removeAttribute('disabled');
-            this.disabled = false;
-          }
-          this.toggleLayerControlDisabled();
-        });
+            // if all extents are not visible / disabled, set layer to disabled
+            if (
+              disabledExtentCount === totalExtentCount &&
+              disabledExtentCount !== 0
+            ) {
+              this.setAttribute('disabled', '');
+              this.disabled = true;
+            } else {
+              this.removeAttribute('disabled');
+              this.disabled = false;
+            }
+            this.toggleLayerControlDisabled();
+          })
+          .catch((e) => {
+            console.log(e);
+          });
       }
     }, 0);
   }

src/map-link.js

@@ -109,6 +109,12 @@ export class MapLink extends HTMLElement {
       this.setAttribute('projection', val);
     }
   }
+  getMapEl() {
+    return this.parentElement.mapEl;
+  }
+  getLayerEl() {
+    if (this.parentExtent) return this.parentExtent.parentLayer;
+  }
 
   attributeChangedCallback(name, oldValue, newValue) {
     //['type','rel','href','hreflang','tref','tms','projection'];
@@ -226,7 +232,7 @@ export class MapLink extends HTMLElement {
     if (!this.tref || !this.parentExtent) return;
     await this.parentExtent.whenReady();
     await this._templateVars.inputsReady;
-    this.mapEl = this.parentExtent.mapEl;
+    this.mapEl = this.getMapEl();
     // create the layer type appropriate to the rel value
     this.zIndex = Array.from(
       this.parentExtent.querySelectorAll(
@@ -241,14 +247,16 @@ export class MapLink extends HTMLElement {
         errorTileUrl:
           'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
         zIndex: this.zIndex,
-        pane: this.parentExtent._extentLayer.getContainer()
+        pane: this.parentExtent._extentLayer.getContainer(),
+        linkEl: this
       }).addTo(this.parentExtent._extentLayer);
     } else if (this.rel === 'image') {
       this._templatedLayer = M.templatedImageLayer(this._templateVars, {
         zoomBounds: this.getZoomBounds(),
         extentBounds: this.getBounds(),
         zIndex: this.zIndex,
-        pane: this.parentExtent._extentLayer.getContainer()
+        pane: this.parentExtent._extentLayer.getContainer(),
+        linkEl: this
       }).addTo(this.parentExtent._extentLayer);
     } else if (this.rel === 'features') {
       // map-feature retrieved by link will be stored in shadowRoot owned by link
@@ -265,9 +273,6 @@ export class MapLink extends HTMLElement {
       // add template to array of queryies to be added to map and processed
       // on click/tap events
       this.hasSetBoundsHandler = true;
-      if (!this._queries) {
-        this._queries = [];
-      }
       L.extend(this._templateVars, this._setupQueryVars(this._templateVars));
       L.extend(this._templateVars, { extentBounds: this.getBounds() });
     }

src/mapml/handlers/QueryHandler.js

@@ -278,7 +278,8 @@ export var QueryHandler = L.Handler.extend({
         projection: map.options.projection,
         _leafletLayer: layer,
         query: true,
-        static: true
+        static: true,
+        mapEl: this.options.mapEl
       });
       f.addTo(map);
 

src/mapml/layers/DebugOverlay.js

@@ -250,10 +250,10 @@ export var DebugVectors = L.LayerGroup.extend({
           // tagged with the layer it came from
           let boundsTestTag =
             layers[i].extentBounds &&
-            layers[i].options.extentEl.parentLayer.hasAttribute('data-testid')
-              ? layers[i].options.extentEl.parentLayer.getAttribute(
-                  'data-testid'
-                )
+            layers[i].options.linkEl.getLayerEl().hasAttribute('data-testid')
+              ? layers[i].options.linkEl
+                  .getLayerEl()
+                  .getAttribute('data-testid')
               : layers[i].layerBounds &&
                 layers[i].options._leafletLayer._layerEl.hasAttribute(
                   'data-testid'

src/mapml/layers/FeatureLayer.js

@@ -52,6 +52,7 @@ export var FeatureLayer = L.FeatureGroup.extend({
   },
 
   isVisible: function () {
+    let map = this.options.mapEl._map;
     // if query, isVisible is unconditionally true
     if (this.options.query) return true;
     // if the featureLayer is for static features, i.e. it is the mapmlvector layer,
@@ -62,7 +63,7 @@ export var FeatureLayer = L.FeatureGroup.extend({
     else if (this._staticFeature && Object.keys(this._features).length === 0) {
       return false;
     } else {
-      let mapZoom = this._map.getZoom(),
+      let mapZoom = map.getZoom(),
         withinZoom = this.zoomBounds
           ? mapZoom <= this.zoomBounds.maxZoom &&
             mapZoom >= this.zoomBounds.minZoom
@@ -73,9 +74,9 @@ export var FeatureLayer = L.FeatureGroup.extend({
         this.layerBounds &&
         this.layerBounds.overlaps(
           M.pixelToPCRSBounds(
-            this._map.getPixelBounds(),
+            map.getPixelBounds(),
             mapZoom,
-            this._map.options.projection
+            map.options.projection
           )
         )
       );

src/mapml/layers/MapMLLayer.js

@@ -400,6 +400,7 @@ export var MapMLLayer = L.Layer.extend({
           // each owned child layer gets a reference to the root layer
           _leafletLayer: layer,
           static: true,
+          mapEl: layer._layerEl.parentElement,
           onEachFeature: function (properties, geometry) {
             // need to parse as HTML to preserve semantics and styles
             if (properties) {

src/mapml/layers/TemplatedFeaturesLayer.js

@@ -15,11 +15,12 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
   },
 
   isVisible: function () {
-    let mapZoom = this._map.getZoom();
+    let map = this._linkEl.getMapEl()._map;
+    let mapZoom = map.getZoom();
     let mapBounds = M.pixelToPCRSBounds(
-      this._map.getPixelBounds(),
+      map.getPixelBounds(),
       mapZoom,
-      this._map.options.projection
+      map.options.projection
     );
     return (
       mapZoom <= this.zoomBounds.maxZoom &&
@@ -34,13 +35,13 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
     };
     return events;
   },
-  onAdd: function () {
+  onAdd: function (map) {
+    this._map = map;
     // this causes the layer (this._features) to actually render...
     this.options.pane.appendChild(this._container);
     this._map._addZoomLimit(this);
     var opacity = this.options.opacity || 1,
-      container = this._container,
-      map = this._map;
+      container = this._container;
     if (!this._features) {
       this._features = M.featureLayer(null, {
         // pass the vector layer a renderer of its own, otherwise leaflet
@@ -55,6 +56,7 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
         opacity: opacity,
         projection: map.options.projection,
         static: true,
+        mapEl: this._linkEl.getMapEl(),
         onEachFeature: function (properties, geometry) {
           // need to parse as HTML to preserve semantics and styles
           var c = document.createElement('div');

src/mapml/layers/TemplatedImageLayer.js

@@ -3,6 +3,7 @@ export var TemplatedImageLayer = L.Layer.extend({
     this._template = template;
     this._container = L.DomUtil.create('div', 'leaflet-layer');
     L.DomUtil.addClass(this._container, 'mapml-image-container');
+    this._linkEl = options.linkEl;
     this.zoomBounds = options.zoomBounds;
     this.extentBounds = options.extentBounds;
     L.setOptions(
@@ -18,6 +19,7 @@ export var TemplatedImageLayer = L.Layer.extend({
     return events;
   },
   onAdd: function (map) {
+    this._map = map;
     // TODO: set this._map by ourselves
     this.options.pane.appendChild(this._container);
     map._addZoomLimit(this); //used to set the zoom limit of the map
@@ -28,11 +30,12 @@ export var TemplatedImageLayer = L.Layer.extend({
     this._onMoveEnd();
   },
   isVisible: function () {
-    let mapZoom = this._map.getZoom();
+    let map = this._linkEl.getMapEl()._map;
+    let mapZoom = map.getZoom();
     let mapBounds = M.pixelToPCRSBounds(
-      this._map.getPixelBounds(),
+      map.getPixelBounds(),
       mapZoom,
-      this._map.options.projection
+      map.options.projection
     );
     return (
       mapZoom <= this.zoomBounds.maxZoom &&

src/mapml/layers/TemplatedLayer.js

@@ -22,7 +22,7 @@ export var TemplatedLayer = L.LayerGroup.extend({
     return this._container;
   },
   onAdd: function (map) {
-    L.LayerGroup.prototype.onAdd.call(this, this._map);
+    L.LayerGroup.prototype.onAdd.call(this, map);
     // add to this.options.pane
     this.options.pane.appendChild(this._container);
   },

src/mapml/layers/TemplatedTileLayer.js

@@ -15,6 +15,7 @@ export var TemplatedTileLayer = L.TileLayer.extend({
     // it's critical to have this.options.minZoom, minNativeZoom, maxZoom, maxNativeZoom
     // which we accomplish here.  Used by Leaflet Map and GridLayer.
     L.extend(options, this.zoomBounds);
+    this._linkEl = options.linkEl;
     this.extentBounds = this.options.extentBounds;
 
     this._template = template;
@@ -27,10 +28,10 @@ export var TemplatedTileLayer = L.TileLayer.extend({
       L.extend(options, { pane: this.options.pane })
     );
   },
-  onAdd: function () {
+  onAdd: function (map) {
     this.options.pane.appendChild(this._container);
     this._map._addZoomLimit(this);
-    L.TileLayer.prototype.onAdd.call(this, this._map);
+    L.TileLayer.prototype.onAdd.call(this, map);
     this._handleMoveEnd();
   },
 
@@ -50,15 +51,16 @@ export var TemplatedTileLayer = L.TileLayer.extend({
   },
 
   isVisible: function () {
-    let mapZoom = this._map.getZoom();
+    let map = this._linkEl.getMapEl()._map;
+    let mapZoom = map.getZoom();
     let mapBounds = M.pixelToPCRSBounds(
-      this._map.getPixelBounds(),
+      map.getPixelBounds(),
       mapZoom,
-      this._map.options.projection
+      map.options.projection
     );
     return (
-      mapZoom <= this.options.maxZoom &&
-      mapZoom >= this.options.minZoom &&
+      mapZoom <= this.zoomBounds.maxZoom &&
+      mapZoom >= this.zoomBounds.minZoom &&
       this.extentBounds.overlaps(mapBounds)
     );
   },
@@ -179,7 +181,8 @@ export var TemplatedTileLayer = L.TileLayer.extend({
       static: false,
       layerBounds: this.extentBounds,
       zoomBounds: this.zoomBounds,
-      interactive: false
+      interactive: false,
+      mapEl: this._linkEl.getMapEl()
     });
 
     for (let groupID in tileFeatures._layers) {