Allow Multiple extents

src/layer.js

@@ -195,10 +195,18 @@ export class MapLayer extends HTMLElement {
             let type = layerTypes[j];
             if(this.checked && layer[type]){
               if(type === "_templatedLayer"){
-                for(let j =0;j<layer[type]._templates.length;j++){
-                  if(layer[type]._templates[j].rel ==="query") continue;
-                  total++;
-                  if(!(layer[type]._templates[j].layer.isVisible))count++;
+                for(let i =0;i<layer._extent._mapExtents.length;i++){
+                  for(let j = 0; j < layer._extent._mapExtents[i].templatedLayer._templates.length; j++){
+                    if(layer._extent._mapExtents[i].templatedLayer._templates[j].rel ==="query") continue;
+                    total++;
+                    layer._extent._mapExtents[i].removeAttribute("disabled");
+                    layer._extent._mapExtents[i].disabled = false;
+                    if(!(layer._extent._mapExtents[i].templatedLayer._templates[j].layer.isVisible)){
+                      count++;
+                      layer._extent._mapExtents[i].setAttribute("disabled", "");
+                      layer._extent._mapExtents[i].disabled = true;
+                    }
+                  }  
                 }
               } else {
                 total++;

src/mapml.css

@@ -649,7 +649,9 @@ button.mapml-button:disabled,
   box-sizing: border-box;
 }
 
-.mapml-layer-item {
+.mapml-layer-item, 
+.mapml-layer-grouped-extents,
+.mapml-layer-extent {
   background-color: #fff;
   border: 1px solid #fff;
   margin: 0;
@@ -659,15 +661,18 @@ button.mapml-button:disabled,
 .mapml-layer-item:not(:last-of-type) {
   border-bottom: 1px solid #e3e3e3;
 }
-.mapml-layer-item[aria-grabbed="true"] {
+.mapml-layer-item[aria-grabbed="true"],
+.mapml-layer-extent[aria-grabbed="true"] {
   border: 1px solid #e3e3e3;
   border-radius: 0;
 }
-.mapml-layer-item:first-of-type {
+.mapml-layer-item:first-of-type,
+.mapml-layer-extent:first-of-type {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
-.mapml-layer-item:last-of-type {
+.mapml-layer-item:last-of-type,
+.mapml-layer-extent:last-of-type {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -776,3 +781,25 @@ label.mapml-layer-item-toggle {
   ) {
   outline: 0!important;
 }
+
+/*
+* Extent Elements in the Layer Control
+*/
+
+.mapml-layer-item-settings .mapml-layer-extent {
+  padding-inline-start: 1.8rem;
+}
+
+.mapml-layer-item-settings .mapml-layer-extent .mapml-layer-item-properties{
+  padding-inline-start: 0;
+}
+
+.mapml-layer-item-settings .mapml-layer-extent .mapml-layer-item-opacity {
+  padding-inline-start: 1.6rem;
+}
+
+.mapml-layer-item-settings .mapml-layer-extent .mapml-layer-item-controls{
+  position: absolute;
+  right: 0;
+}
+

src/mapml/handlers/ContextMenu.js

@@ -417,7 +417,8 @@ export var ContextMenu = L.Handler.extend({
     this._clickEvent = e;
     let elem = e.originalEvent.target;
     if(elem.closest("fieldset")){
-      elem = elem.closest("fieldset").querySelector("span");
+      elem = elem.closest("fieldset");
+      elem = (elem.className === "mapml-layer-extent") ? elem.closest("fieldset").parentNode.parentNode.parentNode.querySelector("span") : elem.querySelector("span");
       if(!elem.layer.validProjection) return;
       this._layerClicked = elem;
       this._showAtPoint(e.containerPoint, e, this._layerMenu);

src/mapml/handlers/QueryHandler.js

@@ -37,15 +37,14 @@ export var QueryHandler = L.Handler.extend({
     _queryTopLayer: function(event) {
         var layer = this._getTopQueryableLayer();
         if (layer) {
+            if(layer._mapmlFeatures) delete layer._mapmlFeatures;
             this._query(event, layer);
         }
     },
     _query(e, layer) {
-      var obj = {},
-          template = layer.getQueryTemplates()[0],
-          zoom = e.target.getZoom(),
+      var zoom = e.target.getZoom(),
           map = this._map,
-          crs = layer.crs,
+          crs = layer._extent.crs, // the crs for each extent would be the same
           tileSize = map.options.crs.options.crs.tile.bounds.max.x,
           container = layer._container,
           popupOptions = {autoClose: false, autoPan: true, maxHeight: (map.getSize().y * 0.5) - 50},
@@ -59,7 +58,45 @@ export var QueryHandler = L.Handler.extend({
           tileMatrixClickLoc = tcrsClickLoc.divideBy(tileSize).floor(),
           tileBounds = new L.Bounds(tcrsClickLoc.divideBy(tileSize).floor().multiplyBy(tileSize), 
           tcrsClickLoc.divideBy(tileSize).ceil().multiplyBy(tileSize));
-
+
+      let point = this._map.project(e.latlng),
+          scale = this._map.options.crs.scale(this._map.getZoom()),
+          pcrsClick = this._map.options.crs.transformation.untransform(point,scale),
+          contenttype;
+      var templates = layer.getQueryTemplates(pcrsClick);
+
+      var fetchFeatures = function(template, obj, lastOne) {
+        fetch(L.Util.template(template.template, obj), { redirect: 'follow' }).then((response) => {
+        contenttype = response.headers.get("Content-Type");
+        if (response.status >= 200 && response.status < 300) {
+          return response.text();
+        } else {
+          throw new Error(response.status);
+        }
+      }).then((mapml) => {
+        if (contenttype.startsWith("text/mapml")) {
+          //if(!this.mapml) this.mapml = "";
+          //this.mapml = this.mapml.concat(mapml);
+          if(!layer._mapmlFeatures) layer._mapmlFeatures = [];
+          let parser = new DOMParser(),
+              mapmldoc = parser.parseFromString(mapml, "application/xml"),
+              features = Array.prototype.slice.call(mapmldoc.querySelectorAll("map-feature"));
+              if(features.length) layer._mapmlFeatures = layer._mapmlFeatures.concat(features);
+              mapmldoc.features = layer._mapmlFeatures;
+          if(lastOne) return handleMapMLResponse(mapmldoc, e.latlng);
+        } else {
+          return handleOtherResponse(mapml, layer, e.latlng);
+        }
+      }).catch((err) => {
+        console.log('Looks like there was a problem. Status: ' + err.message);
+      });
+    };
+
+    for(let i = 0; i < templates.length; i++){
+
+      var obj = {},
+          template = templates[i];
+
       // all of the following are locations that might be used in a query, I think.
       obj[template.query.tilei] = tcrsClickLoc.x.toFixed() - (tileMatrixClickLoc.x * tileSize);
       obj[template.query.tilej] = tcrsClickLoc.y.toFixed() - (tileMatrixClickLoc.y * tileSize);
@@ -106,34 +143,14 @@ export var QueryHandler = L.Handler.extend({
           }
       }
 
-      let point = this._map.project(e.latlng),
-          scale = this._map.options.crs.scale(this._map.getZoom()),
-          pcrsClick = this._map.options.crs.transformation.untransform(point,scale),
-          contenttype;
-
-      if(template.layerBounds.contains(pcrsClick)){
-        fetch(L.Util.template(template.template, obj), { redirect: 'follow' }).then((response) => {
-          contenttype = response.headers.get("Content-Type");
-          if (response.status >= 200 && response.status < 300) {
-            return response.text();
-          } else {
-            throw new Error(response.status);
-          }
-        }).then((mapml) => {
-          if (contenttype.startsWith("text/mapml")) {
-            return handleMapMLResponse(mapml, e.latlng);
-          } else {
-            return handleOtherResponse(mapml, layer, e.latlng);
-          }
-        }).catch((err) => {
-          console.log('Looks like there was a problem. Status: ' + err.message);
-        });
+      if(template.extentBounds.contains(pcrsClick)){
+        let lastOne = (i === (templates.length - 1)) ? true: false;
+        fetchFeatures(template, obj, lastOne);
       }
-      function handleMapMLResponse(mapml, loc) {
-        let parser = new DOMParser(),
-          mapmldoc = parser.parseFromString(mapml, "application/xml");
+    }
+      function handleMapMLResponse(mapmldoc, loc) {
 
-        for(let feature of mapmldoc.querySelectorAll('map-feature')){
+        for(let feature of mapmldoc.features){
           if(!feature.querySelector('map-geometry')){
             let geo = document.createElement('map-geometry'), point = document.createElement('map-point'),
               coords = document.createElement('map-coordinates');
@@ -171,7 +188,7 @@ export var QueryHandler = L.Handler.extend({
         div.appendChild(c);
         // passing a latlng to the popup is necessary for when there is no
         // geometry / null geometry
-        layer._totalFeatureCount = mapmldoc.querySelectorAll("map-feature").length;
+        layer._totalFeatureCount = mapmldoc.features.length;
         layer.bindPopup(div, popupOptions).openPopup(loc);
         layer.on('popupclose', function() {
             map.removeLayer(f);

src/mapml/layers/ControlLayer.js

@@ -83,6 +83,20 @@ export var MapMLLayerControl = L.Control.Layers.extend({
           input[0].closest("fieldset").disabled = false;
           label[0].style.fontStyle = "normal";
         }
+        // check if an extent is disabled and disable it
+        if(this._layers[i].layer._extent && this._layers[i].layer._extent._mapExtents){
+          for(let j = 0; j < this._layers[i].layer._extent._mapExtents.length; j++){
+            let input = this._layers[i].layer._extent._mapExtents[j].extentAnatomy,
+                label = input.getElementsByClassName("mapml-layer-item-name")[0];
+            if(this._layers[i].layer._extent._mapExtents[j].disabled && this._layers[i].layer._extent._mapExtents[j].checked){
+              label.style.fontStyle = "italic";
+              input.disabled = true;
+            } else {
+              label.style.fontStyle = "normal";
+              input.disabled = false;
+            }
+          }
+        }
       }
 
     },

src/mapml/layers/DebugLayer.js

@@ -180,13 +180,23 @@ export var DebugVectors = L.LayerGroup.extend({
     this.addLayer(this._centerVector);
 
     for (let i of id) {
-      if (layers[i].layerBounds) {
-        let boundsArray = [
-          layers[i].layerBounds.min,
-          L.point(layers[i].layerBounds.max.x, layers[i].layerBounds.min.y),
-          layers[i].layerBounds.max,
-          L.point(layers[i].layerBounds.min.x, layers[i].layerBounds.max.y)
-        ];
+      if (layers[i].layerBounds || layers[i].extentBounds) {
+        let boundsArray;
+        if(layers[i].layerBounds){
+          boundsArray = [
+            layers[i].layerBounds.min,
+            L.point(layers[i].layerBounds.max.x, layers[i].layerBounds.min.y),
+            layers[i].layerBounds.max,
+            L.point(layers[i].layerBounds.min.x, layers[i].layerBounds.max.y)
+          ];
+        } else {
+          boundsArray = [
+            layers[i].extentBounds.min,
+            L.point(layers[i].extentBounds.max.x, layers[i].extentBounds.min.y),
+            layers[i].extentBounds.max,
+            L.point(layers[i].extentBounds.min.x, layers[i].extentBounds.max.y)
+          ];
+        }        
         let boundsRect = projectedExtent(boundsArray, {
           color: colors[j % colors.length],
           weight: 2,

src/mapml/layers/FeatureLayer.js

@@ -17,7 +17,7 @@ export var MapMLFeatures = L.FeatureGroup.extend({
 
       this._layers = {};
       if(this.options.query){
-        this._mapmlFeatures = mapml;
+        this._mapmlFeatures = mapml.features ? mapml.features: mapml;
         this.isVisible = true;
         let native = this._getNativeVariables(mapml);
         this.options.nativeZoom = native.zoom;
@@ -72,8 +72,8 @@ export var MapMLFeatures = L.FeatureGroup.extend({
 
 
     showPaginationFeature: function(e){
-      if(this.options.query && this._mapmlFeatures.querySelectorAll("map-feature")[e.i]){
-        let feature = this._mapmlFeatures.querySelectorAll("map-feature")[e.i];
+      if(this.options.query && this._mapmlFeatures[e.i]){
+        let feature = this._mapmlFeatures[e.i];
         this.clearLayers();
         this.addData(feature, this.options.nativeCS, this.options.nativeZoom);
         e.popup._navigationBar.querySelector("p").innerText = (e.i + 1) + "/" + this.options._leafletLayer._totalFeatureCount;