Maps4HTML · prushforth · Oct 21, 2024 · Oct 16, 2024 · Oct 17, 2024 · Oct 17, 2024
diff --git a/README.md b/README.md
@@ -18,26 +18,26 @@ See [instructions](https://maps4html.org/web-map-doc/docs/installation#install-t
 ## Usage
 
 You create a map with one or more layers via the &lt;mapml-viewer> HTML tag. Add
-layers via the &lt;layer-> tag with content OR a src attribute pointing to a 
+layers via the &lt;map-layer> tag with content OR a src attribute pointing to a 
 MapML document (must be served as either `text/mapml` or `application/xml` content
 type):
 
 ```html
 <mapml-viewer projection="OSMTILE" zoom="0" lat="0.0" lon="0.0" controls>
-  <layer- label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></layer->
+  <map-layer label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></map-layer>
 </mapml-viewer>
 ```
 OR inline content
 ```html
 <mapml-viewer projection="OSMTILE" lat="10" lon="0" zoom="1" controls>
-  <layer- label="OpenStreetMap" checked>
+  <map-layer label="OpenStreetMap" checked>
     <map-extent units="OSMTILE">
       <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
       <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
       <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
       <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
     </map-extent>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 ```
 

diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@
          vertical-align: middle;
        } 
 
-       /* Pre-style to avoid FOUC of inline layer- and fallback content. */ 
+       /* Pre-style to avoid FOUC of inline map-layer and fallback content. */ 
        mapml-viewer:not(:defined) > * { 
          display: none; 
        } 
@@ -70,7 +70,7 @@
         contain-intrinsic-size: 304px 154px;
       }
 
-      /* Pre-style to avoid FOUC of inline layer- and fallback content. */
+      /* Pre-style to avoid FOUC of inline map-layer and fallback content. */
       map[is="web-map"]:not(:defined) + img[usemap],
       map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) {
         display: none;
@@ -80,15 +80,15 @@
       supported, or if javascript is disabled. This needs to be defined separately
       from the above, because the `:not(:defined)` selector invalidates the entire
       declaration in browsers that do not support it. */
-      layer- {
+      map-layer {
         display: none;
       }
      </style> 
      <noscript> 
        <style> 
          /* Ensure fallback content (children of the map element) is displayed if 
          custom/built-in elements is supported but javascript is disabled. */ 
-         mapml-viewer:not(:defined) > :not(layer-) { 
+         mapml-viewer:not(:defined) > :not(map-layer) { 
            display: initial; 
          } 
 
@@ -118,16 +118,16 @@
   <body>
 
     <mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
-      <layer- data-testid="osm-layer" label="OpenStreetMap" checked >
+      <map-layer data-testid="osm-layer" label="OpenStreetMap" checked >
         <map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
         <map-extent units="OSMTILE" checked="checked">
           <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
           <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
           <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
           <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
         </map-extent>
-      </layer->
-      <layer- label="Restaurants" checked="">
+      </map-layer>
+      <map-layer label="Restaurants" checked="">
         <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
         <map-extent units="OSMTILE" checked="">
            <map-select id="restaurants" name="cusine">
@@ -141,19 +141,19 @@
            </map-select>
            <map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
         </map-extent>
-      </layer->
+      </map-layer>
     </mapml-viewer>
     <map is="web-map" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
-      <layer- data-testid="osm-layer" label="OpenStreetMap" checked >
+      <map-layer data-testid="osm-layer" label="OpenStreetMap" checked >
         <map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
         <map-extent units="OSMTILE" checked="checked">
           <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
           <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
           <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
           <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
         </map-extent>
-      </layer->
-      <layer- label="Restaurants" checked="">
+      </map-layer>
+      <map-layer label="Restaurants" checked="">
         <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
         <map-extent units="OSMTILE" checked="">
            <map-select id="restaurants" name="cusine">
@@ -167,7 +167,7 @@
            </map-select>
            <map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
         </map-extent>
-      </layer->
+      </map-layer>
     </map>
   </body>
 </html>
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 MapLayer extends HTMLElement {
+export class BaseLayerElement extends HTMLElement {
   static get observedAttributes() {
     return ['src', 'label', 'checked', 'hidden', 'opacity'];
   }
@@ -429,7 +429,7 @@ export class MapLayer extends HTMLElement {
   /*
    * Runs the effects of the mutation observer, which is to add map-features' and
    * map-extents' leaflet layer implementations to the appropriate container in
-   * the layer-._layer: either as a sub-layer directly in the L.LayerGroup
+   * the map-layer._layer: either as a sub-layer directly in the L.LayerGroup
    * (MapMLLayer._layer) or as a sub-layer in the MapMLLayer._mapmlvectors
    * L.FeatureGroup
    */
@@ -516,8 +516,8 @@ export class MapLayer extends HTMLElement {
     }
   }
   /*
-   * Set up a function to watch additions of child elements of layer- or
-   * layer-.shadowRoot and to invoke desired side  effects of those additions
+   * Set up a function to watch additions of child elements of map-layer or
+   * map-layer.shadowRoot and to invoke desired side  effects of those additions
    * via _runMutationObserver
    */
   _bindMutationObserver() {
@@ -539,7 +539,10 @@ export class MapLayer extends HTMLElement {
     var i = 0,
       position = 1;
     for (var nodes = this.parentNode.children; i < nodes.length; i++) {
-      if (this.parentNode.children[i].nodeName === '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) {
@@ -681,7 +684,7 @@ export class MapLayer extends HTMLElement {
       }
     }
   }
-  // disable/italicize layer control elements based on the layer-.disabled property
+  // disable/italicize layer control elements based on the map-layer.disabled property
   toggleLayerControlDisabled() {
     let input = this._layerControlCheckbox,
       label = this._layerControlLabel,

diff --git a/src/map-a.js b/src/map-a.js
@@ -1,4 +1,4 @@
-export class MapA extends HTMLElement {
+export class HTMLAnchorElement extends HTMLElement {
   static get observedAttributes() {
     return ['href', 'target', 'type', 'inplace'];
   }

diff --git a/src/map-area.js b/src/map-area.js
@@ -1,4 +1,4 @@
-export class MapArea extends HTMLAreaElement {
+export class HTMLMapAreaElement extends HTMLAreaElement {
   static get observedAttributes() {
     return ['coords', 'alt', 'href', 'shape', 'rel', 'type', 'target'];
   }

diff --git a/src/map-caption.js b/src/map-caption.js
@@ -2,7 +2,7 @@
 implemented for both mapml-viewer and web-map; however web-map does not focus on map element in the browser resulting in NVDA 
 not being able to read out map-caption and stating that it's an interactive map region
 */
-export class MapCaption extends HTMLElement {
+export class HTMLMapCaptionElement extends HTMLElement {
   constructor() {
     super();
   }

diff --git a/src/map-extent.js b/src/map-extent.js
@@ -3,7 +3,7 @@ import { extentLayer } from './mapml/layers/ExtentLayer';
 import { createLayerControlExtentHTML } from './mapml/elementSupport/extents/createLayerControlForExtent';
 
 /* global M */
-export class MapExtent extends HTMLElement {
+export class HTMLExtentElement extends HTMLElement {
   static get observedAttributes() {
     return ['checked', 'label', 'opacity', 'hidden'];
   }
@@ -134,7 +134,7 @@ export class MapExtent extends HTMLElement {
     return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return Util.getClosest(this, 'layer-');
+    return Util.getClosest(this, 'map-layer,layer-');
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (this.#hasConnected /* jshint ignore:line */) {
@@ -234,7 +234,7 @@ export class MapExtent extends HTMLElement {
     this._changeHandler = this._handleChange.bind(this);
   }
   async connectedCallback() {
-    // this.parentNode.host returns the layer- element when parentNode is
+    // this.parentNode.host returns the map-layer element when parentNode is
     // the shadow root
     this.parentLayer = this.getLayerEl();
     if (
@@ -246,8 +246,8 @@ export class MapExtent extends HTMLElement {
     await this.mapEl.whenProjectionDefined(this.units).catch(() => {
       throw new Error('Undefined projection:' + this.units);
     });
-    // when projection is changed, the parent layer-._layer is created (so whenReady is fulfilled) but then removed,
-    // then the map-extent disconnectedCallback will be triggered by layer-._onRemove() (clear the shadowRoot)
+    // when projection is changed, the parent map-layer._layer is created (so whenReady is fulfilled) but then removed,
+    // then the map-extent disconnectedCallback will be triggered by map-layer._onRemove() (clear the shadowRoot)
     // even before connectedCallback is finished
     // in this case, the microtasks triggered by the fulfillment of the removed MapMLLayer should be stopped as well
     // !this.isConnected <=> the disconnectedCallback has run before
@@ -430,7 +430,7 @@ export class MapExtent extends HTMLElement {
   _handleChange() {
     // add _extentLayer to map if map-extent is checked, otherwise remove it
     if (this.checked && !this.disabled) {
-      // can be added to mapmllayer layerGroup no matter layer- is checked or not
+      // can be added to mapmllayer layerGroup no matter map-layer is checked or not
       this._extentLayer.addTo(this.parentLayer._layer);
       this._extentLayer.setZIndex(
         Array.from(
@@ -462,8 +462,8 @@ export class MapExtent extends HTMLElement {
     }
   }
   disconnectedCallback() {
-    // in case of projection change, the disconnectedcallback will be triggered by removing layer-._layer even before
-    // map-extent.connectedcallback is finished (because it will wait for the layer- to be ready)
+    // in case of projection change, the disconnectedcallback will be triggered by removing map-layer._layer even before
+    // map-extent.connectedcallback is finished (because it will wait for the map-layer to be ready)
     // !this._extentLayer <=> this.connectedCallback has not yet been finished before disconnectedCallback is triggered
     if (
       this.hasAttribute('data-moving') ||

diff --git a/src/map-feature.js b/src/map-feature.js
@@ -1,6 +1,6 @@
 import { Util } from './mapml/utils/Util';
 
-export class MapFeature extends HTMLElement {
+export class HTMLFeatureElement extends HTMLElement {
   static get observedAttributes() {
     return ['zoom', 'min', 'max'];
   }
@@ -137,7 +137,7 @@ export class MapFeature extends HTMLElement {
     return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return Util.getClosest(this, 'layer-');
+    return Util.getClosest(this, 'map-layer,layer-');
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -167,6 +167,7 @@ export class MapFeature extends HTMLElement {
     // used for fallback zoom getter for static features
     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
@@ -569,7 +570,7 @@ export class MapFeature extends HTMLElement {
     let clickEv = new PointerEvent('click', { cancelable: true });
     clickEv.originalEvent = event;
     this.dispatchEvent(clickEv);
-    // for custom projection, layer- element may disconnect and re-attach to the map after the click
+    // for custom projection, map-layer element may disconnect and re-attach to the map after the click
     // so check whether map-feature element is still connected before any further operations
     if (properties && this.isConnected) {
       let geometry = this._geometry,

diff --git a/src/map-geometry.js b/src/map-geometry.js
@@ -1,4 +1,4 @@
-export class MapGeometry extends HTMLElement {
+export class HTMLGeometryElement extends HTMLElement {
   static get observedAttributes() {
     return ['cs'];
   }

diff --git a/src/map-input.js b/src/map-input.js
@@ -6,7 +6,7 @@ import { HeightInput } from './mapml/elementSupport/inputs/heightInput';
 import { LocationInput } from './mapml/elementSupport/inputs/locationInput';
 
 /* global M */
-export class MapInput extends HTMLElement {
+export class HTMLInputElement extends HTMLElement {
   static get observedAttributes() {
     return [
       'name',
@@ -183,7 +183,7 @@ export class MapInput extends HTMLElement {
     return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return Util.getClosest(this, '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
@@ -5,7 +5,7 @@ import { templatedFeaturesLayer } from './mapml/layers/TemplatedFeaturesLayer';
 import { templatedPMTilesLayer } from './mapml/layers/TemplatedPMTilesLayer';
 /* global M */
 
-export class MapLink extends HTMLElement {
+export class HTMLLinkElement extends HTMLElement {
   static get observedAttributes() {
     return [
       'type',
@@ -163,7 +163,7 @@ export class MapLink extends HTMLElement {
     return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return Util.getClosest(this, 'layer-');
+    return Util.getClosest(this, 'map-layer,layer-');
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -296,7 +296,7 @@ export class MapLink extends HTMLElement {
     // create the type of templated leaflet layer appropriate to the rel value
     // image/map/features = templated(Image/Feature), tile=templatedTile,
     // this._tempatedTileLayer = Util.templatedTile(pane: this.extentElement._leafletLayer._container)
-    // add to viewer._map dependant on map-extent.checked, layer-.checked
+    // add to viewer._map dependant on map-extent.checked, map-layer.checked
     // what else?
   }
   disconnectedCallback() {
@@ -320,7 +320,7 @@ export class MapLink extends HTMLElement {
     //  in the parent <map-link>._templatedLayer.container root node if
     //  the _templatedLayer is an instance of TemplatedTileLayer or TemplatedFeaturesLayer
     //
-    // if the parent node (or the host of the shadow root parent node) is layer-, the link should be created in the _layer
+    // if the parent node (or the host of the shadow root parent node) is map-layer, the link should be created in the _layer
     // container
     this._stylesheetHost =
       this.getRootNode() instanceof ShadowRoot
@@ -382,7 +382,13 @@ export class MapLink extends HTMLElement {
           this.getRootNode().querySelector(':host > ' + s)
         : Util.getClosest(
             this,
-            'map-extent:has(' + s + '),layer-:has(' + s + ')'
+            'map-extent:has(' +
+              s +
+              '),map-layer:has(' +
+              s +
+              '),layer-:has(' +
+              s +
+              ')'
           )?.querySelector(s);
       let options = {
         zoomBounds: this.getZoomBounds(),
@@ -640,7 +646,7 @@ export class MapLink extends HTMLElement {
    * TODO: review getBounds for sanity, also getFallbackBounds, perhaps integrate
    * there is no other kind of bounds but native....
    *  each rectangle must be established and valid and converted to PCRS coordinates...
-    // "native" bounds = input type=location min max || map-extent/map-meta name=extent min,max || layer-/map-meta name=extent min,max || layer projection min/max
+    // "native" bounds = input type=location min max || map-extent/map-meta name=extent min,max || map-layer/map-meta name=extent min,max || layer projection min/max
  */
   getBounds() {
     let template = this._templateVars;
@@ -772,7 +778,7 @@ export class MapLink extends HTMLElement {
         ? /* use the baseURI algorithm which takes into account any <base> */
           this.getRootNode().querySelector('map-base')?.getAttribute('href') ||
           this.baseURI
-        : /* else use the resolved <layer- src="..."> value */ new URL(
+        : /* else use the resolved <map-layer src="..."> value */ new URL(
             layer.src,
             layer.baseURI
           ).href;

diff --git a/src/map-meta.js b/src/map-meta.js
@@ -1,4 +1,4 @@
-export class MapMeta extends HTMLElement {
+export class HTMLMetaElement extends HTMLElement {
   static get observedAttributes() {
     return ['name', 'content'];
   }