Add backwards compatibility with <layer->, mostly.

Maps4HTML · Oct 21, 2024 · 37d69c1 · 37d69c1
1 parent 0d77803
commit 37d69c1
Show file tree

Hide file tree

Showing 21 changed files with 554 additions and 16 deletions.
diff --git a/src/layer-.js b/src/layer-.js
@@ -0,0 +1,8 @@
+import { BaseLayerElement } from './layer';
+
+export class LayerDashElement extends BaseLayerElement {
+ constructor() {
+ super();
+ // specific behavior for <map-layer>
+ }
+}
diff --git a/src/layer.js b/src/layer.js
@@ -2,7 +2,7 @@ import { Util } from './mapml/utils/Util';
 import { MapMLLayer, mapMLLayer } from './mapml/layers/MapMLLayer';
 import { createLayerControlHTML } from './mapml/elementSupport/layers/createLayerControlForLayer';
 
-export class HTMLLayerElement extends HTMLElement {
+export class BaseLayerElement extends HTMLElement {
  static get observedAttributes() {
  return ['src', 'label', 'checked', 'hidden', 'opacity'];
  }
@@ -539,7 +539,10 @@ export class HTMLLayerElement extends HTMLElement {
  var i = 0,
  position = 1;
  for (var nodes = this.parentNode.children; i < nodes.length; i++) {
- if (this.parentNode.children[i].nodeName === 'MAP-LAYER') {
+ if (
+ this.parentNode.children[i].nodeName === 'MAP-LAYER' ||
+ this.parentNode.children[i].nodeName === 'LAYER-'
+ ) {
  if (this.parentNode.children[i] === this) {
  position = i + 1;
  } else if (this.parentNode.children[i]._layer) {

diff --git a/src/map-extent.js b/src/map-extent.js
@@ -134,7 +134,7 @@ export class HTMLExtentElement extends HTMLElement {
  return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
  }
  getLayerEl() {
- return Util.getClosest(this, 'map-layer');
+ return Util.getClosest(this, 'map-layer,layer-');
  }
  attributeChangedCallback(name, oldValue, newValue) {
  if (this.#hasConnected /* jshint ignore:line */) {

diff --git a/src/map-feature.js b/src/map-feature.js
@@ -137,7 +137,7 @@ export class HTMLFeatureElement extends HTMLElement {
  return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
  }
  getLayerEl() {
- return Util.getClosest(this, 'map-layer');
+ return Util.getClosest(this, 'map-layer,layer-');
  }
 
  attributeChangedCallback(name, oldValue, newValue) {
@@ -168,6 +168,7 @@ export class HTMLFeatureElement extends HTMLElement {
  this._initialZoom = this.getMapEl().zoom;
  this._parentEl =
  this.parentNode.nodeName.toUpperCase() === 'MAP-LAYER' ||
+ this.parentNode.nodeName.toUpperCase() === 'LAYER-' ||
  this.parentNode.nodeName.toUpperCase() === 'MAP-LINK'
  ? this.parentNode
  : this.parentNode.host;

diff --git a/src/map-input.js b/src/map-input.js
@@ -183,7 +183,7 @@ export class HTMLInputElement extends HTMLElement {
  return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
  }
  getLayerEl() {
- return Util.getClosest(this, 'map-layer');
+ return Util.getClosest(this, 'map-layer,layer-');
  }
  attributeChangedCallback(name, oldValue, newValue) {
  this.whenReady()

diff --git a/src/map-layer.js b/src/map-layer.js
@@ -0,0 +1,8 @@
+import { BaseLayerElement } from './layer';
+
+export class HTMLLayerElement extends BaseLayerElement {
+ constructor() {
+ super();
+ // specific behavior for <map-layer>
+ }
+}
diff --git a/src/map-link.js b/src/map-link.js
@@ -163,7 +163,7 @@ export class HTMLLinkElement extends HTMLElement {
  return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
  }
  getLayerEl() {
- return Util.getClosest(this, 'map-layer');
+ return Util.getClosest(this, 'map-layer,layer-');
  }
 
  attributeChangedCallback(name, oldValue, newValue) {
@@ -382,7 +382,13 @@ export class HTMLLinkElement extends HTMLElement {
  this.getRootNode().querySelector(':host > ' + s)
  : Util.getClosest(
  this,
- 'map-extent:has(' + s + '),map-layer:has(' + s + ')'
+ 'map-extent:has(' +
+ s +
+ '),map-layer:has(' +
+ s +
+ '),layer-:has(' +
+ s +
+ ')'
  )?.querySelector(s);
  let options = {
  zoomBounds: this.getZoomBounds(),

diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
@@ -1,7 +1,8 @@
 import { Util } from './mapml/utils/Util';
 import { DOMTokenList } from './mapml/utils/DOMTokenList';
 
-import { HTMLLayerElement } from './layer.js';
+import { HTMLLayerElement } from './map-layer.js';
+import { LayerDashElement } from './layer-.js';
 import { HTMLMapCaptionElement } from './map-caption.js';
 import { HTMLFeatureElement } from './map-feature.js';
 import { HTMLExtentElement } from './map-extent.js';
@@ -642,7 +643,7 @@ export class HTMLMapmlViewerElement extends HTMLElement {
  this.addEventListener(
  'change',
  function (e) {
- if (e.target.tagName === 'MAP-LAYER') {
+ if (e.target.tagName === 'MAP-LAYER' || e.target.tagName === 'LAYER-') {
  this.dispatchEvent(
  new CustomEvent('layerchange', {
  details: { target: this, originalEvent: e }
@@ -1456,6 +1457,7 @@ try {
  );
 }
 window.customElements.define('map-layer', HTMLLayerElement);
+window.customElements.define('layer-', LayerDashElement);
 window.customElements.define('map-caption', HTMLMapCaptionElement);
 window.customElements.define('map-feature', HTMLFeatureElement);
 window.customElements.define('map-extent', HTMLExtentElement);

diff --git a/src/mapml/elementSupport/layers/createLayerControlForLayer.js b/src/mapml/elementSupport/layers/createLayerControlForLayer.js
@@ -263,7 +263,7 @@ export var createLayerControlHTML = async function () {
  layerEl.removeAttribute('data-moving');
  }
  // update zIndex of all map-layer elements
- let layers = mapEl.querySelectorAll('map-layer');
+ let layers = mapEl.querySelectorAll('map-layer,layer-');
  for (let i = 0; i < layers.length; i++) {
  let layer = layers[i]._layer;
  if (layer.options.zIndex !== zIndex) {

diff --git a/src/mapml/features/path.js b/src/mapml/features/path.js
@@ -77,7 +77,8 @@ export var Path = L.Path.extend({
  while (nextLayer && onTop) {
  if (
  nextLayer.tagName &&
- nextLayer.tagName.toUpperCase() === 'MAP-LAYER'
+ (nextLayer.tagName.toUpperCase() === 'MAP-LAYER' ||
+ nextLayer.tagName.toUpperCase() === 'LAYER-')
  )
  onTop = !nextLayer.queryable();
  nextLayer = nextLayer.nextElementSibling;

diff --git a/src/mapml/handlers/AnnounceMovement.js b/src/mapml/handlers/AnnounceMovement.js
@@ -127,7 +127,7 @@ export var AnnounceMovement = L.Handler.extend({
  if (!e.layer._layerEl) return;
  let map = this.options.mapEl;
  map.whenLayersReady().then(() => {
- let layers = map.querySelectorAll('map-layer');
+ let layers = map.querySelectorAll('map-layer,layer-');
  let bounds;
  for (let i = 0; i < layers.length; i++) {
  // the _layer may no longer exist if this is invoked by layerremove

diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
@@ -232,7 +232,8 @@ export var MapMLLayer = L.LayerGroup.extend({
  return new URL(
  this._content.querySelector('map-base')
  ? this._content.querySelector('map-base').getAttribute('href')
- : this._content.nodeName === 'MAP-LAYER'
+ : this._content.nodeName === 'MAP-LAYER' ||
+ this._content.nodeName === 'LAYER-'
  ? this._content.baseURI
  : this._href,
  this._href

diff --git a/src/mapml/utils/Util.js b/src/mapml/utils/Util.js
@@ -390,7 +390,7 @@ export const Util = {
  break;
  case '_parent':
  postTraversalSetup();
- for (let l of map.options.mapEl.querySelectorAll('map-layer'))
+ for (let l of map.options.mapEl.querySelectorAll('map-layer,layer-'))
  if (l._layer !== leafletLayer) map.options.mapEl.removeChild(l);
  map.options.mapEl.appendChild(layer);
  map.options.mapEl.removeChild(leafletLayer._layerEl);

diff --git a/src/web-map.js b/src/web-map.js
@@ -431,7 +431,7 @@ export class HTMLWebMapElement extends HTMLMapElement {
  this._map.options.projection = newValue;
  let layersReady = [];
  this._map.announceMovement.disable();
- for (let layer of this.querySelectorAll('map-layer')) {
+ for (let layer of this.querySelectorAll('map-layer,layer-')) {
  layer.removeAttribute('disabled');
  let reAttach = this.removeChild(layer);
  this.appendChild(reAttach);
@@ -685,7 +685,7 @@ export class HTMLWebMapElement extends HTMLMapElement {
  this.addEventListener(
  'change',
  function (e) {
- if (e.target.tagName === 'MAP-LAYER') {
+ if (e.target.tagName === 'MAP-LAYER' || e.target.tagName === 'LAYER-') {
  this.dispatchEvent(
  new CustomEvent('layerchange', {
  details: { target: this, originalEvent: e }

diff --git a/test/e2e/elements/layer-/dummy-cbmtile-cbmt-layer-extent.mapml b/test/e2e/elements/layer-/dummy-cbmtile-cbmt-layer-extent.mapml
@@ -0,0 +1,16 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+ <map-head>
+ <map-title>Canada Base Map - Transportation (CBMT)</map-title>
+ </map-head>
+ <map-body>
+ <map-extent units="CBMTILE" checked="checked">
+ <map-input name="z" type="zoom" value="17" min="0" max="17"></map-input>
+ <map-input name="y" type="location" units="tilematrix" axis="row" min="29750" max="34475"></map-input>
+ <map-input name="x" type="location" units="tilematrix" axis="column" min="26484" max="32463"></map-input>
+ <map-link rel="tile" tref="dummy/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}">
+ <!-- previously this would have been used. Now it is ignored -->
+ <map-meta name="zoom" content="min=5,max=10"></map-meta>
+ </map-link>
+ </map-extent>
+ </map-body>
+</mapml-> 
diff --git a/test/e2e/elements/layer-/layer-dash-extent.html b/test/e2e/elements/layer-/layer-dash-extent.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>&lt;layer-&gt; test</title>
+ <meta charset="UTF-8">
+ <script type="module" src="mapml.js"></script>
+ <style>
+ html {
+ height: 100%
+ }
+
+ body {
+ height: inherit
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ }
+ </style>
+ </head>
+ <body>
+ <mapml-viewer data-testid="viewer" style="height: 500px;width:500px;" controls zoom="2" lat="68" lon="-87" controls projection="CBMTILE">
+ <layer- data-testid="remote-layer" label="Remote content" src="dummy-cbmtile-cbmt-layer-extent.mapml" checked></layer->
+ <layer- data-testid="inline-layer" label="Local content" checked>
+ <map-extent data-testid="inline-extent" units="CBMTILE" checked="checked">
+ <!-- the bounds and zoom bounds of the inline map-extent are different than those of the remote layer's map-extent -->
+ <map-input name="z" type="zoom" value="17" min="3" max="17"></map-input>
+ <map-input name="y" type="location" units="tilematrix" axis="row" min="31000" max="34000"></map-input>
+ <map-input name="x" type="location" units="tilematrix" axis="column" min="27000" max="30000"></map-input>
+ <map-link rel="tile" tref="dummy/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" >
+ <!-- previously this would have been used. Now it is ignored -->
+ <map-meta data-testid="large-zoom-bounds" name="zoom" content="min=5,max=21"></map-meta>
+ <map-meta name="extent" content="zoom=17,top-left-column=25000,top-left-row=30500,bottom-right-column=31250,bottom-right-row=35300"></map-meta>
+ <map-meta data-testid="large-extent" name="extent" content="top-left-easting=-5329325, top-left-northing=5643026, bottom-right-easting=5915489, bottom-right-northing=-5601788"></map-meta>
+ <!-- this feature has the extent of the large-extent,which includes all of the inline-extent bounds -->
+ <!-- <map-feature><map-featurecaption>test</map-featurecaption><map-geometry cs="pcrs"><map-polygon><map-coordinates>-5329325 5643026 5915489 5643026 5915489 -5601788 -5329325 -5601788 -5329325 5643026</map-coordinates></map-polygon></map-geometry></map-feature> -->
+ </map-link>
+ </map-extent>
+
+ </layer->
+ </mapml-viewer>
+ </body>
+</html>