This commit causes a pretty major regression, probably due to incomplete

implementation of Util.getBounds et al, tbd.

Author: prushforth

src/map-feature.js

@@ -78,7 +78,7 @@ export class MapFeature extends HTMLElement {
           if (mapmlvectors?._staticFeature) {
             this._removeInFeatureList(oldValue);
             let native = this._getNativeZoomAndCS(layer._content);
-            mapmlvectors.zoomBounds = mapmlvectors._getZoomBounds(
+            mapmlvectors.zoomBounds = M.getZoomBounds(
               layerEl.shadowRoot || layerEl,
               native.zoom
             );
@@ -159,7 +159,7 @@ export class MapFeature extends HTMLElement {
           }
           let container = this._layer.shadowRoot || this._layer._layerEl;
           // update zoom bounds of vector layer
-          mapmlvectors.zoomBounds = mapmlvectors._getZoomBounds(
+          mapmlvectors.zoomBounds = M.getZoomBounds(
             container,
             this._getNativeZoomAndCS(this._layer._content).zoom
           );
@@ -194,7 +194,6 @@ export class MapFeature extends HTMLElement {
         if (!this.querySelector('map-geometry')) return;
         if (!this._parentEl._layer._mapmlvectors) {
           // if vector layer has not yet created (i.e. the layer- is not yet rendered on the map / layer is empty)
-          let layerEl = this._layer._layerEl;
           this._layer.once('add', this._setUpEvents, this);
           return;
         } else if (!this._featureGroup) {
@@ -222,7 +221,7 @@ export class MapFeature extends HTMLElement {
     if (mapmlvectors._staticFeature) {
       let container = this._layer.shadowRoot || this._layer._layerEl;
       // update zoom bounds of vector layer
-      mapmlvectors.zoomBounds = mapmlvectors._getZoomBounds(
+      mapmlvectors.zoomBounds = M.getZoomBounds(
         container,
         this._getNativeZoomAndCS(this._layer._content).zoom
       );
@@ -298,7 +297,7 @@ export class MapFeature extends HTMLElement {
       // feature attaches to layer- or layer-'s shadow
       if (content.nodeType === Node.DOCUMENT_NODE) {
         // for features migrated from mapml, read native zoom and cs from the remote mapml
-        return this._layer._mapmlvectors._getNativeVariables(content);
+        return M.getNativeVariables(content);
       } else if (content.nodeName.toUpperCase() === 'LAYER-') {
         // for inline features, read native zoom and cs from inline map-meta
         let zoomMeta = this._parentEl.querySelectorAll('map-meta[name=zoom]'),

src/mapml-viewer.js

@@ -351,6 +351,7 @@ export class MapViewer extends HTMLElement {
             this._map.options.crs = M[newValue];
             this._map.options.projection = newValue;
             let layersReady = [];
+            this._map.announceMovement.disable();
             for (let layer of this.querySelectorAll('layer-')) {
               layer.removeAttribute('disabled');
               let reAttach = this.removeChild(layer);
@@ -360,6 +361,7 @@ export class MapViewer extends HTMLElement {
             Promise.allSettled(layersReady).then(() => {
               this.zoomTo(lat, lon, zoom);
               this._resetHistory();
+              this._map.announceMovement.enable();
             });
           }
         };

src/mapml/features/path.js

@@ -142,7 +142,7 @@ export var Path = L.Path.extend({
       },
       this
     );
-    leafletLayer.on('add', addMouseHandler, this);
+    leafletLayer.on('add', addMouseHandler, leafletLayer);
     function handleMouse(e) {
       //adds a lot of event handlers
       if (!container.parentElement) return;
@@ -157,7 +157,7 @@ export var Path = L.Path.extend({
         this
       );
     }
-    leafletLayer.on('remove', removeMouseHandler, this);
+    leafletLayer.on('remove', removeMouseHandler, leafletLayer);
     function removeMouseHandler() {
       L.DomEvent.off(this._map.getContainer(), {
         mouseout: handleMouse,

src/mapml/handlers/AnnounceMovement.js

@@ -5,10 +5,7 @@ export var AnnounceMovement = L.Handler.extend({
       layerremove: this.totalBounds
     });
 
-    this._map.options.mapEl.addEventListener(
-      'map-moveend',
-      this.announceBounds
-    );
+    this._map.on('moveend', this.announceBounds, this._map.options.mapEl);
     this._map.dragging._draggable.addEventListener('dragstart', this.dragged);
     this._map.options.mapEl.addEventListener(
       'mapfocused',
@@ -21,10 +18,7 @@ export var AnnounceMovement = L.Handler.extend({
       layerremove: this.totalBounds
     });
 
-    this._map.options.mapEl.removeEventListener(
-      'map-moveend',
-      this.announceBounds
-    );
+    this._map.off('moveend', this.announceBounds, this._map.options.mapEl);
     this._map.dragging._draggable.removeEventListener(
       'dragstart',
       this.dragged

src/mapml/handlers/QueryHandler.js

@@ -253,7 +253,7 @@ export var QueryHandler = L.Handler.extend({
     }
     function displayFeaturesPopup(features, loc) {
       if (features.length === 0) return;
-      let f = M.featureLayer(features, {
+      let f = M.featureLayer(null, {
         // pass the vector layer a renderer of its own, otherwise leaflet
         // puts everything into the overlayPane
         renderer: M.featureRenderer(),

src/mapml/index.js

@@ -827,6 +827,9 @@ import {
   M._pcrsToGcrs = Util._pcrsToGcrs;
   M.mapml2geojson = Util.mapml2geojson;
   M.getMaxZoom = Util.getMaxZoom;
+  M.getBounds = Util.getBounds;
+  M.getZoomBounds = Util.getZoomBounds;
+  M.getNativeVariables = Util.getNativeVariables;
 
   M.QueryHandler = QueryHandler;
   M.ContextMenu = ContextMenu;

src/mapml/layers/FeatureLayer.js

@@ -28,17 +28,15 @@ export var FeatureLayer = L.FeatureGroup.extend({
       );
       L.setOptions(this.options.renderer, { pane: this._container });
     }
-
     this._layers = {};
     if (this.options.query) {
       this._mapmlFeatures = mapml.features ? mapml.features : mapml;
       this.isVisible = true;
-      let native = this._getNativeVariables(mapml);
+      let native = M.getNativeVariables(mapml);
       this.options.nativeZoom = native.zoom;
       this.options.nativeCS = native.cs;
-    }
-    if (mapml && !this.options.query) {
-      let native = this._getNativeVariables(mapml);
+    } else if (mapml) {
+      let native = M.getNativeVariables(mapml);
       //needed to check if the feature is static or not, since this method is used by templated also
       if (
         !mapml.querySelector('map-extent') &&
@@ -48,11 +46,15 @@ export var FeatureLayer = L.FeatureGroup.extend({
         this._features = {};
         this._staticFeature = true;
         this.isVisible = true; //placeholder for when this actually gets updated in the future
-        this.zoomBounds = this._getZoomBounds(mapml, native.zoom);
-        this.layerBounds = this._getLayerBounds(mapml);
+        this.zoomBounds = M.getZoomBounds(mapml, native.zoom);
+        this.layerBounds = M.getLayerBounds(mapml);
         L.extend(this.options, this.zoomBounds);
       }
       this.addData(mapml, native.cs, native.zoom);
+    } else if (!mapml) {
+      this.isVisible = true;
+      this.layerBounds = this.options.extent;
+      this.zoomBounds = this.options.zoomBounds;
     }
   },
 
@@ -131,54 +133,6 @@ export var FeatureLayer = L.FeatureGroup.extend({
     }
   },
 
-  // _getNativeVariables: returns an object with the native zoom and CS,
-  //                     based on the map-metas that are available within
-  //                     the layer or the fallback default values.
-  // _getNativeVariables: mapml-||layer-||null||[map-feature,...] -> {zoom: _, val: _}
-  // mapml can be a mapml- element, layer- element, null, or an array of map-features
-  _getNativeVariables: function (mapml) {
-    let nativeZoom, nativeCS;
-    // when mapml is an array of features provided by the query
-    if (
-      mapml.length &&
-      mapml[0].parentElement.parentElement &&
-      mapml[0].parentElement.parentElement.tagName === 'mapml-'
-    ) {
-      let mapmlEl = mapml[0].parentElement.parentElement;
-      nativeZoom =
-        (mapmlEl.querySelector &&
-          mapmlEl.querySelector('map-meta[name=zoom]') &&
-          +M._metaContentToObject(
-            mapmlEl.querySelector('map-meta[name=zoom]').getAttribute('content')
-          ).value) ||
-        0;
-      nativeCS =
-        (mapmlEl.querySelector &&
-          mapmlEl.querySelector('map-meta[name=cs]') &&
-          M._metaContentToObject(
-            mapmlEl.querySelector('map-meta[name=cs]').getAttribute('content')
-          ).content) ||
-        'GCRS';
-    } else {
-      // when mapml is null or a layer-/mapml- element
-      nativeZoom =
-        (mapml.querySelector &&
-          mapml.querySelector('map-meta[name=zoom]') &&
-          +M._metaContentToObject(
-            mapml.querySelector('map-meta[name=zoom]').getAttribute('content')
-          ).value) ||
-        0;
-      nativeCS =
-        (mapml.querySelector &&
-          mapml.querySelector('map-meta[name=cs]') &&
-          M._metaContentToObject(
-            mapml.querySelector('map-meta[name=cs]').getAttribute('content')
-          ).content) ||
-        'GCRS';
-    }
-    return { zoom: nativeZoom, cs: nativeCS };
-  },
-
   _handleMoveEnd: function () {
     let mapZoom = this._map.getZoom(),
       withinZoom =
@@ -210,60 +164,6 @@ export var FeatureLayer = L.FeatureGroup.extend({
     this._resetFeatures();
   },
 
-  //sets default if any are missing, better to only replace ones that are missing
-  _getLayerBounds: function (container) {
-    if (!container) return null;
-    let cs = FALLBACK_CS,
-      projection =
-        (container.querySelector('map-meta[name=projection]') &&
-          M._metaContentToObject(
-            container
-              .querySelector('map-meta[name=projection]')
-              .getAttribute('content')
-          ).content.toUpperCase()) ||
-        FALLBACK_PROJECTION;
-    try {
-      let meta =
-        container.querySelector('map-meta[name=extent]') &&
-        M._metaContentToObject(
-          container
-            .querySelector('map-meta[name=extent]')
-            .getAttribute('content')
-        );
-
-      let zoom = meta.zoom || 0;
-
-      let metaKeys = Object.keys(meta);
-      for (let i = 0; i < metaKeys.length; i++) {
-        if (!metaKeys[i].includes('zoom')) {
-          cs = M.axisToCS(metaKeys[i].split('-')[2]);
-          break;
-        }
-      }
-      let axes = M.csToAxes(cs);
-      return M.boundsToPCRSBounds(
-        L.bounds(
-          L.point(+meta[`top-left-${axes[0]}`], +meta[`top-left-${axes[1]}`]),
-          L.point(
-            +meta[`bottom-right-${axes[0]}`],
-            +meta[`bottom-right-${axes[1]}`]
-          )
-        ),
-        zoom,
-        projection,
-        cs
-      );
-    } catch (error) {
-      //if error then by default set the layer to osm and bounds to the entire map view
-      return M.boundsToPCRSBounds(
-        M[projection].options.crs.tilematrix.bounds(0),
-        0,
-        projection,
-        cs
-      );
-    }
-  },
-
   _resetFeatures: function () {
     this.clearLayers();
     // since features are removed and re-added by zoom level, need to clean the feature index before re-adding
@@ -300,45 +200,6 @@ export var FeatureLayer = L.FeatureGroup.extend({
     }
   },
 
-  _getZoomBounds: function (container, nativeZoom) {
-    if (!container) return null;
-    let nMin = 100,
-      nMax = 0,
-      features = container.querySelectorAll('map-feature'),
-      meta,
-      projection;
-    for (let i = 0; i < features.length; i++) {
-      let lZoom = +features[i].getAttribute('zoom');
-      if (!features[i].getAttribute('zoom')) lZoom = nativeZoom;
-      nMax = Math.max(nMax, lZoom);
-      nMin = Math.min(nMin, lZoom);
-    }
-    try {
-      projection = M._metaContentToObject(
-        container
-          .querySelector('map-meta[name=projection]')
-          .getAttribute('content')
-      ).content;
-      meta = M._metaContentToObject(
-        container.querySelector('map-meta[name=zoom]').getAttribute('content')
-      );
-    } catch (error) {
-      return {
-        minZoom: 0,
-        maxZoom:
-          M[projection || FALLBACK_PROJECTION].options.resolutions.length - 1,
-        minNativeZoom: nMin,
-        maxNativeZoom: nMax
-      };
-    }
-    return {
-      minZoom: +meta.min,
-      maxZoom: +meta.max,
-      minNativeZoom: nMin,
-      maxNativeZoom: nMax
-    };
-  },
-
   addData: function (mapml, nativeCS, nativeZoom) {
     var features =
         mapml.nodeType === Node.DOCUMENT_NODE || mapml.nodeName === 'LAYER-'

src/mapml/layers/MapMLLayer.js

@@ -152,7 +152,6 @@ export var MapMLLayer = L.Layer.extend({
     }
     this._map = map;
     if (this._mapmlvectors) map.addLayer(this._mapmlvectors);
-    this._setLayerElExtent();
 
     if (!this._imageLayer) {
       this._imageLayer = L.layerGroup();
@@ -175,7 +174,6 @@ export var MapMLLayer = L.Layer.extend({
         tileSize: map.options.crs.options.crs.tile.bounds.max.x
       });
       map.addLayer(this._staticTileLayer);
-      this._setLayerElExtent();
     }
 
     const createAndAdd = createAndAddTemplatedLayers.bind(this);
@@ -249,7 +247,6 @@ export var MapMLLayer = L.Layer.extend({
             );
           }
         }
-        this._setLayerElExtent();
       }
     }
   },
@@ -881,6 +878,7 @@ export var MapMLLayer = L.Layer.extend({
         // if layer does not have a parent Element, do not need to set Controls
         layer._layerEl.parentElement._toggleControls();
       }
+      layer._setLayerElExtent();
       layer.fire('foo', layer, false);
       // local functions
       // sets layer._properties.projection.  Supposed to replace / simplify
@@ -943,6 +941,15 @@ export var MapMLLayer = L.Layer.extend({
               })
             );
             return true;
+            //if this is the only layer, but the projection doesn't match,
+            // set the map's projection to that of the layer
+          } else if (
+            layer._properties.projection !== layer.options.mapprojection &&
+            layer._layerEl.parentElement.layers.length === 1
+          ) {
+            layer._layerEl.parentElement.projection =
+              layer._properties.projection;
+            return true;
           }
         } catch (error) {}
         return false;
@@ -1486,7 +1493,8 @@ export var MapMLLayer = L.Layer.extend({
         }
       }
       function processFeatures() {
-        layer._mapmlvectors = M.featureLayer(layer._content, {
+        let native = M.getNativeVariables(layer._content);
+        layer._mapmlvectors = M.featureLayer(null, {
           // pass the vector layer a renderer of its own, otherwise leaflet
           // puts everything into the overlayPane
           renderer: M.featureRenderer(),
@@ -1495,6 +1503,9 @@ export var MapMLLayer = L.Layer.extend({
           pane: layer._container,
           opacity: layer.options.opacity,
           projection: layer._properties.projection,
+          extent: M.getBounds(layer._content),
+          native: native,
+          zoomBounds: M.getZoomBounds(layer._content, native.zoom),
           // each owned child layer gets a reference to the root layer
           _leafletLayer: layer,
           static: true,

src/mapml/layers/TemplatedTileLayer.js

@@ -163,7 +163,7 @@ export var TemplatedTileLayer = L.TileLayer.extend({
       xOffset = coords.x * tileSize,
       yOffset = coords.y * tileSize;
 
-    let tileFeatures = M.featureLayer(markup, {
+    let tileFeatures = M.featureLayer(null, {
       projection: this._map.options.projection,
       static: false,
       interactive: false