diff --git a/README.md b/README.md
index 4770f6ca9..c0792cfb3 100644
--- 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
index 0c44a7f28..c2cd34860 100644
--- 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,7 +80,7 @@
       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> 
@@ -88,7 +88,7 @@
        <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,7 +118,7 @@
   <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>
@@ -126,8 +126,8 @@
           <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,10 +141,10 @@
            </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>
@@ -152,8 +152,8 @@
           <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
index b814f84b0..bd682c2c8 100644
--- 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 HTMLMapLayerElement 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,7 @@ 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') {
         if (this.parentNode.children[i] === this) {
           position = i + 1;
         } else if (this.parentNode.children[i]._layer) {
@@ -681,7 +681,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
index 8b2488073..d57712305 100644
--- a/src/map-a.js
+++ b/src/map-a.js
@@ -1,4 +1,4 @@
-export class MapA extends HTMLElement {
+export class HTMLMapAnchorElement extends HTMLElement {
   static get observedAttributes() {
     return ['href', 'target', 'type', 'inplace'];
   }
diff --git a/src/map-area.js b/src/map-area.js
index 747f775a0..ecbf4d1d6 100644
--- 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
index ad8e485d4..4a9767afb 100644
--- 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
index b65a568be..84b9f6b70 100644
--- 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 HTMLMapExtentElement 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');
   }
   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
index c8c0c4fe1..967820847 100644
--- 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 HTMLMapFeatureElement 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');
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -167,7 +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() === 'LAYER-' ||
+      this.parentNode.nodeName.toUpperCase() === 'MAP-LAYER' ||
       this.parentNode.nodeName.toUpperCase() === 'MAP-LINK'
         ? this.parentNode
         : this.parentNode.host;
@@ -569,7 +569,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
index e6db1c02f..5da510b2d 100644
--- a/src/map-geometry.js
+++ b/src/map-geometry.js
@@ -1,4 +1,4 @@
-export class MapGeometry extends HTMLElement {
+export class HTMLMapGeometryElement extends HTMLElement {
   static get observedAttributes() {
     return ['cs'];
   }
diff --git a/src/map-input.js b/src/map-input.js
index fb11f4da2..e5452e566 100644
--- 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 HTMLMapInputElement 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');
   }
   attributeChangedCallback(name, oldValue, newValue) {
     this.whenReady()
diff --git a/src/map-link.js b/src/map-link.js
index 3be2bd175..d6279c593 100644
--- 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 HTMLMapLinkElement 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');
   }
 
   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,7 @@ 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 + ')'
           )?.querySelector(s);
       let options = {
         zoomBounds: this.getZoomBounds(),
@@ -640,7 +640,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 +772,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
index ef3d92344..9d2f75168 100644
--- a/src/map-meta.js
+++ b/src/map-meta.js
@@ -1,4 +1,4 @@
-export class MapMeta extends HTMLElement {
+export class HTMLMapMetaElement extends HTMLElement {
   static get observedAttributes() {
     return ['name', 'content'];
   }
diff --git a/src/map-properties.js b/src/map-properties.js
index f3ef7c392..374d1cfce 100644
--- a/src/map-properties.js
+++ b/src/map-properties.js
@@ -1,4 +1,4 @@
-export class MapProperties extends HTMLElement {
+export class HTMLMapPropertiesElement extends HTMLElement {
   static get observedAttributes() {
     return;
   }
diff --git a/src/map-select.js b/src/map-select.js
index d17a2687d..04a715a64 100644
--- a/src/map-select.js
+++ b/src/map-select.js
@@ -1,4 +1,4 @@
-export class MapSelect extends HTMLElement {
+export class HTMLMapSelectElement extends HTMLElement {
   static get observedAttributes() {
     return ['name', 'id'];
   }
diff --git a/src/map-span.js b/src/map-span.js
index c9406958d..0c0dc8180 100644
--- a/src/map-span.js
+++ b/src/map-span.js
@@ -1,4 +1,4 @@
-export class MapSpan extends HTMLElement {
+export class HTMLMapSpanElement extends HTMLElement {
   static get observedAttributes() {
     return;
   }
diff --git a/src/map-style.js b/src/map-style.js
index 6073e8847..438e23739 100644
--- a/src/map-style.js
+++ b/src/map-style.js
@@ -1,4 +1,4 @@
-export class MapStyle extends HTMLElement {
+export class HTMLMapStyleElement extends HTMLElement {
   static get observedAttributes() {
     return;
   }
@@ -15,7 +15,7 @@ export class MapStyle 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
diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
index 2486d8b16..ed766c0a8 100644
--- a/src/mapml-viewer.js
+++ b/src/mapml-viewer.js
@@ -1,16 +1,16 @@
 import { Util } from './mapml/utils/Util';
 import { DOMTokenList } from './mapml/utils/DOMTokenList';
 
-import { MapLayer } from './layer.js';
-import { MapCaption } from './map-caption.js';
-import { MapFeature } from './map-feature.js';
-import { MapExtent } from './map-extent.js';
-import { MapInput } from './map-input.js';
-import { MapSelect } from './map-select.js';
-import { MapLink } from './map-link.js';
-import { MapStyle } from './map-style.js';
-import { WebMap } from './web-map';
-import { MapArea } from './map-area.js';
+import { HTMLMapLayerElement } from './layer.js';
+import { HTMLMapCaptionElement } from './map-caption.js';
+import { HTMLMapFeatureElement } from './map-feature.js';
+import { HTMLMapExtentElement } from './map-extent.js';
+import { HTMLMapInputElement } from './map-input.js';
+import { HTMLMapSelectElement } from './map-select.js';
+import { HTMLMapLinkElement } from './map-link.js';
+import { HTMLMapStyleElement } from './map-style.js';
+import { HTMLWebMapElement } from './web-map';
+import { HTMLMapAreaElement } from './map-area.js';
 
 import { layerControl } from './mapml/control/LayerControl';
 import { AttributionButton } from './mapml/control/AttributionButton';
@@ -22,7 +22,7 @@ import { debugOverlay } from './mapml/layers/DebugOverlay';
 import { crosshair } from './mapml/layers/Crosshair';
 import { featureIndexOverlay } from './mapml/layers/FeatureIndexOverlay';
 
-export class MapViewer extends HTMLElement {
+export class HTMLMapmlViewerElement extends HTMLElement {
   static get observedAttributes() {
     return [
       'lat',
@@ -115,7 +115,7 @@ export class MapViewer extends HTMLElement {
     }
   }
   get layers() {
-    return this.getElementsByTagName('layer-');
+    return this.getElementsByTagName('map-layer');
   }
 
   get extent() {
@@ -390,7 +390,7 @@ export class MapViewer extends HTMLElement {
           this._map.options.projection = newValue;
           let layersReady = [];
           this._map.announceMovement.disable();
-          for (let layer of this.querySelectorAll('layer-')) {
+          for (let layer of this.querySelectorAll('map-layer')) {
             layer.removeAttribute('disabled');
             let reAttach = this.removeChild(layer);
             this.appendChild(reAttach);
@@ -404,7 +404,7 @@ export class MapViewer extends HTMLElement {
             this.zoomTo(lat, lon, zoom);
             if (M.options.announceMovement) this._map.announceMovement.enable();
             // required to delay until map-extent.disabled is correctly set
-            // which happens as a result of layer-._validateDisabled()
+            // which happens as a result of map-layer._validateDisabled()
             // which happens so much we have to delay until they calls are
             // completed
             setTimeout(() => {
@@ -642,7 +642,7 @@ export class MapViewer extends HTMLElement {
     this.addEventListener(
       'change',
       function (e) {
-        if (e.target.tagName === 'LAYER-') {
+        if (e.target.tagName === 'MAP-LAYER') {
           this.dispatchEvent(
             new CustomEvent('layerchange', {
               details: { target: this, originalEvent: e }
@@ -667,7 +667,7 @@ export class MapViewer extends HTMLElement {
         );
       }
     });
-    // pasting layer-, links and geojson using Ctrl+V
+    // pasting map-layer, links and geojson using Ctrl+V
     this.addEventListener('keydown', function (e) {
       if (e.keyCode === 86 && e.ctrlKey) {
         navigator.clipboard.readText().then((layer) => {
@@ -1404,7 +1404,7 @@ export class MapViewer extends HTMLElement {
   }
   whenLayersReady() {
     let layersReady = [];
-    // check if all the children elements (map-extent, map-feature) of all layer- are ready
+    // check if all the children elements (map-extent, map-feature) of all map-layer are ready
     for (let layer of [...this.layers]) {
       layersReady.push(layer.whenReady());
     }
@@ -1442,20 +1442,37 @@ export class MapViewer extends HTMLElement {
     return geojsonLayer;
   }
 }
-window.customElements.define('mapml-viewer', MapViewer);
+window.customElements.define('mapml-viewer', HTMLMapmlViewerElement);
 try {
-  window.customElements.define('web-map', WebMap, { extends: 'map' });
-  window.customElements.define('map-area', MapArea, { extends: 'area' });
+  window.customElements.define('web-map', HTMLWebMapElement, {
+    extends: 'map'
+  });
+  window.customElements.define('map-area', HTMLMapAreaElement, {
+    extends: 'area'
+  });
 } catch (error) {
   console.log(
     'Exception occurred while defining custom built-in elements:\n' + error
   );
 }
-window.customElements.define('layer-', MapLayer);
-window.customElements.define('map-caption', MapCaption);
-window.customElements.define('map-feature', MapFeature);
-window.customElements.define('map-extent', MapExtent);
-window.customElements.define('map-input', MapInput);
-window.customElements.define('map-select', MapSelect);
-window.customElements.define('map-link', MapLink);
-window.customElements.define('map-style', MapStyle);
+window.customElements.define('map-layer', HTMLMapLayerElement);
+window.customElements.define('map-caption', HTMLMapCaptionElement);
+window.customElements.define('map-feature', HTMLMapFeatureElement);
+window.customElements.define('map-extent', HTMLMapExtentElement);
+window.customElements.define('map-input', HTMLMapInputElement);
+window.customElements.define('map-select', HTMLMapSelectElement);
+window.customElements.define('map-link', HTMLMapLinkElement);
+window.customElements.define('map-style', HTMLMapStyleElement);
+
+export {
+  HTMLMapLayerElement,
+  HTMLMapCaptionElement,
+  HTMLMapFeatureElement,
+  HTMLMapExtentElement,
+  HTMLMapInputElement,
+  HTMLMapSelectElement,
+  HTMLMapLinkElement,
+  HTMLMapStyleElement,
+  HTMLWebMapElement,
+  HTMLMapAreaElement
+};
diff --git a/src/mapml/elementSupport/layers/createLayerControlForLayer.js b/src/mapml/elementSupport/layers/createLayerControlForLayer.js
index e80b9a2df..2835e2600 100644
--- a/src/mapml/elementSupport/layers/createLayerControlForLayer.js
+++ b/src/mapml/elementSupport/layers/createLayerControlForLayer.js
@@ -262,8 +262,8 @@ export var createLayerControlHTML = async function () {
             mapEl.insertAdjacentElement('beforeend', layerEl);
             layerEl.removeAttribute('data-moving');
           }
-          // update zIndex of all layer- elements
-          let layers = mapEl.querySelectorAll('layer-');
+          // update zIndex of all map-layer elements
+          let layers = mapEl.querySelectorAll('map-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
index a5c8df807..af9e6cbb2 100644
--- a/src/mapml/features/path.js
+++ b/src/mapml/features/path.js
@@ -75,7 +75,10 @@ export var Path = L.Path.extend({
       let onTop = true,
         nextLayer = this.options._leafletLayer._layerEl.nextElementSibling;
       while (nextLayer && onTop) {
-        if (nextLayer.tagName && nextLayer.tagName.toUpperCase() === 'LAYER-')
+        if (
+          nextLayer.tagName &&
+          nextLayer.tagName.toUpperCase() === 'MAP-LAYER'
+        )
           onTop = !nextLayer.queryable();
         nextLayer = nextLayer.nextElementSibling;
       }
diff --git a/src/mapml/handlers/AnnounceMovement.js b/src/mapml/handlers/AnnounceMovement.js
index 7dc4207ef..de2b52052 100644
--- 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('layer-');
+      let layers = map.querySelectorAll('map-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/index.js b/src/mapml/index.js
index e650b037d..cc9ef71af 100644
--- a/src/mapml/index.js
+++ b/src/mapml/index.js
@@ -44,4 +44,29 @@ import '../../dist/proj4-src.js';
 import '../../dist/proj4leaflet.js';
 import '../../dist/L.Control.Locate.js';
 import './GlobalM.js';
-export { MapViewer } from '../mapml-viewer';
+
+import { HTMLMapmlViewerElement } from '../mapml-viewer';
+import { HTMLMapLayerElement } from '../mapml-viewer';
+import { HTMLMapCaptionElement } from '../mapml-viewer';
+import { HTMLMapFeatureElement } from '../mapml-viewer';
+import { HTMLMapExtentElement } from '../mapml-viewer';
+import { HTMLMapInputElement } from '../mapml-viewer';
+import { HTMLMapSelectElement } from '../mapml-viewer';
+import { HTMLMapLinkElement } from '../mapml-viewer';
+import { HTMLMapStyleElement } from '../mapml-viewer';
+import { HTMLWebMapElement } from '../mapml-viewer';
+import { HTMLMapAreaElement } from '../mapml-viewer';
+
+window.MapML = {
+  HTMLMapmlViewerElement,
+  HTMLMapLayerElement,
+  HTMLMapCaptionElement,
+  HTMLMapFeatureElement,
+  HTMLMapExtentElement,
+  HTMLMapInputElement,
+  HTMLMapSelectElement,
+  HTMLMapLinkElement,
+  HTMLMapStyleElement,
+  HTMLWebMapElement,
+  HTMLMapAreaElement
+};
diff --git a/src/mapml/layers/DebugOverlay.js b/src/mapml/layers/DebugOverlay.js
index 7f8605487..f4f3c3458 100644
--- a/src/mapml/layers/DebugOverlay.js
+++ b/src/mapml/layers/DebugOverlay.js
@@ -211,7 +211,7 @@ export var DebugVectors = L.LayerGroup.extend({
   },
 
   _addBounds: function (map) {
-    // to delay the addBounds to wait for the layer.extentbounds / layer.layerbounds to be ready when the layer- checked attribute is changed
+    // to delay the addBounds to wait for the layer.extentbounds / layer.layerbounds to be ready when the map-layer checked attribute is changed
     setTimeout(() => {
       let id = Object.keys(map._layers),
         layers = map._layers,
@@ -245,7 +245,7 @@ export var DebugVectors = L.LayerGroup.extend({
             ];
           }
 
-          // boundsTestTag adds the value of from the <layer-@data-testid> element
+          // boundsTestTag adds the value of from the <map-layer@data-testid> element
           // if it exists. this simplifies debugging because the svg path will be
           // tagged with the layer it came from
           let boundsTestTag =
diff --git a/src/mapml/layers/FeatureLayer.js b/src/mapml/layers/FeatureLayer.js
index af5909f02..1d2dd4d27 100644
--- a/src/mapml/layers/FeatureLayer.js
+++ b/src/mapml/layers/FeatureLayer.js
@@ -13,7 +13,7 @@ export var FeatureLayer = L.FeatureGroup.extend({
         mapml:
         1. for query: an array of map-feature elements that it fetches
         2. for static templated feature: null
-        3. for non-templated feature: layer- (with no src) or mapml file (with src)
+        3. for non-templated feature: map-layer (with no src) or mapml file (with src)
       */
     // options.extent: when you use a FeatureLayer, you can either get it to calculate the
     // .layerBounds dynamically (the default), based on adds/removes of features from the layer/
@@ -173,10 +173,10 @@ export var FeatureLayer = L.FeatureGroup.extend({
     L.FeatureGroup.prototype.removeLayer.call(this, featureToRemove);
     if (!this.options.layerBounds) {
       delete this.layerBounds;
-      // this ensures that the <layer->.extent gets recalculated if needed
+      // this ensures that the <map-layer>.extent gets recalculated if needed
       delete this.options._leafletLayer.bounds;
       delete this.zoomBounds;
-      // this ensures that the <layer->.extent gets recalculated if needed
+      // this ensures that the <map-layer>.extent gets recalculated if needed
       delete this.options._leafletLayer.zoomBounds;
       delete this._layers[featureToRemove._leaflet_id];
       this._removeFromFeaturesList(featureToRemove);
diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
index a46d1e4a1..a5dbff558 100644
--- a/src/mapml/layers/MapMLLayer.js
+++ b/src/mapml/layers/MapMLLayer.js
@@ -11,7 +11,7 @@ export var MapMLLayer = L.LayerGroup.extend({
   // initialize is executed before the layer is added to a map
   initialize: function (href, layerEl, options) {
     // in the custom element, the attribute is actually 'src'
-    // the _href version is the URL received from layer-@src
+    // the _href version is the URL received from map-layer@src
     L.LayerGroup.prototype.initialize.call(this, null, options);
     if (href) {
       this._href = href;
@@ -64,7 +64,7 @@ export var MapMLLayer = L.LayerGroup.extend({
   },
   setName(newName) {
     // a layer's accessible name is set by the <map-title>, if present
-    // if it's not available the <layer- label="accessible-name"> attribute
+    // if it's not available the <map-layer label="accessible-name"> attribute
     // can be used
     if (!this.titleIsReadOnly()) {
       this._title = newName;
@@ -232,7 +232,7 @@ export var MapMLLayer = L.LayerGroup.extend({
     return new URL(
       this._content.querySelector('map-base')
         ? this._content.querySelector('map-base').getAttribute('href')
-        : this._content.nodeName === 'LAYER-'
+        : this._content.nodeName === 'MAP-LAYER'
         ? this._content.baseURI
         : this._href,
       this._href
@@ -650,7 +650,7 @@ export var MapMLLayer = L.LayerGroup.extend({
         map.getContainer().focus();
       };
       // we found that the popupopen event is fired as many times as there
-      // are layers on the map (<layer-> elements / MapMLLayers that is).
+      // are layers on the map (<map-layer> elements / MapMLLayers that is).
       // In each case the target layer is always this layer, so we can't
       // detect and conditionally add the zoomLink if the target is not this.
       // so, like Ahmad, we are taking a 'delete everyting each time'
diff --git a/src/mapml/layers/StaticTileLayer.js b/src/mapml/layers/StaticTileLayer.js
index cb693a143..622956b9f 100644
--- a/src/mapml/layers/StaticTileLayer.js
+++ b/src/mapml/layers/StaticTileLayer.js
@@ -124,7 +124,7 @@ export var StaticTileLayer = L.GridLayer.extend({
 
   _getZoomBounds: function (container, maxZoomBound) {
     if (!container) return null;
-    // should read zoom information from map-meta (of layer-) instead of the zoom attribute value of map-tile
+    // should read zoom information from map-meta (of map-layer) instead of the zoom attribute value of map-tile
     let meta = Util._metaContentToObject(
         this.options._leafletLayer._layerEl
           .querySelector('map-meta[name=zoom]')
diff --git a/src/mapml/layers/TemplatedFeaturesLayer.js b/src/mapml/layers/TemplatedFeaturesLayer.js
index f309a94dc..c4edacb76 100644
--- a/src/mapml/layers/TemplatedFeaturesLayer.js
+++ b/src/mapml/layers/TemplatedFeaturesLayer.js
@@ -145,7 +145,7 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
       steppedZoom
     );
 
-    // should set this.isVisible properly BEFORE return, otherwise will cause layer-.validateDisabled not work properly
+    // should set this.isVisible properly BEFORE return, otherwise will cause map-layer.validateDisabled not work properly
     let url = this._getfeaturesUrl(steppedZoom, scaleBounds);
     // No request needed if the current template url is the same as the url to request
     if (url === this._url) return;
diff --git a/src/mapml/utils/Util.js b/src/mapml/utils/Util.js
index 8ee8109e0..b69f743a1 100644
--- a/src/mapml/utils/Util.js
+++ b/src/mapml/utils/Util.js
@@ -376,7 +376,7 @@ export const Util = {
       if (['/', '.', '#'].includes(link.url[0])) link.target = '_self';
     }
     if (!justPan) {
-      layer = document.createElement('layer-');
+      layer = document.createElement('map-layer');
       layer.setAttribute('src', link.url);
       layer.setAttribute('checked', '');
       switch (link.target) {
@@ -390,7 +390,7 @@ export const Util = {
           break;
         case '_parent':
           postTraversalSetup();
-          for (let l of map.options.mapEl.querySelectorAll('layer-'))
+          for (let l of map.options.mapEl.querySelectorAll('map-layer'))
             if (l._layer !== leafletLayer) map.options.mapEl.removeChild(l);
           map.options.mapEl.appendChild(layer);
           map.options.mapEl.removeChild(leafletLayer._layerEl);
@@ -588,8 +588,8 @@ export const Util = {
   // 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: mapml-||map-layer||null||[map-feature,...] -> {zoom: _, val: _}
+  // mapml can be a mapml- element, map-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
@@ -614,7 +614,7 @@ export const Util = {
           ).content) ||
         'GCRS';
     } else {
-      // when mapml is null or a layer-/mapml- element
+      // when mapml is null or a map-layer/mapml- element
       nativeZoom =
         (mapml.querySelector &&
           mapml.querySelector('map-meta[name=zoom]') &&
@@ -643,20 +643,20 @@ export const Util = {
     return [column, row];
   },
 
-  // Pastes text to a mapml-viewer/map element(mapEl), text can be a mapml link, geojson, or a layer-
+  // Pastes text to a mapml-viewer/map element(mapEl), text can be a mapml link, geojson, or a map-layer
   //    used for pasting layers through ctrl+v, drag/drop, and pasting through the contextmenu
   // _pasteLayer: HTMLElement Str -> None
-  // Effects: append a layer- element to mapEl, if it is valid
+  // Effects: append a map-layer element to mapEl, if it is valid
   _pasteLayer: function (mapEl, text) {
     try {
       new URL(text);
-      // create a new <layer-> child of the <mapml-viewer> element
+      // create a new <map-layer> child of the <mapml-viewer> element
       let l =
-        '<layer- src="' +
+        '<map-layer src="' +
         text +
         '" label="' +
         M.options.locale.dfLayer +
-        '" checked=""></layer->';
+        '" checked=""></map-layer>';
       mapEl.insertAdjacentHTML('beforeend', l);
       mapEl.lastElementChild.whenReady().catch(() => {
         if (mapEl) {
@@ -670,17 +670,20 @@ export const Util = {
       text = text
         .replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '')
         .trim();
-      if (text.slice(0, 7) === '<layer-' && text.slice(-9) === '</layer->') {
+      if (
+        text.slice(0, 10) === '<map-layer' &&
+        text.slice(-12) === '</map-layer>'
+      ) {
         mapEl.insertAdjacentHTML('beforeend', text);
       } else if (
         text.slice(0, 12) === '<map-feature' &&
         text.slice(-14) === '</map-feature>'
       ) {
         let layer =
-          `<layer- label="${M.options.locale.dfPastedLayer}" checked>
+          `<map-layer label="${M.options.locale.dfPastedLayer}" checked>
                        <map-meta name='projection' content='${mapEl.projection}'></map-meta>` +
           text +
-          '</layer->';
+          '</map-layer>';
         mapEl.insertAdjacentHTML('beforeend', layer);
       } else {
         try {
@@ -744,14 +747,14 @@ export const Util = {
     return bboxExtent;
   },
 
-  // Takes a GeoJSON geojson and an options Object which returns a <layer-> Element
+  // Takes a GeoJSON geojson and an options Object which returns a <map-layer> Element
   // The options object can contain the following:
   //      label            - String, contains the layer name, if included overrides the default label mapping
   //      projection       - String, contains the projection of the layer (OSMTILE, WGS84, CBMTILE, APSTILE), defaults to   OSMTILE
   //      caption          - Function | String, function accepts one argument being the feature object which produces the   featurecaption string OR a string that is the name of the property that will be mapped to featurecaption
   //      properties       - Function | String | HTMLElement, a function which maps the geojson feature to an HTMLElement   or a string that will be parsed as an HTMLElement or an HTMLElement
   //      geometryFunction - Function, A function you supply that can add classes, hyperlinks and spans to the created  <map-geometry> element, default would be the plain map-geometry element
-  // geojson2mapml: geojson Object <layer-> [min x, min y, max x, max y] -> <layer->
+  // geojson2mapml: geojson Object <map-layer> [min x, min y, max x, max y] -> <map-layer>
   geojson2mapml: function (json, options = {}, layer = null, bboxExtent = {}) {
     let defaults = {
       label: null,
@@ -790,20 +793,20 @@ export const Util = {
       }
       // creating an empty mapml layer
       let xmlStringLayer =
-        "<layer- label='' checked><map-meta name='projection' content='" +
+        "<map-layer label='' checked><map-meta name='projection' content='" +
         options.projection +
-        "'></map-meta><map-meta name='cs' content='gcrs'></map-meta></layer->";
+        "'></map-meta><map-meta name='cs' content='gcrs'></map-meta></map-layer>";
       layer = parser.parseFromString(xmlStringLayer, 'text/html');
       //console.log(layer)
       if (options.label !== null) {
-        layer.querySelector('layer-').setAttribute('label', options.label);
+        layer.querySelector('map-layer').setAttribute('label', options.label);
       } else if (json.name) {
-        layer.querySelector('layer-').setAttribute('label', json.name);
+        layer.querySelector('map-layer').setAttribute('label', json.name);
       } else if (json.title) {
-        layer.querySelector('layer-').setAttribute('label', json.title);
+        layer.querySelector('map-layer').setAttribute('label', json.title);
       } else {
         layer
-          .querySelector('layer-')
+          .querySelector('map-layer')
           .setAttribute('label', M.options.locale.dfLayer);
       }
     }
@@ -847,7 +850,7 @@ export const Util = {
       // Setting bbox if it exists
       if (json.bbox) {
         layer
-          .querySelector('layer-')
+          .querySelector('map-layer')
           .insertAdjacentHTML(
             'afterbegin',
             "<map-meta name='extent' content='top-left-longitude=" +
@@ -881,7 +884,7 @@ export const Util = {
       // Setting bbox if it exists
       if (json.bbox) {
         layer
-          .querySelector('layer-')
+          .querySelector('map-layer')
           .insertAdjacentHTML(
             'afterbegin',
             "<map-meta name='extent' content='top-left-longitude=" +
@@ -907,7 +910,9 @@ export const Util = {
       }
 
       // Setting featurecaption
-      let featureCaption = layer.querySelector('layer-').getAttribute('label');
+      let featureCaption = layer
+        .querySelector('map-layer')
+        .getAttribute('label');
       if (typeof options.caption === 'function') {
         featureCaption = options.caption(json);
       } else if (typeof options.caption === 'string') {
@@ -964,7 +969,7 @@ export const Util = {
       }
 
       // Appending feature to layer
-      layer.querySelector('layer-').appendChild(curr_feature);
+      layer.querySelector('map-layer').appendChild(curr_feature);
     } else if (geometryType.includes(jsonType)) {
       //console.log("Geometry Type - " + jsonType);
       switch (jsonType) {
@@ -1147,7 +1152,7 @@ export const Util = {
     //Add default bbox
     if (setExtent) {
       layer
-        .querySelector('layer-')
+        .querySelector('map-layer')
         .insertAdjacentHTML(
           'afterbegin',
           "<map-meta name='extent' content='top-left-longitude=" +
@@ -1161,7 +1166,7 @@ export const Util = {
             "'></map-meta>"
         );
     }
-    return layer.querySelector('layer-');
+    return layer.querySelector('map-layer');
   },
 
   // Takes an array of length n to return an array of arrays with length 2, helper function
@@ -1312,11 +1317,11 @@ export const Util = {
     return newArr;
   },
 
-  // Takes an <layer-> element and returns a geojson feature collection object
+  // Takes an <map-layer> element and returns a geojson feature collection object
   // The options object can contain the following:
   //      propertyFunction   - function(<map-properties>), A function that maps the features' <map-properties> element to   a GeoJSON "properties" member.
   //      transform          - Bool, Transform coordinates to gcrs values, defaults to True
-  // mapml2geojson: <layer-> Object -> GeoJSON
+  // mapml2geojson: <map-layer> Object -> GeoJSON
   mapml2geojson: function (element, options = {}) {
     let defaults = {
       propertyFunction: null,
diff --git a/src/web-map.js b/src/web-map.js
index e24109fa1..77a59ebf7 100644
--- a/src/web-map.js
+++ b/src/web-map.js
@@ -11,7 +11,7 @@ import { debugOverlay } from './mapml/layers/DebugOverlay';
 import { crosshair } from './mapml/layers/Crosshair';
 import { featureIndexOverlay } from './mapml/layers/FeatureIndexOverlay';
 
-export class WebMap extends HTMLMapElement {
+export class HTMLWebMapElement extends HTMLMapElement {
   static get observedAttributes() {
     return [
       'lat',
@@ -104,7 +104,7 @@ export class WebMap extends HTMLMapElement {
     }
   }
   get layers() {
-    return this.getElementsByTagName('layer-');
+    return this.getElementsByTagName('map-layer');
   }
   get areas() {
     return this.getElementsByTagName('area');
@@ -431,7 +431,7 @@ export class WebMap extends HTMLMapElement {
             this._map.options.projection = newValue;
             let layersReady = [];
             this._map.announceMovement.disable();
-            for (let layer of this.querySelectorAll('layer-')) {
+            for (let layer of this.querySelectorAll('map-layer')) {
               layer.removeAttribute('disabled');
               let reAttach = this.removeChild(layer);
               this.appendChild(reAttach);
@@ -446,7 +446,7 @@ export class WebMap extends HTMLMapElement {
               if (M.options.announceMovement)
                 this._map.announceMovement.enable();
               // required to delay until map-extent.disabled is correctly set
-              // which happens as a result of layer-._validateDisabled()
+              // which happens as a result of map-layer._validateDisabled()
               // which happens so much we have to delay until they calls are
               // completed
               setTimeout(() => {
@@ -685,7 +685,7 @@ export class WebMap extends HTMLMapElement {
     this.addEventListener(
       'change',
       function (e) {
-        if (e.target.tagName === 'LAYER-') {
+        if (e.target.tagName === 'map-layer') {
           this.dispatchEvent(
             new CustomEvent('layerchange', {
               details: { target: this, originalEvent: e }
@@ -711,7 +711,7 @@ export class WebMap extends HTMLMapElement {
         );
       }
     });
-    // pasting layer-, links and geojson using Ctrl+V
+    // pasting map-layer, links and geojson using Ctrl+V
     this.addEventListener('keydown', function (e) {
       if (e.keyCode === 86 && e.ctrlKey) {
         navigator.clipboard.readText().then((layer) => {
@@ -1448,7 +1448,7 @@ export class WebMap extends HTMLMapElement {
   }
   whenLayersReady() {
     let layersReady = [];
-    // check if all the children elements (map-extent, map-feature) of all layer- are ready
+    // check if all the children elements (map-extent, map-feature) of all map-layer are ready
     for (let layer of [...this.layers]) {
       layersReady.push(layer.whenReady());
     }
diff --git a/test/e2e/api/domApi-HTMLLayerElement.html b/test/e2e/api/domApi-HTMLLayerElement.html
index 2a16f04c6..48cbca9aa 100644
--- a/test/e2e/api/domApi-HTMLLayerElement.html
+++ b/test/e2e/api/domApi-HTMLLayerElement.html
@@ -7,9 +7,9 @@
   </head>
   <body>
     <template>
-      <layer- id="remote-with-title" label="This should not appear in layer control" src="with-title.mapml" checked></layer->
-      <layer- id="remote-no-title" label="Layer with name settable via HTMLLayerElement.label" src="no-title.mapml" checked></layer->
-      <layer- id="local-no-title" label="Another Layer with name settable via HTMLLayerElement.label" checked>
+      <map-layer id="remote-with-title" label="This should not appear in layer control" src="with-title.mapml" checked></map-layer>
+      <map-layer id="remote-no-title" label="Layer with name settable via HTMLLayerElement.label" src="no-title.mapml" checked></map-layer>
+      <map-layer id="local-no-title" label="Another Layer with name settable via HTMLLayerElement.label" checked>
         <map-meta name="projection" content="OSMTILE"></map-meta>
         <map-feature id="hg" zoom="3" min="0" max="22">
           <map-featurecaption>Statue of a guy with a hat</map-featurecaption>
@@ -22,8 +22,8 @@
               <h1>A Man With Two Hats</h1>
             </map-properties>
         </map-feature>
-      </layer->
-      <layer- id="local-with-title" label="This should not appear in layer control" checked>
+      </map-layer>
+      <map-layer id="local-with-title" label="This should not appear in layer control" checked>
         <map-title>Layer name set via local map-title element - unsettable via HTMLLayerelement.label</map-title>
         <map-meta name="projection" content="OSMTILE"></map-meta>
         <map-feature id="hg" zoom="3" min="0" max="22">
@@ -37,13 +37,13 @@ <h1>A Man With Two Hats</h1>
               <h1>A Man With Two Hats</h1>
             </map-properties>
         </map-feature>
-      </layer->
+      </map-layer>
     </template>
   <mapml-viewer projection="OSMTILE" controls  zoom="15" lat="45.39778" lon="-75.70528" width="500" height="500">
   </mapml-viewer>
   </body>
   <script type="module">
-    const elementsDefined = ['mapml-viewer','layer-','map-feature'].map((e)=>{customElements.whenDefined(e);});
+    const elementsDefined = ['mapml-viewer','map-layer','map-feature'].map((e)=>{customElements.whenDefined(e);});
     Promise.all(elementsDefined).then(()=>{
       let remoteWithTitle = document.querySelector('template').content.cloneNode(true).querySelector('#remote-with-title');
       remoteWithTitle = document.querySelector('mapml-viewer').appendChild(remoteWithTitle);
diff --git a/test/e2e/api/domApi-HTMLLayerElement.test.js b/test/e2e/api/domApi-HTMLLayerElement.test.js
index 4b2b35b5e..4b0ae94c0 100644
--- a/test/e2e/api/domApi-HTMLLayerElement.test.js
+++ b/test/e2e/api/domApi-HTMLLayerElement.test.js
@@ -68,7 +68,7 @@ test.describe('HTMLLayerElement DOM API Tests', () => {
       return layer._layer.getName();
     });
     // this isn't working, because waiting for the createmap event means
-    // that the layer-._layer doesn't exist, so attributeChangeCallback on label
+    // that the map-layer._layer doesn't exist, so attributeChangeCallback on label
     // shortcircuits (does / can not setName on _layer) unless you wait for it.
     // need to ditch the createmap event!!
     expect(localNoTitleName).toEqual(localNoTitleLabel);
diff --git a/test/e2e/api/domApi-mapml-viewer.test.js b/test/e2e/api/domApi-mapml-viewer.test.js
index aabe29dd8..c6fccf982 100644
--- a/test/e2e/api/domApi-mapml-viewer.test.js
+++ b/test/e2e/api/domApi-mapml-viewer.test.js
@@ -80,14 +80,14 @@ test.describe('mapml-viewer DOM API Tests', () => {
     expect(layerControlHidden).toEqual(true);
   });
 
-  test('Create a layer with document.createElement(layer-)', async () => {
+  test('Create a layer with document.createElement(map-layer)', async () => {
     const layerHandle = await page.evaluateHandle(() =>
-      document.createElement('layer-')
+      document.createElement('map-layer')
     );
     const nn = await (
       await page.evaluateHandle((viewer) => viewer.nodeName, layerHandle)
     ).jsonValue();
-    expect(nn).toEqual('LAYER-');
+    expect(nn).toEqual('MAP-LAYER');
     await page.evaluateHandle(
       (layer) => layer.setAttribute('label', 'CBMT'),
       layerHandle
@@ -140,13 +140,13 @@ test.describe('mapml-viewer DOM API Tests', () => {
       document.body.appendChild(m);
     });
     await viewer.evaluate((viewer) =>
-      viewer.querySelector('layer-').whenReady()
+      viewer.querySelector('map-layer').whenReady()
     );
     await page.waitForTimeout(250);
     expect(
       await viewer.evaluate(() => {
         let m = document.querySelector('mapml-viewer');
-        let l = m.querySelector('layer-');
+        let l = m.querySelector('map-layer');
         return l.label;
         // the label attribute is ignored if the mapml document has a map-title
         // element, which is the case here.  Since the layer loads over the
@@ -170,10 +170,10 @@ test.describe('mapml-viewer DOM API Tests', () => {
 
   test('Toggle all mapml-viewer controls by adding or removing controls attribute', async () => {
     await page.evaluateHandle(() =>
-      document.querySelector('layer-').setAttribute('hidden', '')
+      document.querySelector('map-layer').setAttribute('hidden', '')
     );
     await page.evaluateHandle(() =>
-      document.querySelector('layer-').removeAttribute('hidden')
+      document.querySelector('map-layer').removeAttribute('hidden')
     );
 
     const viewerHandle = await page.evaluateHandle(() =>
@@ -243,7 +243,9 @@ test.describe('mapml-viewer DOM API Tests', () => {
     expect(hasControls).toBe(true);
 
     // remove layer and check that layercontrol disappears
-    await page.evaluateHandle(() => document.querySelector('layer-').remove());
+    await page.evaluateHandle(() =>
+      document.querySelector('map-layer').remove()
+    );
     let layerControlHidden = await page.$eval(
       'css=body > mapml-viewer >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div',
       (elem) => elem.hasAttribute('hidden')
@@ -324,7 +326,7 @@ test.describe('mapml-viewer DOM API Tests', () => {
 
   test('Adding a layer to a map without controls does not add controls', async () => {
     const layerHandle = await page.evaluateHandle(() =>
-      document.createElement('layer-')
+      document.createElement('map-layer')
     );
     await page.evaluateHandle(
       (layer) => layer.setAttribute('label', 'CBMT'),
diff --git a/test/e2e/api/domApi-web-map.test.js b/test/e2e/api/domApi-web-map.test.js
index 8a797522f..acba1b827 100644
--- a/test/e2e/api/domApi-web-map.test.js
+++ b/test/e2e/api/domApi-web-map.test.js
@@ -75,14 +75,14 @@ test.describe('web-map DOM API Tests', () => {
     expect(layerControlHidden).toEqual(true);
   });
 
-  test('Create a layer with document.createElement(layer-)', async () => {
+  test('Create a layer with document.createElement(map-layer)', async () => {
     const layerHandle = await page.evaluateHandle(() =>
-      document.createElement('layer-')
+      document.createElement('map-layer')
     );
     const nn = await (
       await page.evaluateHandle((map) => map.nodeName, layerHandle)
     ).jsonValue();
-    expect(nn).toEqual('LAYER-');
+    expect(nn).toEqual('MAP-LAYER');
     await page.evaluateHandle(
       (layer) => layer.setAttribute('label', 'CBMT'),
       layerHandle
@@ -134,13 +134,13 @@ test.describe('web-map DOM API Tests', () => {
       document.body.appendChild(m);
     });
     await viewer.evaluate((viewer) =>
-      viewer.querySelector('layer-').whenReady()
+      viewer.querySelector('map-layer').whenReady()
     );
     await page.waitForTimeout(250);
     expect(
       await viewer.evaluate(() => {
         let m = document.querySelector('map');
-        let l = m.querySelector('layer-');
+        let l = m.querySelector('map-layer');
         return l.label;
         // the label attribute is ignored if the mapml document has a map-title
         // element, which is the case here.  Since the layer loads over the
@@ -164,10 +164,10 @@ test.describe('web-map DOM API Tests', () => {
 
   test('Toggle all web map controls by adding or removing controls attribute', async () => {
     await page.evaluateHandle(() =>
-      document.querySelector('layer-').setAttribute('hidden', '')
+      document.querySelector('map-layer').setAttribute('hidden', '')
     );
     await page.evaluateHandle(() =>
-      document.querySelector('layer-').removeAttribute('hidden')
+      document.querySelector('map-layer').removeAttribute('hidden')
     );
 
     const mapHandle = await page.evaluateHandle(() =>
@@ -231,7 +231,9 @@ test.describe('web-map DOM API Tests', () => {
     expect(hasControls).toBe(true);
 
     // remove layer and check that layercontrol disappears
-    await page.evaluateHandle(() => document.querySelector('layer-').remove());
+    await page.evaluateHandle(() =>
+      document.querySelector('map-layer').remove()
+    );
     let layerControlHidden = await page.$eval(
       'css=body > map >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div',
       (elem) => elem.hasAttribute('hidden')
@@ -305,7 +307,7 @@ test.describe('web-map DOM API Tests', () => {
 
   test('Adding a layer to a map without controls does not add controls', async () => {
     const layerHandle = await page.evaluateHandle(() =>
-      document.createElement('layer-')
+      document.createElement('map-layer')
     );
     await page.evaluateHandle(
       (layer) => layer.setAttribute('label', 'CBMT'),
diff --git a/test/e2e/api/events/map-projectionchange.html b/test/e2e/api/events/map-projectionchange.html
index aaffd37f0..2c9887560 100644
--- a/test/e2e/api/events/map-projectionchange.html
+++ b/test/e2e/api/events/map-projectionchange.html
@@ -9,7 +9,7 @@
   </head>
   <body>
   <mapml-viewer zoom="2" lon="-75.703611" lat="45.411105" width="500" height="500" controls projection="OSMTILE">
-    <layer- label="Projection changer"  checked>
+    <map-layer label="Projection changer"  checked>
       <map-extent label="National Geographic" units="OSMTILE" checked >
         <map-input name="TileMatrix" type="zoom" value="18" min="0" max="18"></map-input>
         <map-input name="TileCol" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
@@ -22,7 +22,7 @@
         <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
         <map-link rel="tile" tref="/tiles/cbmt/{z}/c{x}_r{y}.png" ></map-link>
       </map-extent>    
-    </layer->
+    </map-layer>
   </mapml-viewer>
   <script>
     function changeProjection() {
diff --git a/test/e2e/api/events/map-projectionchange.test.js b/test/e2e/api/events/map-projectionchange.test.js
index cfb7e473f..9db6a9fbf 100644
--- a/test/e2e/api/events/map-projectionchange.test.js
+++ b/test/e2e/api/events/map-projectionchange.test.js
@@ -57,9 +57,9 @@ test.describe('map-projectionchange test ', () => {
     const reload = await page.getByLabel('Reload');
     expect(await reload.evaluate((button) => button.ariaDisabled)).toBe('true');
   });
-  test('Opacity is maintained on layer- and map-extent after map-projectionchange', async () => {
+  test('Opacity is maintained on map-layer and map-extent after map-projectionchange', async () => {
     const viewer = await page.locator('mapml-viewer');
-    const layer = await page.locator('layer-');
+    const layer = await page.locator('map-layer');
     await page.pause();
     await layer.evaluate((layer) => (layer.opacity = 0.5));
     expect(
diff --git a/test/e2e/api/locateApi.html b/test/e2e/api/locateApi.html
index b9a91ed9d..7a4f98be7 100644
--- a/test/e2e/api/locateApi.html
+++ b/test/e2e/api/locateApi.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; 
        } 
@@ -49,7 +49,7 @@
        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> 
@@ -57,7 +57,7 @@
        <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; 
          } 
          
@@ -73,7 +73,7 @@
   </head>
   <body>
     <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist = "geolocation">
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/api/no-title.mapml b/test/e2e/api/no-title.mapml
index 91ef4bcf5..c283d5da8 100644
--- a/test/e2e/api/no-title.mapml
+++ b/test/e2e/api/no-title.mapml
@@ -1,6 +1,6 @@
 <mapml- xmlns="http://www.w3.org/1999/xhtml">
   <map-head>
-    <!-- no map-title provided means the HTML <layer- src> that references 
+    <!-- no map-title provided means the HTML <map-layer src> that references 
          this file may set its name via the HTMLLayerElement.label setter -->
     <map-meta charset="utf-8" ></map-meta>
     <map-meta content="text/mapml" http-equiv="Content-Type" ></map-meta>
diff --git a/test/e2e/core/ArrowKeyNavContextMenu.html b/test/e2e/core/ArrowKeyNavContextMenu.html
index 63bacfd5e..a36efb7c4 100644
--- a/test/e2e/core/ArrowKeyNavContextMenu.html
+++ b/test/e2e/core/ArrowKeyNavContextMenu.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; 
        } 
@@ -49,7 +49,7 @@
        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> 
@@ -57,7 +57,7 @@
        <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; 
          } 
          
@@ -73,8 +73,8 @@
   </head>
   <body>
     <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
-      <layer- label="CBMT - INLINE" >
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
+      <map-layer label="CBMT - INLINE" >
       <map-link rel="license" title="Testing Inc."></map-link>
       <map-extent units="CBMTILE" checked>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
@@ -82,7 +82,7 @@
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
         <map-link rel="tile" tref="/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/core/axisInferring.html b/test/e2e/core/axisInferring.html
index 2af2de596..ec74be8a5 100644
--- a/test/e2e/core/axisInferring.html
+++ b/test/e2e/core/axisInferring.html
@@ -22,7 +22,7 @@
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
 
-      <layer- label="TileMatrix" checked>
+      <map-layer label="TileMatrix" checked>
         <map-meta name="projection" content="CBMTILE"></map-meta>
         <map-meta name="cs" content="tilematrix"></map-meta>
         <map-meta name="extent" content="zoom=0,top-left-column=0,top-left-row=1,bottom-right-column=4,bottom-right-row=5"></map-meta>
@@ -43,9 +43,9 @@ <h1>Arizona</h1>
             </map-polygon>
           </map-geometry>
         </map-feature>
-      </layer->
+      </map-layer>
 
-      <layer- label="TCRS" checked>
+      <map-layer label="TCRS" checked>
         <map-meta name="projection" content="CBMTILE"></map-meta>
         <map-meta name="cs" content="tilematrix"></map-meta>
         <map-meta name="extent" content="zoom=0,top-left-x=0,top-left-y=256,bottom-right-x=256,bottom-right-y=512"></map-meta>
@@ -80,9 +80,9 @@ <h1>Arizona</h1>
             </map-polygon>
           </map-geometry>
         </map-feature>
-      </layer->
+      </map-layer>
 
-      <layer- label="PCRS" checked>
+      <map-layer label="PCRS" checked>
         <map-meta name="projection" content="CBMTILE"></map-meta>
         <map-meta name="cs" content="tilematrix"></map-meta>
         <map-meta name="extent" content="top-left-easting=-6601973, top-left-northing=1569758, bottom-right-easting=-1521963, bottom-right-northing=-888226"></map-meta>
@@ -114,9 +114,9 @@ <h1>Arizona</h1>
             </map-polygon>
           </map-geometry>
         </map-feature>
-      </layer->
+      </map-layer>
 
-      <layer- label="GCRS" checked>
+      <map-layer label="GCRS" checked>
         <map-meta name="projection" content="CBMTILE"></map-meta>
         <map-meta name="cs" content="tilematrix"></map-meta>
         <map-meta name="extent"
@@ -147,7 +147,7 @@ <h1>Arizona</h1>
             </map-polygon>
           </map-geometry>
         </map-feature>
-      </layer->
+      </map-layer>
     </map>
   </body>
 
diff --git a/test/e2e/core/axisInferring.test.js b/test/e2e/core/axisInferring.test.js
index 38056d820..47c5109a7 100644
--- a/test/e2e/core/axisInferring.test.js
+++ b/test/e2e/core/axisInferring.test.js
@@ -29,7 +29,7 @@ test.describe('UI Drag&Drop Test', () => {
   test('TileMatrix inferring', async () => {
     await page.waitForTimeout(1000);
     const layerExtent = await page.$eval(
-      'body > map > layer-:nth-child(1)',
+      'body > map > map-layer:nth-child(1)',
       (layer) => layer.extent
     );
 
@@ -45,7 +45,7 @@ test.describe('UI Drag&Drop Test', () => {
 
   test('TCRS inferring', async () => {
     const layerExtent = await page.$eval(
-      'body > map > layer-:nth-child(2)',
+      'body > map > map-layer:nth-child(2)',
       (layer) => layer.extent
     );
 
@@ -61,7 +61,7 @@ test.describe('UI Drag&Drop Test', () => {
 
   test('PCRS inferring', async () => {
     const layerExtent = await page.$eval(
-      'body > map > layer-:nth-child(3)',
+      'body > map > map-layer:nth-child(3)',
       (layer) => layer.extent
     );
     // the top left corner is that of the map-meta[name=extent]
@@ -78,7 +78,7 @@ test.describe('UI Drag&Drop Test', () => {
 
   test('GCRS inferring', async () => {
     const layerExtent = await page.$eval(
-      'body > map > layer-:nth-child(4)',
+      'body > map > map-layer:nth-child(4)',
       (layer) => layer.extent
     );
     let expectedTopLeftLongitude = -114.815198;
diff --git a/test/e2e/core/debugMode.html b/test/e2e/core/debugMode.html
index 21fde92c1..51f6eab6c 100644
--- a/test/e2e/core/debugMode.html
+++ b/test/e2e/core/debugMode.html
@@ -23,30 +23,30 @@
 
 <body>
   <mapml-viewer data-testid="viewer" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- data-testid="cbmt-inline-layer" label="CBMT - INLINE" checked>
+    <map-layer data-testid="cbmt-inline-layer" label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21" ></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
-    <layer- data-testid="cbmt-large-layer" label="CBMT - Large Extent" checked>
+    </map-layer>
+    <map-layer data-testid="cbmt-large-layer" label="CBMT - Large Extent" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="0" min="0" max="3" ></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="0" max="5" ></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="0" max="4" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
-    <layer- data-testid="cbmt-beyond-layer" label="CBMT - Beyond Range Extent" checked>
+    </map-layer>
+    <map-layer data-testid="cbmt-beyond-layer" label="CBMT - Beyond Range Extent" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="0" min="0" max="3" ></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="-2" max="8" ></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="-4" max="7" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/core/debugMode.test.js b/test/e2e/core/debugMode.test.js
index ba429f589..3a6f5b6b0 100644
--- a/test/e2e/core/debugMode.test.js
+++ b/test/e2e/core/debugMode.test.js
@@ -97,7 +97,7 @@ test.describe('Playwright Map Element Tests', () => {
     await page.waitForTimeout(1000);
 
     const layer = await page.$eval(
-      'body > mapml-viewer > layer-:nth-child(1)',
+      'body > mapml-viewer > map-layer:nth-child(1)',
       (elem) => elem.hasAttribute('disabled')
     );
 
diff --git a/test/e2e/core/drag.html b/test/e2e/core/drag.html
index f534b4683..78f75e2d9 100644
--- a/test/e2e/core/drag.html
+++ b/test/e2e/core/drag.html
@@ -25,16 +25,16 @@
 <body>
 	<map is="web-map" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
 		controls>
-		<layer- label="CBMT" src="data/cbmt.mapml" checked></layer->
-		<layer- label="Static MapML with tiles" checked>
+		<map-layer label="CBMT" src="data/cbmt.mapml" checked></map-layer>
+		<map-layer label="Static MapML with tiles" checked>
 			<map-meta name="zoom" content="min=0,max=10"></map-meta>
 			<map-meta name="projection" content="CBMTILE"></map-meta>
 			<map-link rel="license"
 				href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285"
 				title="Canada Base Map © Natural Resources Canada"></map-link>
 			<map-tile zoom="0" row="3" col="3" src="data/cbmt/0/c3_r3.png"></map-tile>
-		</layer->
-		<layer- label="vector states" src="data/us_pop_density.mapml" checked></layer->
+		</map-layer>
+		<map-layer label="vector states" src="data/us_pop_density.mapml" checked></map-layer>
 	</map>
 </body>
 
diff --git a/test/e2e/core/drag.test.js b/test/e2e/core/drag.test.js
index 5a4aff586..4e951c4f2 100644
--- a/test/e2e/core/drag.test.js
+++ b/test/e2e/core/drag.test.js
@@ -82,7 +82,7 @@ test.describe('UI Drag&Drop Test', () => {
       (div) => div.parentElement.parentElement.style.zIndex
     );
     const domLayer = await page.$eval(
-      'body > map > layer-:nth-child(4)',
+      'body > map > map-layer:nth-child(4)',
       (div) => div.label
     );
 
@@ -120,7 +120,7 @@ test.describe('UI Drag&Drop Test', () => {
       (div) => div.parentElement.style.zIndex
     );
     const domLayer = await page.$eval(
-      'map > layer-:nth-child(3)',
+      'map > map-layer:nth-child(3)',
       (div) => div.label
     );
 
diff --git a/test/e2e/core/dragDrop.html b/test/e2e/core/dragDrop.html
index 9e4597567..aefd241dd 100644
--- a/test/e2e/core/dragDrop.html
+++ b/test/e2e/core/dragDrop.html
@@ -9,7 +9,7 @@
 
 <body>
     <mapml-viewer style="width: 500px;height: 500px;" id="output" projection="CBMTILE" zoom="3" lon="-75.7" lat="45.4" controls>
-        <layer- label="CBMT" src="data/cbmt.mapml" checked></layer->
+        <map-layer label="CBMT" src="data/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
 </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/core/dragDrop.test.js b/test/e2e/core/dragDrop.test.js
index 0e0948955..454d59db3 100644
--- a/test/e2e/core/dragDrop.test.js
+++ b/test/e2e/core/dragDrop.test.js
@@ -1,6 +1,6 @@
 import { test, expect, chromium } from '@playwright/test';
 
-test.describe('Drag and Drop Layers (layer-, GeoJSON, Link) to mapml-viewer', () => {
+test.describe('Drag and Drop Layers (map-layer, GeoJSON, Link) to mapml-viewer', () => {
   let page;
   let context;
   test.beforeAll(async () => {
@@ -50,11 +50,11 @@ test.describe('Drag and Drop Layers (layer-, GeoJSON, Link) to mapml-viewer', ()
     expect(vars.length).toBe(3);
   });
 
-  test('Drag and drop of valid layer-', async () => {
+  test('Drag and drop of valid map-layer', async () => {
     const dataTransfer = await page.evaluateHandle(() => {
       const dt = new DataTransfer();
       dt.items.add(
-        '<layer- label="Ottawa" checked> <map-meta name="projection" content="CBMTILE"></map-meta> <map-meta name="cs" content="gcrs"></map-meta> <map-feature> <map-featurecaption>Ottawa</map-featurecaption> <map-geometry> <map-point class="ottawa"> <map-coordinates>-75.697193 45.421530</map-coordinates> </map-point> </map-geometry> </map-feature> </layer->',
+        '<map-layer label="Ottawa" checked> <map-meta name="projection" content="CBMTILE"></map-meta> <map-meta name="cs" content="gcrs"></map-meta> <map-feature> <map-featurecaption>Ottawa</map-featurecaption> <map-geometry> <map-point class="ottawa"> <map-coordinates>-75.697193 45.421530</map-coordinates> </map-point> </map-geometry> </map-feature> </map-layer>',
         'text/plain'
       );
       return dt;
diff --git a/test/e2e/core/dragDropMap.html b/test/e2e/core/dragDropMap.html
index 8dbcd92b6..4bebf5c5f 100644
--- a/test/e2e/core/dragDropMap.html
+++ b/test/e2e/core/dragDropMap.html
@@ -26,7 +26,7 @@
 <body>
     <map is="web-map" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
 		controls>
-		<layer- label="CBMT" src="data/cbmt.mapml" checked></layer->
+		<map-layer label="CBMT" src="data/cbmt.mapml" checked></map-layer>
 	</map>
 </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/core/dragDropMap.test.js b/test/e2e/core/dragDropMap.test.js
index 72bbcbc16..dc879117b 100644
--- a/test/e2e/core/dragDropMap.test.js
+++ b/test/e2e/core/dragDropMap.test.js
@@ -1,7 +1,7 @@
 //Duplicate of dragDrop.html, uses web-map instead
 import { test, expect, chromium } from '@playwright/test';
 
-test.describe('Drag and Drop Layers (layer-, GeoJSON, Link) to web-map', () => {
+test.describe('Drag and Drop Layers (map-layer, GeoJSON, Link) to web-map', () => {
   let page;
   let context;
   test.beforeAll(async () => {
@@ -49,11 +49,11 @@ test.describe('Drag and Drop Layers (layer-, GeoJSON, Link) to web-map', () => {
     expect(vars.length).toBe(3);
   });
 
-  test('Drag and drop of valid layer-', async () => {
+  test('Drag and drop of valid map-layer', async () => {
     const dataTransfer = await page.evaluateHandle(() => {
       const dt = new DataTransfer();
       dt.items.add(
-        '<layer- label="Ottawa" checked> <map-meta name="projection" content="CBMTILE"></map-meta> <map-meta name="cs" content="gcrs"></map-meta> <map-feature> <map-featurecaption>Ottawa</map-featurecaption> <map-geometry> <map-point class="ottawa"> <map-coordinates>-75.697193 45.421530</map-coordinates> </map-point> </map-geometry> </map-feature> </layer->',
+        '<map-layer label="Ottawa" checked> <map-meta name="projection" content="CBMTILE"></map-meta> <map-meta name="cs" content="gcrs"></map-meta> <map-feature> <map-featurecaption>Ottawa</map-featurecaption> <map-geometry> <map-point class="ottawa"> <map-coordinates>-75.697193 45.421530</map-coordinates> </map-point> </map-geometry> </map-feature> </map-layer>',
         'text/plain'
       );
       return dt;
diff --git a/test/e2e/core/featureIndexOverlay.html b/test/e2e/core/featureIndexOverlay.html
index 95140f53d..18e568f58 100644
--- a/test/e2e/core/featureIndexOverlay.html
+++ b/test/e2e/core/featureIndexOverlay.html
@@ -15,10 +15,10 @@
 
 <body>
 <mapml-viewer id="map1" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
-  <layer- id="vector" label="vector states" src="data/us_pop_density.mapml" checked></layer->
+  <map-layer id="vector" label="vector states" src="data/us_pop_density.mapml" checked></map-layer>
 </mapml-viewer>
 <mapml-viewer id="map2" style="width: 500px;height: 500px;"  projection="CBMTILE" zoom="16" lat="45.4069740362364" lon="-75.70155300710053">
-  <layer- label="Restaurants" checked>
+  <map-layer label="Restaurants" checked>
     <map-meta name="cs" content="gcrs" ></map-meta>
     <map-meta name="extent" content="top-left-easting=1509080.1964270622,top-left-northing=-169400.558801122,bottom-right-easting=1512094.3357886747,bottom-right-northing=-172702.5654051304" ></map-meta>
     <map-extent units="CBMTILE" checked>
@@ -33,10 +33,10 @@
       </map-select>
       <map-link tref="restaurants/{cuisine}.mapml" rel="features"></map-link>
     </map-extent>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 <mapml-viewer id="map3" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls controlslist="geolocation">
-  <layer- label="Linked feature" checked>
+  <map-layer label="Linked feature" checked>
     <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" value="17" min="0" max="17"></map-input>
@@ -54,7 +54,7 @@
             </map-a>
           </map-geometry>
       </map-feature>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 
 </body>
diff --git a/test/e2e/core/featureLinks.html b/test/e2e/core/featureLinks.html
index c8da7f326..007de13b8 100644
--- a/test/e2e/core/featureLinks.html
+++ b/test/e2e/core/featureLinks.html
@@ -23,7 +23,7 @@
 <map style="height: 500px;width:500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
      controls>
 
-  <layer- label="Arizona" checked>
+  <map-layer label="Arizona" checked>
     <map-meta name="projection" content="CBMTILE"></map-meta>
     <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
     <map-meta name="cs" content="gcrs"></map-meta>
@@ -137,7 +137,7 @@ <h1>Test</h1>
         </map-a>
       </map-geometry>
     </map-feature>
-  </layer->
+  </map-layer>
 </map>
 
 </body>
diff --git a/test/e2e/core/featureLinks.test.js b/test/e2e/core/featureLinks.test.js
index 12345f403..e7b3abed8 100644
--- a/test/e2e/core/featureLinks.test.js
+++ b/test/e2e/core/featureLinks.test.js
@@ -57,7 +57,7 @@ test.describe('Playwright Feature Links Tests', () => {
       );
       await page.waitForTimeout(1000);
       const layerName = await page.$eval(
-        '//html/body/map/layer-[2]',
+        '//html/body/map/map-layer[2]',
         (layer) => layer.label
       );
       const extentAfterLink = await page.$eval(
@@ -95,7 +95,7 @@ test.describe('Playwright Feature Links Tests', () => {
       );
       await page.waitForTimeout(1000);
       const layerName = await page.$eval(
-        '//html/body/map/layer-[2]',
+        '//html/body/map/map-layer[2]',
         (layer) => layer.label
       );
       const extent = await page.$eval('body > map', (map) => map.extent);
diff --git a/test/e2e/core/featureNavigation.html b/test/e2e/core/featureNavigation.html
index 8611c5149..de5e3357f 100644
--- a/test/e2e/core/featureNavigation.html
+++ b/test/e2e/core/featureNavigation.html
@@ -11,7 +11,7 @@
 <body>
   <mapml-viewer style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040"
     lon="-75.2202344" controls>
-    <layer- id="query" label="Fire" checked>
+    <map-layer id="query" label="Fire" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" value="18" min="0" max="18" ></map-input>
         <map-input name="txmin" type="location" units="tilematrix" position="top-left" axis="easting" min="-2.003750834E7"
@@ -39,9 +39,9 @@
         <map-link rel="query"
                   tref="https://cwfis.cfs.nrcan.gc.ca/geoserver/public/wms?i={i}&j={j}&service=WMS&version=1.3.0&request=GetFeatureInfo&layers=public:fdr_current&QUERY_LAYERS=current:fdr_current&styles=&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&srs=EPSG:3978&INFO_FORMAT=text/html&m4h=t" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
 
-    <layer- label="Arizona" checked>
+    <map-layer label="Arizona" checked>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
       <map-meta name="cs" content="gcrs"></map-meta>
@@ -79,8 +79,8 @@ <h1>Test</h1>
           </map-polygon>
         </map-geometry>
       </map-feature>
-    </layer->
-    <layer- id="vector" label="vector states" src="data/us_pop_density.mapml"></layer->
+    </map-layer>
+    <map-layer id="vector" label="vector states" src="data/us_pop_density.mapml"></map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/core/focusControls.html b/test/e2e/core/focusControls.html
index cd05ffc24..6f8e568ac 100644
--- a/test/e2e/core/focusControls.html
+++ b/test/e2e/core/focusControls.html
@@ -10,7 +10,7 @@
 
   <body>
   <mapml-viewer data-testid="viewer" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="1" lat="46.17" lon="-88.9" controls>
-    <layer- id="query" label="Fire" checked>
+    <map-layer id="query" label="Fire" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" value="18" min="0" max="18" ></map-input>
         <map-input name="txmin" type="location" units="tilematrix" position="top-left" axis="easting"  ></map-input>
@@ -27,7 +27,7 @@
         <map-input name="h" type="height" ></map-input>
         <map-link rel="query" tref="data/query-feature.mapml?service=WMS&version=1.3.0&request=GetFeatureInfo&i={i}&j={j}&query_layers=FBP_FuelLayer_wBurnScars&layers=FBP_FuelLayer_wBurnScars&info_format=text/html&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&CRS=EPSG:3857"></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
 
   </mapml-viewer>
 </body>
diff --git a/test/e2e/core/fullscreenControlMapmlViewer.html b/test/e2e/core/fullscreenControlMapmlViewer.html
index 66afcfcb7..9db419b6c 100644
--- a/test/e2e/core/fullscreenControlMapmlViewer.html
+++ b/test/e2e/core/fullscreenControlMapmlViewer.html
@@ -23,25 +23,25 @@
 
 <body>
   <mapml-viewer id="map1" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- label="CBMT - INLINE" checked>
+    <map-layer label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21" ></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 
   <mapml-viewer id="map2" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- label="CBMT - INLINE" checked>
+    <map-layer label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21" ></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
   
 </body>
diff --git a/test/e2e/core/fullscreenControlWebMap.html b/test/e2e/core/fullscreenControlWebMap.html
index 80dd7a923..f37744a42 100644
--- a/test/e2e/core/fullscreenControlWebMap.html
+++ b/test/e2e/core/fullscreenControlWebMap.html
@@ -24,25 +24,25 @@
 
 <body>
   <map is="web-map" id="map1" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- label="CBMT - INLINE" checked>
+    <map-layer label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21" ></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </map>
 
   <map is="web-map" id="map2" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- label="CBMT - INLINE" checked>
+    <map-layer label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21" ></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </map>
   
 </body>
diff --git a/test/e2e/core/layerAttributes.test.js b/test/e2e/core/layerAttributes.test.js
index 13119d407..c780537fc 100644
--- a/test/e2e/core/layerAttributes.test.js
+++ b/test/e2e/core/layerAttributes.test.js
@@ -16,7 +16,7 @@ test.describe('Playwright Checked Attribute Tests', () => {
   });
 
   test('Check attribute removed', async () => {
-    await page.$eval('body > mapml-viewer > layer-', (layer) =>
+    await page.$eval('body > mapml-viewer > map-layer', (layer) =>
       layer.removeAttribute('checked')
     );
     await page.hover(
@@ -30,7 +30,7 @@ test.describe('Playwright Checked Attribute Tests', () => {
     expect(layerController).toEqual(false);
   });
   test('Check attribute added', async () => {
-    await page.$eval('body > mapml-viewer > layer-', (layer) =>
+    await page.$eval('body > mapml-viewer > map-layer', (layer) =>
       layer.setAttribute('checked', '')
     );
     const layerController = await page.$eval(
@@ -43,7 +43,7 @@ test.describe('Playwright Checked Attribute Tests', () => {
 
   test.describe('Hidden attribute tests', () => {
     test('Control panel hidden when no layers/all layers hidden', async () => {
-      await page.$eval('body > mapml-viewer > layer-', (layer) =>
+      await page.$eval('body > mapml-viewer > map-layer', (layer) =>
         layer.setAttribute('hidden', '')
       );
       const controlsHidden = await page.$eval(
@@ -53,7 +53,7 @@ test.describe('Playwright Checked Attribute Tests', () => {
       expect(controlsHidden).toEqual(true);
     });
     test('Control panel unhidden when at least one layer with no hidden attribute', async () => {
-      await page.$eval('body > mapml-viewer > layer-', (layer) =>
+      await page.$eval('body > mapml-viewer > map-layer', (layer) =>
         layer.setAttribute('hidden', '')
       );
       // there's a single layer in the mapml-viewer.html page, so the layer control
@@ -64,7 +64,7 @@ test.describe('Playwright Checked Attribute Tests', () => {
       );
       expect(controlsHidden).toEqual(true);
       // so far so good
-      await page.$eval('body > mapml-viewer > layer-', (layer) =>
+      await page.$eval('body > mapml-viewer > map-layer', (layer) =>
         layer.removeAttribute('hidden')
       );
       controlsHidden = await page.$eval(
@@ -74,7 +74,7 @@ test.describe('Playwright Checked Attribute Tests', () => {
       expect(controlsHidden).toEqual(false);
     });
     //        test("[" + browserType + "]" + " Initial map element extent", async () => {
-    //          await page.$eval("body > mapml-viewer > layer-",
+    //          await page.$eval("body > mapml-viewer > map-layer",
     //            (layer) => layer.setAttribute("checked", ""));
     //          const layerController = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > summary > div > label > input",
     //            (controller) => controller.checked);
@@ -85,14 +85,15 @@ test.describe('Playwright Checked Attribute Tests', () => {
 
   test.describe('Disabled attributes test', () => {
     test('Setting disabled, attribute reset on update/move', async () => {
-      await page.$eval('body > mapml-viewer > layer-', (layer) =>
+      await page.$eval('body > mapml-viewer > map-layer', (layer) =>
         layer.setAttribute('disabled', '')
       );
 
       await page.$eval('body > mapml-viewer', (map) => map.zoomTo(47, -92, 0));
 
-      let disabled = await page.$eval('body > mapml-viewer > layer-', (layer) =>
-        layer.hasAttribute('disabled', '')
+      let disabled = await page.$eval(
+        'body > mapml-viewer > map-layer',
+        (layer) => layer.hasAttribute('disabled', '')
       );
       expect(disabled).toEqual(false);
     });
diff --git a/test/e2e/core/layerContextMenu.html b/test/e2e/core/layerContextMenu.html
index 4f11e36b3..88376b4bd 100644
--- a/test/e2e/core/layerContextMenu.html
+++ b/test/e2e/core/layerContextMenu.html
@@ -23,7 +23,7 @@
 
 <body>
   <mapml-viewer style="width: 1000px;height: 500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- label="CBMT - INLINE" checked>
+    <map-layer label="CBMT - INLINE" checked>
       <map-link rel="license" title="Testing Inc."></map-link>
       <map-extent units="CBMTILE" checked>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
@@ -31,24 +31,24 @@
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
         <map-link rel="tile" tref="/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>
       </map-extent>
-    </layer->
-    <layer- label="Layer 2" checked>
+    </map-layer>
+    <map-layer label="Layer 2" checked>
       <map-meta name="zoom" content="min=0,max=25"></map-meta>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-link rel="license"
         href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285"
         title="Canada Base Map © Natural Resources Canada"></map-link>
       <map-tile zoom="10" row="100" col="100" src="/data/cbmt/3/c14_r16.png"></map-tile>
-    </layer->
-    <layer- label="Layer 3" checked>
+    </map-layer>
+    <map-layer label="Layer 3" checked>
       <map-meta name="zoom" content="min=0,max=25"></map-meta>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-link rel="license"
         href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285"
         title="Canada Base Map © Natural Resources Canada"></map-link>
       <map-tile zoom="10" row="101" col="100" src="/data/cbmt/2/c9_r10.png"></map-tile>
-    </layer->
-    <layer- label="Layer 4" checked>
+    </map-layer>
+    <map-layer label="Layer 4" checked>
       <map-meta name="zoom" content="min=0,max=25"></map-meta>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-link rel="license"
@@ -57,8 +57,8 @@
       <map-tile zoom="6" row="50" col="50" src="/data/cbmt/3/c14_r16.png"></map-tile>
       <map-tile zoom="6" row="51" col="50" src="/data/cbmt/3/c14_r16.png"></map-tile>
       <map-tile zoom="6" row="51" col="51" src="/data/cbmt/2/c9_r10.png"></map-tile>
-    </layer->
-    <layer- src="data/query/DouglasFir" label="Natural Resources Canada - Douglas Fir (Genus Pseudotsuga) 250m resolution"></layer->
+    </map-layer>
+    <map-layer src="data/query/DouglasFir" label="Natural Resources Canada - Douglas Fir (Genus Pseudotsuga) 250m resolution"></map-layer>
   </mapml-viewer>
   <textarea id="messageExtent" name="messageExtent" rows="10" cols="100"></textarea>
   <textarea data-testid="messageLayer" id="messageLayer" name="messageLayer" rows="10" cols="100"></textarea>
diff --git a/test/e2e/core/layerContextMenu.test.js b/test/e2e/core/layerContextMenu.test.js
index be283e2fd..af6d1b2b7 100644
--- a/test/e2e/core/layerContextMenu.test.js
+++ b/test/e2e/core/layerContextMenu.test.js
@@ -58,7 +58,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
     await page.keyboard.press('Control+v');
     const copyLayer = await mesageLayerArea.evaluate((text) => text.value);
     expect(copyLayer).toEqual(
-      `<layer- label="CBMT - INLINE" checked="">
+      `<map-layer label="CBMT - INLINE" checked="">
       <map-link rel="license" title="Testing Inc."></map-link>
       <map-extent units="CBMTILE" checked="">
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
@@ -66,7 +66,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
         <map-link rel="tile" tref="http://localhost:30001/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>
       </map-extent>
-    </layer->`
+    </map-layer>`
     );
   });
 
@@ -155,7 +155,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
     const copyLayer = await mesageLayerArea.evaluate((text) => text.value);
 
     expect(copyLayer).toEqual(
-      '<layer- src="http://localhost:30001/data/query/DouglasFir" label="Natural Resources Canada - Douglas Fir (Genus Pseudotsuga) 250m resolution"></layer->'
+      '<map-layer src="http://localhost:30001/data/query/DouglasFir" label="Natural Resources Canada - Douglas Fir (Genus Pseudotsuga) 250m resolution"></map-layer>'
     );
   });
 
diff --git a/test/e2e/core/layerContextMenuKeyboard.test.js b/test/e2e/core/layerContextMenuKeyboard.test.js
index 6995b4919..b2f7d91bf 100644
--- a/test/e2e/core/layerContextMenuKeyboard.test.js
+++ b/test/e2e/core/layerContextMenuKeyboard.test.js
@@ -92,7 +92,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
       let t = document.querySelector('[name="messageExtent"]').value;
       if (t !== '') {
         let l = p.parseFromString(t, 'text/html');
-        return l.querySelector('layer-').getAttribute('label');
+        return l.querySelector('map-layer').getAttribute('label');
       }
       return '';
     });
@@ -130,7 +130,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
       let t = document.querySelector('[name="messageExtent"]').value;
       if (t !== '') {
         let l = p.parseFromString(t, 'text/html');
-        return l.querySelector('layer-').getAttribute('label');
+        return l.querySelector('map-layer').getAttribute('label');
       }
       return '';
     });
@@ -168,7 +168,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
       let t = document.querySelector('[name="messageExtent"]').value;
       if (t !== '') {
         let l = p.parseFromString(t, 'text/html');
-        return l.querySelector('layer-').getAttribute('label');
+        return l.querySelector('map-layer').getAttribute('label');
       }
       return '';
     });
diff --git a/test/e2e/core/linkTypes.html b/test/e2e/core/linkTypes.html
index c8da7f326..007de13b8 100644
--- a/test/e2e/core/linkTypes.html
+++ b/test/e2e/core/linkTypes.html
@@ -23,7 +23,7 @@
 <map style="height: 500px;width:500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
      controls>
 
-  <layer- label="Arizona" checked>
+  <map-layer label="Arizona" checked>
     <map-meta name="projection" content="CBMTILE"></map-meta>
     <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
     <map-meta name="cs" content="gcrs"></map-meta>
@@ -137,7 +137,7 @@ <h1>Test</h1>
         </map-a>
       </map-geometry>
     </map-feature>
-  </layer->
+  </map-layer>
 </map>
 
 </body>
diff --git a/test/e2e/core/mapContextMenu.html b/test/e2e/core/mapContextMenu.html
index f878df3a7..91257382e 100644
--- a/test/e2e/core/mapContextMenu.html
+++ b/test/e2e/core/mapContextMenu.html
@@ -9,8 +9,8 @@
   <body>
     <mapml-viewer width="640" height="480" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
       <map-caption>A pleasing map of Canada</map-caption>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
-      <layer- label="Hat Guy" checked>
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
+      <map-layer label="Hat Guy" checked>
         <map-meta name="projection" content="CBMTILE"></map-meta>
         <map-feature id="twohats" zoom="15" class="twohats">
           <map-featurecaption>The Man With Two Hats</map-featurecaption>
@@ -23,7 +23,7 @@ <h2><a href="https://www.veterans.gc.ca/eng/remembrance/memorials/national-inven
           </map-point>
         </map-geometry>
       </map-feature>
-      </layer->
+      </map-layer>
    </mapml-viewer>
   <div style="width: 100%; height:300px"></div>
   <p>Some text</p>
diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js
index 210ce697b..20e1dd9eb 100644
--- a/test/e2e/core/mapContextMenu.test.js
+++ b/test/e2e/core/mapContextMenu.test.js
@@ -374,14 +374,14 @@ test.describe('Playwright Map Context Menu Tests', () => {
       (text) => text.value
     );
     const expected = `<map data-testid="firstmap" style="height: 600px;width:500px;" is="web-map" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls="" role="application">
-    <layer- label="CBMT - INLINE" checked="">
+    <map-layer label="CBMT - INLINE" checked="">
       <map-extent units="CBMTILE" checked="" hidden="">
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
         <map-link rel="tile" tref="/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </map>`;
     expect(copyValue).toEqual(expected);
     await page.locator('body > textarea#coord').fill('');
diff --git a/test/e2e/core/mapElement.html b/test/e2e/core/mapElement.html
index b11df646b..0a637e55a 100644
--- a/test/e2e/core/mapElement.html
+++ b/test/e2e/core/mapElement.html
@@ -24,14 +24,14 @@
 
 <body>
   <map data-testid="firstmap" style="height: 600px;width:500px;" is="web-map" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- label="CBMT - INLINE" checked>
+    <map-layer label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </map>
 
   <map data-testid="secondmap" style="height: 600px;width:500px;" is="web-map" id="default-projection" zoom="0" lat="47" lon="-92" controls>
@@ -39,7 +39,7 @@
 
   <textarea name="message" id="coord" rows="10" cols="100"></textarea>
   <textarea name="message" id="layer" rows="10" cols="100">
-    <layer- label="Test Layer" checked="">
+    <map-layer label="Test Layer" checked="">
    <map-meta name="projection" content="CBMTILE"></map-meta>
    <map-feature>
       <map-geometry cs="pcrs">
@@ -48,13 +48,13 @@
          </map-polygon>
       </map-geometry>
    </map-feature>
-</layer->
+</map-layer>
   </textarea>
   <textarea name="message" id="invalidLayer" rows="10" cols="100"><b>test</b></textarea>
   <textarea name="message" id="geojson" rows="10" cols="100">{ "name": "Light Poles", "bbox": [ -75.754907, 45.402812, -75.753074, 45.404083 ], "features": [ { "geometry": { "coordinates": [ -75.754484, 45.403716 ], "type": "Point" }, "id": 20924, "properties": { "WATTAGE": 300 }, "type": "Feature" }, { "geometry": { "coordinates": [ -75.754469, 45.403193 ], "type": "Point" }, "id": 20928, "properties": { "WATTAGE": 300 }, "type": "Feature" }, { "geometry": { "coordinates": [ -75.754178, 45.403335 ], "type": "Point" }, "id": 21209, "properties": { "WATTAGE": 300 }, "type": "Feature" }, { "geometry": { "coordinates": [ -75.754131, 45.402917 ], "type": "Point" }, "id": 21297, "properties": { "WATTAGE": 300 }, "type": "Feature" }, { "geometry": { "coordinates": [ -75.753867, 45.403096 ], "type": "Point" }, "id": 21501, "properties": { "WATTAGE": 300 }, "type": "Feature" }, { "geometry": { "coordinates": [ -75.753529, 45.402942 ], "type": "Point" }, "id": 21786, "properties": { "WATTAGE": 300 }, "type": "Feature" }, { "geometry": { "coordinates": [ -75.754907, 45.404083 ], "type": "Point" }, "id": 22047, "properties": { "WATTAGE": 300 }, "type": "Feature" }, { "geometry": { "coordinates": [ -75.754779, 45.403639 ], "type": "Point" }, "id": 22152, "properties": { "WATTAGE": 300 }, "type": "Feature" }, { "geometry": { "coordinates": [ -75.753074, 45.402812 ], "type": "Point" }, "id": 22171, "properties": { "WATTAGE": 300 }, "type": "Feature" } ], "type": "FeatureCollection" }</textarea>
 
 
-  <textarea name="message" id="geojsonExpected" rows="10" cols="100"><layer- label="Light Poles" checked=""><map-meta name="extent" content="top-left-longitude=-75.754907, top-left-latitude=45.402812, bottom-right-longitude=-75.753074,bottom-right-latitude=45.404083"></map-meta><map-meta name="projection" content="CBMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>20924</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754484 45.403716</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>20928</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754469 45.403193</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>21209</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754178 45.403335</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>21297</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754131 45.402917</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>21501</map-featurecaption><map-geometry><map-point><map-coordinates>-75.753867 45.403096</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>21786</map-featurecaption><map-geometry><map-point><map-coordinates>-75.753529 45.402942</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>22047</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754907 45.404083</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>22152</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754779 45.403639</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>22171</map-featurecaption><map-geometry><map-point><map-coordinates>-75.753074 45.402812</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature></layer-></textarea>
+  <textarea name="message" id="geojsonExpected" rows="10" cols="100"><map-layer label="Light Poles" checked=""><map-meta name="extent" content="top-left-longitude=-75.754907, top-left-latitude=45.402812, bottom-right-longitude=-75.753074,bottom-right-latitude=45.404083"></map-meta><map-meta name="projection" content="CBMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>20924</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754484 45.403716</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>20928</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754469 45.403193</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>21209</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754178 45.403335</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>21297</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754131 45.402917</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>21501</map-featurecaption><map-geometry><map-point><map-coordinates>-75.753867 45.403096</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>21786</map-featurecaption><map-geometry><map-point><map-coordinates>-75.753529 45.402942</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>22047</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754907 45.404083</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>22152</map-featurecaption><map-geometry><map-point><map-coordinates>-75.754779 45.403639</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>22171</map-featurecaption><map-geometry><map-point><map-coordinates>-75.753074 45.402812</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">WATTAGE</th><td itemprop="WATTAGE">300</td></tr></tbody></table></map-properties></map-feature></map-layer></textarea>
 
   <textarea name="message" id="geojsonInvalid" rows="10" cols="100"><b>test</b>{"name": "Light Poles","bbox": [-75.754907,45.402812,-75.753074,45.404083],"type": "FeatureCollection"}</textarea>
 
diff --git a/test/e2e/core/mapFeature.html b/test/e2e/core/mapFeature.html
index 60290cf11..70ff878f4 100644
--- a/test/e2e/core/mapFeature.html
+++ b/test/e2e/core/mapFeature.html
@@ -23,7 +23,7 @@
 <map style="height: 500px;width:500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
      controls>
 
-  <layer- label="Arizona" checked>
+  <map-layer label="Arizona" checked>
     <map-meta name="projection" content="CBMTILE"></map-meta>
     <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
     <map-meta name="cs" content="gcrs"></map-meta>
@@ -181,8 +181,8 @@ <h1>Event handler test</h1>
         </map-a>
       </map-geometry>
     </map-feature>
-  </layer->
-  <layer- label="vector states" src="data/us_pop_density.mapml" checked></layer->
+  </map-layer>
+  <map-layer label="vector states" src="data/us_pop_density.mapml" checked></map-layer>
 </map>
 <script>
   function test_1 () {
diff --git a/test/e2e/core/mapFeature.test.js b/test/e2e/core/mapFeature.test.js
index e7a71cc58..234cc8b2a 100644
--- a/test/e2e/core/mapFeature.test.js
+++ b/test/e2e/core/mapFeature.test.js
@@ -16,14 +16,14 @@ test.describe('Playwright MapFeature Custom Element Tests', () => {
     await context.close();
   });
 
-  test('Shadowroot tests of <layer- > with src attribute', async () => {
+  test('Shadowroot tests of <map-layer > with src attribute', async () => {
     let shadowAttached = await page.$eval(
       'body > map',
       (map) => map.layers[1].shadowRoot !== null
     );
     expect(shadowAttached).toEqual(true);
 
-    // remove and then re-add <layer- > element
+    // remove and then re-add <map-layer > element
     shadowAttached = await page.$eval('body > map', (map) => {
       let layer = map.layers[1];
       map.removeChild(layer);
@@ -42,7 +42,7 @@ test.describe('Playwright MapFeature Custom Element Tests', () => {
 
     // change <map-feature> attributes
     await page.$eval('body > map', async (map) => {
-      let layer = map.querySelector('layer-'),
+      let layer = map.querySelector('map-layer'),
         mapFeature = layer.querySelector('map-feature');
       mapFeature.setAttribute('zoom', '4');
       mapFeature.zoomTo();
@@ -58,13 +58,13 @@ test.describe('Playwright MapFeature Custom Element Tests', () => {
     await page.reload();
     await page.waitForTimeout(500);
     let prevExtentBR = await page.$eval('body > map', (map) => {
-      let layer = map.querySelector('layer-'),
+      let layer = map.querySelector('map-layer'),
         mapFeature = layer.querySelector('map-feature');
       return mapFeature.extent.bottomRight.pcrs;
     });
 
     let newExtentBR = await page.$eval('body > map', (map) => {
-      let layer = map.querySelector('layer-'),
+      let layer = map.querySelector('map-layer'),
         mapFeature = layer.querySelector('map-feature'),
         mapCoord = mapFeature.querySelector('map-coordinates');
       mapCoord.innerHTML = '12 11 12 11 12 12 11 13';
@@ -75,12 +75,12 @@ test.describe('Playwright MapFeature Custom Element Tests', () => {
 
     // remove <map-properties>
     await page.$eval('body > map', (map) => {
-      let layer = map.querySelector('layer-'),
+      let layer = map.querySelector('map-layer'),
         mapFeature = layer.querySelector('map-feature');
       mapFeature.querySelector('map-properties').remove();
     });
     await page.$eval('body > map', (map) => {
-      let layer = map.querySelector('layer-'),
+      let layer = map.querySelector('map-layer'),
         mapFeature = layer.querySelector('map-feature');
       return mapFeature.click();
     });
@@ -224,7 +224,7 @@ test.describe('Playwright MapFeature Custom Element Tests', () => {
     let focus = await page.$eval(
       'body > map > div > div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div > div.mapml-vector-container > svg > g > g:nth-child(1)',
       (g) => {
-        let layer = document.querySelector('map').querySelector('layer-'),
+        let layer = document.querySelector('map').querySelector('map-layer'),
           mapFeature = layer.querySelector('map-feature');
         mapFeature.focus();
         return document.activeElement.shadowRoot?.activeElement === g;
@@ -333,7 +333,7 @@ test.describe('MapFeature Events', () => {
   test('click() method - stopPropagation', async () => {
     // click() method on line feature
     await page.$eval(
-      'body > mapml-viewer > layer- > map-feature#line',
+      'body > mapml-viewer > map-layer > map-feature#line',
       (line) => line.click()
     );
 
diff --git a/test/e2e/core/mapFeature1.html b/test/e2e/core/mapFeature1.html
index c93efaff5..14e836272 100644
--- a/test/e2e/core/mapFeature1.html
+++ b/test/e2e/core/mapFeature1.html
@@ -9,7 +9,7 @@
 
 <body>
 	<mapml-viewer width="500" height="500" projection="OSMTILE" zoom="10" lon="-75.7" lat="45.4" controls>
-		<layer- label="Features" checked>
+		<map-layer label="Features" checked>
 			<map-meta name="projection" content="OSMTILE"></map-meta>
             <map-feature>
 				<map-featurecaption>Polygon</map-featurecaption>
@@ -50,7 +50,7 @@ <h2>This is a Line</h2>
 					<h2>This is a Point</h2>
 				</map-properties>
 			</map-feature>
-		</layer->
+		</map-layer>
 	</mapml-viewer>
 	
 	<div id="property"></div>
diff --git a/test/e2e/core/mapSpan.css b/test/e2e/core/mapSpan.css
index e4ac03688..ed0464328 100644
--- a/test/e2e/core/mapSpan.css
+++ b/test/e2e/core/mapSpan.css
@@ -36,7 +36,7 @@ mapml-viewer:defined,
     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;
 }
@@ -48,6 +48,6 @@ mapml-viewer:not(:defined) > * {
 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;
 }
\ No newline at end of file
diff --git a/test/e2e/core/mapSpan.html b/test/e2e/core/mapSpan.html
index f8c4f2b7a..8436e1624 100644
--- a/test/e2e/core/mapSpan.html
+++ b/test/e2e/core/mapSpan.html
@@ -20,7 +20,7 @@
 </head>
 <body>
 <mapml-viewer projection="WGS84" zoom="0" lat="0" lon="0" controls>
-  <layer- label="Countries - WorldCRS84Quad" checked>
+  <map-layer label="Countries - WorldCRS84Quad" checked>
     <map-link rel="stylesheet" href="mapSpan.css" ></map-link>
     <map-extent units="WGS84" checked hidden>
       <map-input name="zoomLevel" type="zoom" min="0" max="2" value="0"></map-input>
@@ -30,11 +30,11 @@
 
       <map-link rel='tile' type='text/mapml' title='Tiles for ne_10m_admin_0_countries (as MapML)' tref='data/wgs84/{zoomLevel}/r{row}_c{col}.mapml'> </map-link>
     </map-extent>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 
 <mapml-viewer projection="OSMTILE" zoom="2" lat="0" lon="0" controls>
-  <layer- label="Countries - WebMercatorQuad" checked>
+  <map-layer label="Countries - WebMercatorQuad" checked>
     <map-link rel="stylesheet" href="mapSpan.css" ></map-link>
     <map-extent units="OSMTILE" checked hidden>
       <map-input  name="zoomLevel" type="zoom" min="0" max="2" value="0"></map-input>
@@ -42,7 +42,7 @@
       <map-input  name="col" type="location" axis="column" units="tilematrix" min="0" max="1"></map-input>
       <map-link rel='tile' type='text/mapml' tref='data/osmtile/{zoomLevel}/{row}_{col}.mapml' ></map-link>
     </map-extent>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 
 </body>
diff --git a/test/e2e/core/metaDefault.html b/test/e2e/core/metaDefault.html
index 868f221c0..6724571ff 100644
--- a/test/e2e/core/metaDefault.html
+++ b/test/e2e/core/metaDefault.html
@@ -16,9 +16,9 @@
 <body>
   <mapml-viewer style="width: 500px; height: 500px;" projection="CBMTILE" zoom="0" lat="45.5052040" lon="-75.2202344"
     controls>
-    <layer- label="Map Layer" src="data/missing_min_max.mapml" checked></layer->
+    <map-layer label="Map Layer" src="data/missing_min_max.mapml" checked></map-layer>
 
-    <layer- label="Toporama" checked>
+    <map-layer label="Toporama" checked>
       <map-meta name="zoom" content="min=4,max=5"></map-meta>
       <map-meta name="extent"
                 content="zoom=19,top-left-easting=-7786477.0,top-left-northing=-927808.0,bottom-right-easting=7148753.0,bottom-right-northing=7928344.0"></map-meta>
@@ -33,8 +33,8 @@
         <map-link rel="image"
           tref="images/toporama_en.jpg?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH={w}&HEIGHT={h}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&m4h=t" ></map-link>
       </map-extent>
-    </layer->
-    <layer- id="defaultMeta" label="Default meta" checked>
+    </map-layer>
+    <map-layer id="defaultMeta" label="Default meta" checked>
       <map-feature>
         <map-geometry>
           <map-point>
@@ -42,8 +42,8 @@
           </map-point>
         </map-geometry>
       </map-feature>
-    </layer->
-    <layer- id="defaultMetaFetched" src="data/noMapMeta" checked></layer->
+    </map-layer>
+    <map-layer id="defaultMetaFetched" src="data/noMapMeta" checked></map-layer>
   </mapml-viewer>
 
 </body>
diff --git a/test/e2e/core/metaDefault.test.js b/test/e2e/core/metaDefault.test.js
index f5e16c445..d9acd17fb 100644
--- a/test/e2e/core/metaDefault.test.js
+++ b/test/e2e/core/metaDefault.test.js
@@ -60,7 +60,7 @@ test.describe('Playwright Missing Min Max Attribute, Meta Default Tests', () =>
 
   test('Fetched layer extent test', async () => {
     const extent = await page.$eval(
-      'body > mapml-viewer > layer-:nth-child(1)',
+      'body > mapml-viewer > map-layer:nth-child(1)',
       (layer) => layer.extent
     );
     expect(extent.hasOwnProperty('zoom')).toBeTruthy();
@@ -74,7 +74,7 @@ test.describe('Playwright Missing Min Max Attribute, Meta Default Tests', () =>
   });
   test('Inline layer extent test', async () => {
     const extent = await page.$eval(
-      'body > mapml-viewer > layer-:nth-child(2)',
+      'body > mapml-viewer > map-layer:nth-child(2)',
       (layer) => layer.extent
     );
 
@@ -94,7 +94,7 @@ test.describe('Playwright Missing Min Max Attribute, Meta Default Tests', () =>
   test("Layer with no map-meta's is rendered on map", async () => {
     await page.waitForTimeout(200);
     const layer = await page.evaluateHandle(() =>
-      document.querySelector('layer-[id=defaultMeta]')
+      document.querySelector('map-layer[id=defaultMeta]')
     );
     const layerSVG = await page.evaluate(
       (layer) =>
@@ -105,7 +105,7 @@ test.describe('Playwright Missing Min Max Attribute, Meta Default Tests', () =>
   });
   test("Fetched layer with no map-meta's is rendered on map", async () => {
     const layer = await page.evaluateHandle(() =>
-      document.querySelector('layer-[id=defaultMetaFetched]')
+      document.querySelector('map-layer[id=defaultMetaFetched]')
     );
     const layerSVG = await page.evaluate(
       (layer) =>
diff --git a/test/e2e/core/mismatchedLayerWithMap.test.js b/test/e2e/core/mismatchedLayerWithMap.test.js
index 8626fee48..8b40eab9a 100644
--- a/test/e2e/core/mismatchedLayerWithMap.test.js
+++ b/test/e2e/core/mismatchedLayerWithMap.test.js
@@ -29,8 +29,8 @@ test.describe('Playwright Mismatched Layers Test', () => {
             </head>
             <body>
                 <map is="web-map" style="width:500px;height:500px" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls >
-                    <layer- label='CBMT' src='cbmtile-cbmt.mapml' checked></layer->
-                    <layer- id="checkMe" label="OpenStreetMap" src="osm.mapml" checked></layer->
+                    <map-layer label='CBMT' src='cbmtile-cbmt.mapml' checked></map-layer>
+                    <map-layer id="checkMe" label="OpenStreetMap" src="osm.mapml" checked></map-layer>
                 </map>     
             </body>
             </html>
@@ -40,7 +40,7 @@ test.describe('Playwright Mismatched Layers Test', () => {
       'div > div.leaflet-control-container > div.leaflet-top.leaflet-right'
     );
     const cbmtileLayer = await page.$eval(
-      'body > map > layer-:nth-child(1)',
+      'body > map > map-layer:nth-child(1)',
       (controller) => controller.hasAttribute('disabled')
     );
     const osmtileLayer = await page.$eval('#checkMe', (controller) =>
@@ -65,8 +65,8 @@ test.describe('Playwright Mismatched Layers Test', () => {
             </head>
             <body>
                 <mapml-viewer style="width:500px;height:500px" projection="OSMTILE" zoom="2" lat="45" lon="-90" controls >
-                    <layer- id="checkMe" label='CBMT' src='cbmtile-cbmt.mapml' checked></layer->
-                    <layer- label="OpenStreetMap" src="osm.mapml" checked></layer->
+                    <map-layer id="checkMe" label='CBMT' src='cbmtile-cbmt.mapml' checked></map-layer>
+                    <map-layer label="OpenStreetMap" src="osm.mapml" checked></map-layer>
                 </mapml-viewer>     
             </body>
             </html>
@@ -79,7 +79,7 @@ test.describe('Playwright Mismatched Layers Test', () => {
       controller.hasAttribute('disabled')
     );
     const osmtileLayer = await page.$eval(
-      'body > mapml-viewer > layer-:nth-child(2)',
+      'body > mapml-viewer > map-layer:nth-child(2)',
       (controller) => controller.hasAttribute('disabled')
     );
 
diff --git a/test/e2e/core/missingMetaParameters.html b/test/e2e/core/missingMetaParameters.html
index f43fb7643..c2b4a9228 100644
--- a/test/e2e/core/missingMetaParameters.html
+++ b/test/e2e/core/missingMetaParameters.html
@@ -22,7 +22,7 @@
 <body>
   <map is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
 
-    <layer- label="Arizona" checked>
+    <map-layer label="Arizona" checked>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-meta name="cs" content="gcrs"></map-meta>
 
@@ -85,8 +85,8 @@ <h1>Colorado</h1>
           </map-polygon>
         </map-geometry>
       </map-feature>
-    </layer->
-    <layer- label="Alabama" checked>
+    </map-layer>
+    <map-layer label="Alabama" checked>
 
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" min="2" max="18" ></map-input>
@@ -96,8 +96,8 @@ <h1>Colorado</h1>
         <map-input name="ymax" type="location" units="gcrs" axis="latitude" position="top-left" min="45" max="46" ></map-input>
         <map-link rel="features" tref="data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" ></map-link>
       </map-extent>
-    </layer->
-    <layer- label="Static MapML with tiles" checked>
+    </map-layer>
+    <map-layer label="Static MapML with tiles" checked>
       <map-meta name="zoom" content="min=1,max=4,value=2"></map-meta>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-link rel="license"
@@ -107,12 +107,12 @@ <h1>Colorado</h1>
       <map-tile row="10" col="11" src="data/cbmt/2/c11_r10.png"></map-tile>
       <map-tile row="10" col="9" src="data/cbmt/2/c9_r10.png"></map-tile>
       <map-tile row="11" col="9" src="data/cbmt/2/c9_r11.png"></map-tile>
-    </layer->
-    <layer- label="Toporama" src="data/templatedImage.mapml" checked></layer->
+    </map-layer>
+    <map-layer label="Toporama" src="data/templatedImage.mapml" checked></map-layer>
   </map>
   <map is="web-map" projection="WGS84" zoom="0" lat="0" lon="0" controls>
 
-    <layer- label="Inline Countries" checked>
+    <map-layer label="Inline Countries" checked>
       <map-link rel="stylesheet" href="styleOrder.css"></map-link>
       <map-style>
         .secondVector {
@@ -129,7 +129,7 @@ <h1>Colorado</h1>
                   tref='data/wgs84/{zoomLevel}/r{row}_c{col}.mapml' ></map-link>
 
       </map-extent>
-    </layer->
+    </map-layer>
   </map>
 </body>
 
diff --git a/test/e2e/core/missingMetaParameters.test.js b/test/e2e/core/missingMetaParameters.test.js
index 588a6d271..9be147f8d 100644
--- a/test/e2e/core/missingMetaParameters.test.js
+++ b/test/e2e/core/missingMetaParameters.test.js
@@ -18,7 +18,7 @@ test.describe('Missing Parameters Test', () => {
   test("Static features with missing <map-meta name='zoom'></map-meta> & <map-meta name='extent'></map-meta>", async () => {
     await page.waitForTimeout(1000);
     const layerController = await page.$eval(
-      'body > map:nth-child(1) > layer-:nth-child(1)',
+      'body > map:nth-child(1) > map-layer:nth-child(1)',
       (controller) => controller.extent
     );
 
@@ -40,7 +40,7 @@ test.describe('Missing Parameters Test', () => {
 
   test("Static tiles with missing <map-meta name='zoom'></map-meta>", async () => {
     const layerController = await page.$eval(
-      'body > map:nth-child(1) > layer-:nth-child(3)',
+      'body > map:nth-child(1) > map-layer:nth-child(3)',
       (controller) => controller.extent
     );
 
@@ -63,7 +63,7 @@ test.describe('Missing Parameters Test', () => {
   test("Templated features with missing <map-meta name='zoom'></map-meta>", async () => {
     await page.waitForTimeout(500);
     const layerController = await page.$eval(
-      'body > map:nth-child(1) > layer-:nth-child(2)',
+      'body > map:nth-child(1) > map-layer:nth-child(2)',
       (controller) => controller.extent
     );
 
@@ -86,7 +86,7 @@ test.describe('Missing Parameters Test', () => {
   test("Templated tiles with missing <map-meta name='zoom'></map-meta> & extent", async () => {
     await page.waitForTimeout(500);
     const layerController = await page.$eval(
-      'body > map:nth-child(2) > layer-',
+      'body > map:nth-child(2) > map-layer',
       (controller) => controller.extent
     );
 
@@ -108,7 +108,7 @@ test.describe('Missing Parameters Test', () => {
 
   test("Templated image with missing <map-meta name='zoom'></map-meta>", async () => {
     const layerController = await page.$eval(
-      'body > map:nth-child(1) > layer-:nth-child(4)',
+      'body > map:nth-child(1) > map-layer:nth-child(4)',
       (controller) => controller.extent
     );
 
diff --git a/test/e2e/core/popupTabNavigation.html b/test/e2e/core/popupTabNavigation.html
index 16b55d1c6..ac5c8d188 100644
--- a/test/e2e/core/popupTabNavigation.html
+++ b/test/e2e/core/popupTabNavigation.html
@@ -11,7 +11,7 @@
 <body>
   <mapml-viewer data-testid="viewer" style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040"
     lon="-75.2202344" controls>
-    <layer- data-testid="query" id="query" label="Fire" checked>
+    <map-layer data-testid="query" id="query" label="Fire" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" value="18" min="0" max="18" ></map-input>
         <map-input name="txmin" type="location" units="tilematrix" position="top-left" axis="easting" min="-2.003750834E7"
@@ -39,9 +39,9 @@
         <map-link rel="query"
                   tref="https://cwfis.cfs.nrcan.gc.ca/geoserver/public/wms?i={i}&j={j}&service=WMS&version=1.3.0&request=GetFeatureInfo&layers=public:fdr_current&QUERY_LAYERS=current:fdr_current&styles=&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&srs=EPSG:3978&INFO_FORMAT=text/html&m4h=t" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
 
-    <layer- label="Arizona" checked>
+    <map-layer label="Arizona" checked>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
       <map-meta name="cs" content="gcrs"></map-meta>
@@ -79,8 +79,8 @@ <h1>Test</h1>
           </map-polygon>
         </map-geometry>
       </map-feature>
-    </layer->
-    <layer- data-testid="vector" id="vector" label="vector states" src="data/us_pop_density.mapml"></layer->
+    </map-layer>
+    <map-layer data-testid="vector" id="vector" label="vector states" src="data/us_pop_density.mapml"></map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/core/projectionChange.html b/test/e2e/core/projectionChange.html
index 162ddb609..9a34e9a1d 100644
--- a/test/e2e/core/projectionChange.html
+++ b/test/e2e/core/projectionChange.html
@@ -23,7 +23,7 @@
 <map data-testid="viewer-one" style="height: 500px;width:500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
      controls>
 
-  <layer- label="Change Proj" checked>
+  <map-layer label="Change Proj" checked>
     <map-meta name="projection" content="CBMTILE"></map-meta>
     <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
     <map-meta name="cs" content="gcrs"></map-meta>
@@ -40,13 +40,13 @@ <h1>Test</h1>
         </map-a>
       </map-geometry>
     </map-feature>
-  </layer->
+  </map-layer>
 </map>
 
 <map data-testid="viewer-two" style="height: 500px;width:500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
      controls>
 
-  <layer- label="Change Proj" checked>
+  <map-layer label="Change Proj" checked>
     <map-meta name="projection" content="CBMTILE"></map-meta>
     <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
     <map-meta name="cs" content="gcrs"></map-meta>
@@ -63,8 +63,8 @@ <h1>Test</h1>
         </map-a>
       </map-geometry>
     </map-feature>
-  </layer->
-  <layer- label="Change Proj" checked>
+  </map-layer>
+  <map-layer label="Change Proj" checked>
     <map-meta name="projection" content="CBMTILE"></map-meta>
     <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
     <map-meta name="cs" content="gcrs"></map-meta>
@@ -79,7 +79,7 @@ <h1>Test</h1>
         </map-polygon>
       </map-geometry>
     </map-feature>
-  </layer->
+  </map-layer>
 </map>
 
 </body>
diff --git a/test/e2e/core/projectionChange.test.js b/test/e2e/core/projectionChange.test.js
index 2419479fa..60e301e61 100644
--- a/test/e2e/core/projectionChange.test.js
+++ b/test/e2e/core/projectionChange.test.js
@@ -23,11 +23,11 @@ test.describe('Linked Feature Projection Change Tests', () => {
     await page.keyboard.press('Enter');
     await page.waitForTimeout(2000);
     const isChecked = await page.$eval(
-      'body > map:nth-child(1) > layer-',
+      'body > map:nth-child(1) > map-layer',
       (layer) => layer.checked
     );
     const isDisabled = await page.$eval(
-      'body > map:nth-child(1) > layer-',
+      'body > map:nth-child(1) > map-layer',
       (layer) => layer.disabled
     );
     expect(isChecked).toBeTruthy();
@@ -42,11 +42,11 @@ test.describe('Linked Feature Projection Change Tests', () => {
     await page.keyboard.press('Enter');
     await page.waitForTimeout(2000);
     const isChecked = await page.$eval(
-      'body > map:nth-child(1) > layer-',
+      'body > map:nth-child(1) > map-layer',
       (layer) => layer.checked
     );
     const isDisabled = await page.$eval(
-      'body > map:nth-child(1) > layer-',
+      'body > map:nth-child(1) > map-layer',
       (layer) => layer.disabled
     );
     expect(isChecked).toBeTruthy();
diff --git a/test/e2e/core/projectionDefault.html b/test/e2e/core/projectionDefault.html
index 524c28955..91fd3fb43 100644
--- a/test/e2e/core/projectionDefault.html
+++ b/test/e2e/core/projectionDefault.html
@@ -9,7 +9,7 @@
 </head>
 <body>
 	<mapml-viewer>
-		<layer- label="Rectangle" checked>
+		<map-layer label="Rectangle" checked>
 			<map-feature>
 				<map-featurecaption>Rectangle</map-featurecaption>
 				<map-geometry>
@@ -20,7 +20,7 @@
 				</map-geometry>
 				<map-properties>Rectangle</map-properties>
 			</map-feature>
-		</layer->
+		</map-layer>
 	</mapml-viewer>
 </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/core/projectionDefault.test.js b/test/e2e/core/projectionDefault.test.js
index 1ad6aa82d..daeb26750 100644
--- a/test/e2e/core/projectionDefault.test.js
+++ b/test/e2e/core/projectionDefault.test.js
@@ -42,7 +42,7 @@ test.describe('Playwright Viewer Default Projection', () => {
     test('layer renders', async () => {
       await page.waitForTimeout(500);
       const featureSVG = await page.$eval(
-        'body > mapml-viewer > layer- > map-feature',
+        'body > mapml-viewer > map-layer > map-feature',
         (feature) => feature._groupEl.firstChild.getAttribute('d')
       );
       expect(featureSVG).toEqual('M62 27L62 75L206 75L206 27L62 27z');
diff --git a/test/e2e/core/reticle.html b/test/e2e/core/reticle.html
index d9c4ca17a..de1e8be02 100644
--- a/test/e2e/core/reticle.html
+++ b/test/e2e/core/reticle.html
@@ -11,7 +11,7 @@
 <body>
   <mapml-viewer style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040"
     lon="-75.2202344" controls>
-    <layer- id="query" label="Fire" checked>
+    <map-layer id="query" label="Fire" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" value="18" min="0" max="18" ></map-input>
         <map-input name="txmin" type="location" units="tilematrix" position="top-left" axis="easting" min="-2.003750834E7"
@@ -39,9 +39,9 @@
         <map-link rel="query"
                   tref="https://cwfis.cfs.nrcan.gc.ca/geoserver/public/wms?i={i}&j={j}&service=WMS&version=1.3.0&request=GetFeatureInfo&layers=public:fdr_current&QUERY_LAYERS=current:fdr_current&styles=&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&srs=EPSG:3978&INFO_FORMAT=text/html&m4h=t" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
 
-    <layer- label="Arizona" checked>
+    <map-layer label="Arizona" checked>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
       <map-meta name="cs" content="gcrs"></map-meta>
@@ -79,8 +79,8 @@ <h1>Test</h1>
           </map-polygon>
         </map-geometry>
       </map-feature>
-    </layer->
-    <layer- id="vector" label="vector states" src="data/us_pop_density.mapml"></layer->
+    </map-layer>
+    <map-layer id="vector" label="vector states" src="data/us_pop_density.mapml"></map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/core/reticle.test.js b/test/e2e/core/reticle.test.js
index c1514ead5..18abbcca1 100644
--- a/test/e2e/core/reticle.test.js
+++ b/test/e2e/core/reticle.test.js
@@ -67,7 +67,7 @@ test.describe('Playwright Keyboard Navigation + Query Layer Tests', () => {
       await page.keyboard.press('Tab');
       await page.keyboard.press('ArrowUp');
       await page.evaluateHandle(() =>
-        document.querySelector('layer-').removeAttribute('checked')
+        document.querySelector('map-layer').removeAttribute('checked')
       );
       const afterUncheck = await page.$eval(
         'div > div.mapml-crosshair',
@@ -75,7 +75,7 @@ test.describe('Playwright Keyboard Navigation + Query Layer Tests', () => {
       );
 
       await page.evaluateHandle(() =>
-        document.querySelector('layer-').setAttribute('checked', '')
+        document.querySelector('map-layer').setAttribute('checked', '')
       );
       const afterCheck = await page.$eval('div > div.mapml-crosshair', (div) =>
         window.getComputedStyle(div).getPropertyValue('display')
diff --git a/test/e2e/core/styleParsing.html b/test/e2e/core/styleParsing.html
index e212010ba..7922c9dce 100644
--- a/test/e2e/core/styleParsing.html
+++ b/test/e2e/core/styleParsing.html
@@ -22,7 +22,7 @@
 <body>
   <map data-testid="map1" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
 
-    <layer- data-testid="arizona" label="Arizona" checked>
+    <map-layer data-testid="arizona" label="Arizona" checked>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-meta name="zoom" content="min=0,max=5,value=0"></map-meta>
       <map-meta name="extent"
@@ -87,8 +87,8 @@ <h1>Colorado</h1>
           </map-polygon>
         </map-geometry>
       </map-feature>
-    </layer->
-    <layer- data-testid="alabama" label="Alabama" checked>
+    </map-layer>
+    <map-layer data-testid="alabama" label="Alabama" checked>
       <map-meta name="zoom" content="min=0,max=10"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" min="2" max="18" ></map-input>
@@ -99,11 +99,11 @@ <h1>Colorado</h1>
         <!-- Local layer content map-link[rel=features] remote styles rendered as style/link in same order as found, in expected shadow root location -->
         <map-link data-testid="alabama-features" rel="features" tref="data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </map>
   <map data-testid="map2" is="web-map" projection="WGS84" zoom="0" lat="0" lon="0" controls>
 
-    <layer- label="Inline Countries" checked>
+    <map-layer label="Inline Countries" checked>
       <map-style id="one">
         .firstVector {
           color: aliceblue;
@@ -129,9 +129,9 @@ <h1>Colorado</h1>
           tref='data/wgs84/{zoomLevel}/r{row}_c{col}.mapml' ></map-link>
 
       </map-extent>
-    </layer->
+    </map-layer>
     
-    <layer- data-testid="remote" label="src-based Countries" src="data/vector-tile-test.mapml" checked></layer->
+    <map-layer data-testid="remote" label="src-based Countries" src="data/vector-tile-test.mapml" checked></map-layer>
   </map>
 </body>
 
diff --git a/test/e2e/core/styleParsing.test.js b/test/e2e/core/styleParsing.test.js
index c94847949..ecbde373f 100644
--- a/test/e2e/core/styleParsing.test.js
+++ b/test/e2e/core/styleParsing.test.js
@@ -124,8 +124,8 @@ embedded in text/mapml tiles are rendered in same order as found in tile`, async
     });
     expect(renderedStyleIds).toEqual('one,two,three');
   });
-  test(`Remote styles (layer- src) in the map-head rendered in the same source order\
-as children of layer-._layer._container`, async () => {
+  test(`Remote styles (map-layer src) in the map-head rendered in the same source order\
+as children of map-layer._layer._container`, async () => {
     const remoteLayer = page.getByTestId('remote');
     const ids = await remoteLayer.evaluate((l) => {
       const elementSequence = l.shadowRoot.querySelectorAll(
@@ -151,7 +151,7 @@ as children of layer-._layer._container`, async () => {
     });
     expect(renderedIds).toEqual(ids);
   });
-  test(`Remote (layer- src) styles in the remote map-extent should be rendered \
+  test(`Remote (map-layer src) styles in the remote map-extent should be rendered \
 in the same order as in remote source, in the map-extent._extentLayer._container`, async () => {
     const remoteLayer = page.getByTestId('remote');
     const ids = await remoteLayer.evaluate((l) => {
@@ -179,7 +179,7 @@ in the same order as in remote source, in the map-extent._extentLayer._container
     });
     expect(renderedIds).toEqual(ids);
   });
-  test(`Remote (layer- src) styles embedded within loaded tiles should be \
+  test(`Remote (map-layer src) styles embedded within loaded tiles should be \
 rendered in the same order as in the tile, in the tile container`, async () => {
     // there's more than one use of vector-tile-test.mapml here, so the test id
     // is not unique. this is the second and last occurence of it though:
diff --git a/test/e2e/core/tms.html b/test/e2e/core/tms.html
index 8834326f7..a0198ff38 100644
--- a/test/e2e/core/tms.html
+++ b/test/e2e/core/tms.html
@@ -11,7 +11,7 @@
     <body>
         <mapml-viewer style="width: 600px;height:600px" projection="WGS84" zoom="1" lat="-10" lon="-112" controls>
  
-            <layer- label="Inline Countries" checked>
+            <map-layer label="Inline Countries" checked>
                 <map-meta name="zoom" content="min=0,max=4"></map-meta>
                 <map-extent units="WGS84" checked hidden>
                     <map-input name="zoomLevel" type="zoom" value="1" min="0" max="4"></map-input>
@@ -22,7 +22,7 @@
                     <map-link tms rel="tile" tref="https://maps4html.org/TiledArt-Rousseau/TheBanksOfTheBièvreNearBicêtre/{zoomLevel}/{col}/{row}.png" ></map-link>
 
                 </map-extent>
-            </layer->
+            </map-layer>
         </mapml-viewer>
     </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/core/zoomChangeProjection.html b/test/e2e/core/zoomChangeProjection.html
index c1a2babaa..676b44cc7 100644
--- a/test/e2e/core/zoomChangeProjection.html
+++ b/test/e2e/core/zoomChangeProjection.html
@@ -10,7 +10,7 @@
 </head>
 <body>
 <map style="width: 800px;height: 800px" is="web-map" projection="CBMTILE" zoom="8" lat="48.84042" lon="-101.219978" controls>
-  <layer- label="CBMT" src="data/cbmt-changeProjection.mapml" checked></layer->
+  <map-layer label="CBMT" src="data/cbmt-changeProjection.mapml" checked></map-layer>
 </map>
 </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/core/zoomChangeProjection.test.js b/test/e2e/core/zoomChangeProjection.test.js
index cb6a68cdb..a8051bd6e 100644
--- a/test/e2e/core/zoomChangeProjection.test.js
+++ b/test/e2e/core/zoomChangeProjection.test.js
@@ -40,7 +40,7 @@ test.describe.skip('Playwright zoomin zoomout Projection Change Tests', () => {
       (map) => map.projection
     );
     const layerValid = await page.$eval(
-      'body > map > layer-',
+      'body > map > map-layer',
       (layer) => !layer.hasAttribute('disabled')
     );
     expect(newProjection).toEqual('OSMTILE');
@@ -57,7 +57,7 @@ test.describe.skip('Playwright zoomin zoomout Projection Change Tests', () => {
       (map) => map.projection
     );
     const layerValid = await page.$eval(
-      'body > map > layer-',
+      'body > map > map-layer',
       (layer) => !layer.hasAttribute('disabled')
     );
     expect(newProjection).toEqual('CBMTILE');
diff --git a/test/e2e/data/tiles/cbmt/alabama_feature.mapml b/test/e2e/data/tiles/cbmt/alabama_feature.mapml
index 144959502..6616d8649 100644
--- a/test/e2e/data/tiles/cbmt/alabama_feature.mapml
+++ b/test/e2e/data/tiles/cbmt/alabama_feature.mapml
@@ -2,9 +2,9 @@
     <map-head>
         <map-title>Natural Resources Canada's CanVec+ 031G - Map Markup Language</map-title>
         <meta http-equiv="Content-Type" content="text/mapml"/>
-        <!-- map-link or map-style elements loaded from remote layer- (has src
+        <!-- map-link or map-style elements loaded from remote map-layer (has src
              attribute should be rendered as link / style in the 
-             layer-._layer._container -->
+             map-layer._layer._container -->
         <map-link id="one" rel="stylesheet" href="canvec_cantopo_svg.css" type="text/css"></map-link>
         <map-link id="two" rel="stylesheet" href="canvec_feature_properties.css" type="text/css"></map-link>
         <map-style id="three">
diff --git a/test/e2e/data/tiles/wgs84/0/r0_c0.mapml b/test/e2e/data/tiles/wgs84/0/r0_c0.mapml
index 77c95951e..f93eeb1a3 100644
--- a/test/e2e/data/tiles/wgs84/0/r0_c0.mapml
+++ b/test/e2e/data/tiles/wgs84/0/r0_c0.mapml
@@ -27,7 +27,7 @@
 <!-- Local content map-link[rel=tile][type=text/mapml] with remote styles \
 embedded in text/mapml tiles are rendered in same order as found in tile -->
 <!-- AND -->
-<!-- Remote (layer- src) styles embedded within loaded tiles should be \
+<!-- Remote (map-layer src) styles embedded within loaded tiles should be \
 rendered in the same order as in the tile, in the tile container -->
                <map-polygon data-testid="r0_c0">
                   <map-coordinates>-163.4686870536532 -83.0479765610694 -162.1722212049075 -83.1578465482512 -161.8082768723677 -83.0067753158762 -162.4688701702985 -82.8776780809375 -163.711774400293 -82.8405969602637 -163.4686870536532 -83.0479765610694</map-coordinates>
diff --git a/test/e2e/data/tiles/wgs84/vector-tile-test.mapml b/test/e2e/data/tiles/wgs84/vector-tile-test.mapml
index 1e49796e3..886ef483a 100644
--- a/test/e2e/data/tiles/wgs84/vector-tile-test.mapml
+++ b/test/e2e/data/tiles/wgs84/vector-tile-test.mapml
@@ -4,7 +4,7 @@
         <map-meta charset="utf-8"></map-meta>
         <map-meta name="zoom" content="min=0,max=5"></map-meta>
         <map-link rel="license" href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285" title="© Natural Resources Canada" ></map-link>
-        <!-- Remote styles (layer- src) in the map-head rendered in the same source order as children of layer-._layer._container -->
+        <!-- Remote styles (map-layer src) in the map-head rendered in the same source order as children of map-layer._layer._container -->
         <map-style id="one">
             .secondLayerVector{
                 color:black;
@@ -16,7 +16,7 @@
    </map-head>
    <map-body>
         <map-extent units="WGS84" checked="checked" hidden="hidden">
-            <!-- Remote (layer- src) styles in the remote map-extent should be rendered
+            <!-- Remote (map-layer src) styles in the remote map-extent should be rendered
                in the same order as in remote source, in the map-extent._extentLayer._container -->
             <map-link id="three" rel="stylesheet" href="vector-tile-test2.css"></map-link>
             <map-style id="four">.arule { margin: 2px; }</map-style>
diff --git a/test/e2e/elements/map-a/map-a.html b/test/e2e/elements/map-a/map-a.html
index fb24f9d0c..5710c10a7 100644
--- a/test/e2e/elements/map-a/map-a.html
+++ b/test/e2e/elements/map-a/map-a.html
@@ -21,7 +21,7 @@
   </head>
   <body>
     <mapml-viewer projection="OSMTILE" data-testid="viewer" style="height: 500px;width:500px;" controls zoom="18" lat="40.7075" lon="-74.011" >
-      <layer- data-testid="inline-features" label="inline-features" checked>
+      <map-layer data-testid="inline-features" label="inline-features" checked>
         <map-meta name="projection" content="OSMTILE"></map-meta>
         <map-meta name="cs" content="pcrs"></map-meta>
         <map-meta name="extent" content="top-left-easting=-8238959.40,top-left-northing=4971112.17,bottom-right-easting=-8237812.69,bottom-right-northing=4969300.12"></map-meta>
@@ -75,9 +75,9 @@
             </table>
           </map-properties>
         </map-feature>
-      </layer->
-      <layer- data-testid="remote-features" label="remote-features.mapml"  src="remote-features.mapml" checked></layer->
-      <layer- data-testid="inline-templated" label="inline-rel-features" checked>
+      </map-layer>
+      <map-layer data-testid="remote-features" label="remote-features.mapml"  src="remote-features.mapml" checked></map-layer>
+      <map-layer data-testid="inline-templated" label="inline-rel-features" checked>
         <map-meta name="projection" content="OSMTILE"></map-meta>
         <map-meta name="cs" content="pcrs"></map-meta>
         <map-meta name="extent" content="top-left-easting=-8238959.40,top-left-northing=4971112.17,bottom-right-easting=-8237812.69,bottom-right-northing=4969300.12"></map-meta>
@@ -92,8 +92,8 @@
             <map-input name="h" type="height" min="1" max="4096" ></map-input>
             <map-link data-testid="inline-templated-link" rel="features" tref="./remote-features.mapml?format_options=mapmlfeatures:true&amp;request=GetMap&amp;crs=MapML:OSMTILE&amp;bbox={xmin},{ymin},{xmax},{ymax}&amp;format=text/mapml&amp;language=en&amp;version=1.3.0&amp;transparent=true&amp;service=WMS&amp;layers=poi&amp;width={w}&amp;styles=poi&amp;height={h}"></map-link>
         </map-extent>
-      </layer->
-      <layer- data-testid="remote-templated" src="remote-rel-features.mapml" checked ></layer->
+      </map-layer>
+      <map-layer data-testid="remote-templated" src="remote-rel-features.mapml" checked ></map-layer>
     </mapml-viewer>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/map-extent/handleChange-bug.html b/test/e2e/elements/map-extent/handleChange-bug.html
index 3803f8872..e6ebd6e7d 100644
--- a/test/e2e/elements/map-extent/handleChange-bug.html
+++ b/test/e2e/elements/map-extent/handleChange-bug.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; 
        } 
@@ -49,7 +49,7 @@
        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> 
@@ -57,7 +57,7 @@
        <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; 
          } 
          
@@ -74,7 +74,7 @@
   <body>
     
       <mapml-viewer data-testid="viewer" projection="OSMTILE" zoom="2" lat="50.7" lon="-84.4" controls>
-        <layer- data-testid="problem-layer" label="Countries" checked>
+        <map-layer data-testid="problem-layer" label="Countries" checked>
           <map-link rel="stylesheet" href="tiles/vector-tile.css" ></map-link>
           <map-extent units="OSMTILE" checked hidden>
             <map-meta name='zoom' content="min=0,max=6"></map-meta>
@@ -82,7 +82,7 @@
             <map-input  name="row" type="location" axis="row" units="tilematrix" min="20" max="23"></map-input>
             <map-input  name="col" type="location" axis="column" units="tilematrix" min="15" max="19"></map-input>
             <map-link data-testid="templated-link" rel='tile' type='text/mapml' tref='tiles/osmtile/{zoomLevel}/{row}/{col}.mapml' ></map-link>           </map-extent>
-        </layer->
+        </map-layer>
       </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/elements/map-extent/map-extent-api-web-map.html b/test/e2e/elements/map-extent/map-extent-api-web-map.html
index 610819f93..c3177748f 100644
--- a/test/e2e/elements/map-extent/map-extent-api-web-map.html
+++ b/test/e2e/elements/map-extent/map-extent-api-web-map.html
@@ -24,7 +24,7 @@
 
 <body>
   <map is="web-map" data-testid="firstmap" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- id="cbmt1" data-testid="cbmt1" label="CBMT - INLINE" checked>
+    <map-layer id="cbmt1" data-testid="cbmt1" label="CBMT - INLINE" checked>
       <map-meta data-testid="meta-zoom-1" name="zoom" content="min=1,max=2"></map-meta>
       <map-meta data-testid="meta-zoom-1-1" name="zoom" content="min=-1,max=-1"></map-meta>
       <map-extent data-testid="ext1" label="User-generated label" units="CBMTILE" checked hidden>
@@ -38,8 +38,8 @@
           <map-meta data-testid="meta-zoom-3-1" name="zoom" content="min=27,max=35"></map-meta>
         </map-link>
       </map-extent>
-    </layer->
-    <layer- id="zoom-to-test" data-testid="cbmt2" label="CBMT2- INLINE" checked>
+    </map-layer>
+    <map-layer id="zoom-to-test" data-testid="cbmt2" label="CBMT2- INLINE" checked>
       <map-extent data-testid="ext2" label="User-generated label" units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
@@ -47,7 +47,7 @@
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'>
         </map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </map>  
 </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/map-extent/map-extent-api.html b/test/e2e/elements/map-extent/map-extent-api.html
index 60c195649..b09f51dc0 100644
--- a/test/e2e/elements/map-extent/map-extent-api.html
+++ b/test/e2e/elements/map-extent/map-extent-api.html
@@ -24,7 +24,7 @@
 
 <body>
   <mapml-viewer data-testid="firstmap" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- id="cbmt1" data-testid="cbmt1" label="CBMT - INLINE" checked>
+    <map-layer id="cbmt1" data-testid="cbmt1" label="CBMT - INLINE" checked>
       <map-meta data-testid="meta-zoom-1" name="zoom" content="min=1,max=2"></map-meta>
       <map-meta data-testid="meta-zoom-1-1" name="zoom" content="min=-1,max=-1"></map-meta>
       <map-extent data-testid="ext1" label="User-generated label" units="CBMTILE" checked hidden>
@@ -38,8 +38,8 @@
           <map-meta data-testid="meta-zoom-3-1" name="zoom" content="min=27,max=35"></map-meta>
         </map-link>
       </map-extent>
-    </layer->
-    <layer- id="zoom-to-test" data-testid="cbmt2" label="CBMT2- INLINE" checked>
+    </map-layer>
+    <map-layer id="zoom-to-test" data-testid="cbmt2" label="CBMT2- INLINE" checked>
       <map-extent data-testid="ext2" label="User-generated label" units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
@@ -47,7 +47,7 @@
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'>
         </map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>  
 </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/map-extent/map-extent-api.test.js b/test/e2e/elements/map-extent/map-extent-api.test.js
index fb5f12733..860c89fb7 100644
--- a/test/e2e/elements/map-extent/map-extent-api.test.js
+++ b/test/e2e/elements/map-extent/map-extent-api.test.js
@@ -72,7 +72,7 @@ test.describe('map-extent tests', () => {
     await map.evaluate((map) => {
       map.insertAdjacentHTML(
         'beforeend',
-        `<layer- data-testid="remote-layer" src="remote-layer.mapml"></layer>`
+        `<map-layer data-testid="remote-layer" src="remote-layer.mapml"></layer>`
       );
     });
     let remoteMapExtent = await page.getByTestId('remote-map-extent');
@@ -101,7 +101,7 @@ test.describe('map-extent tests', () => {
     await map.evaluate((map) => {
       map.insertAdjacentHTML(
         'beforeend',
-        `<layer- data-testid="remote-layer" src="remote-layer.mapml"></layer>`
+        `<map-layer data-testid="remote-layer" src="remote-layer.mapml"></layer>`
       );
     });
     remoteMapExtent = await page.getByTestId('remote-map-extent');
@@ -115,7 +115,7 @@ test.describe('map-extent tests', () => {
     await page.waitForTimeout(1000);
   });
   test('map-extent.getLayerEl() works', async () => {
-    // test that map-extent.getLayerEl() returns ancestor layer-
+    // test that map-extent.getLayerEl() returns ancestor map-layer
     // for inline content
     let layer = await page.getByTestId('cbmt1');
     let layerSelectedByGetLayerEl = await layer.evaluate((layer) => {
@@ -123,12 +123,12 @@ test.describe('map-extent tests', () => {
     });
     expect(layerSelectedByGetLayerEl).toBe(true);
 
-    // test that map-extent.getLayerEl() returns ancestor layer-
+    // test that map-extent.getLayerEl() returns ancestor map-layer
     // for remote content
     await layer.evaluate((map) => {
       map.insertAdjacentHTML(
         'afterend',
-        `<layer- data-testid="remote-layer" src="remote-layer.mapml"></layer>`
+        `<map-layer data-testid="remote-layer" src="remote-layer.mapml"></layer>`
       );
     });
     let remoteMapExtent = await page.getByTestId('remote-map-extent');
@@ -140,7 +140,7 @@ test.describe('map-extent tests', () => {
   });
   test('map-extent.getMeta() works', async () => {
     // map-meta distribution is like so:
-    //    <layer- id="cbmt1" data-testid="cbmt1" label="CBMT - INLINE" checked>
+    //    <map-layer id="cbmt1" data-testid="cbmt1" label="CBMT - INLINE" checked>
     //      <map-meta data-testid="meta-zoom-1" name="zoom" content="min=1,max=2"></map-meta>
     //      <map-meta data-testid="meta-zoom-1-1" name="zoom" content="min=-1,max=-1"></map-meta>
     //      <map-extent data-testid="ext1" label="User-generated label" units="CBMTILE" checked hidden>
@@ -154,7 +154,7 @@ test.describe('map-extent tests', () => {
     //          <map-meta data-testid="meta-zoom-3-1" name="zoom" content="min=14,max=27"></map-meta>
     //        </map-link>
     //      </map-extent>
-    //    </layer->
+    //    </map-layer>
 
     //  meta-zoom-2 should be found first
     const mapExtent = await page.getByTestId('ext1');
diff --git a/test/e2e/elements/map-extent/map-extent-checked.html b/test/e2e/elements/map-extent/map-extent-checked.html
index 2ef9e67c8..4de438435 100644
--- a/test/e2e/elements/map-extent/map-extent-checked.html
+++ b/test/e2e/elements/map-extent/map-extent-checked.html
@@ -23,13 +23,13 @@
       mapml-viewer:not(:defined) > * {
         display: none;
       }
-      nlayer- {
+      map-layer {
         display: none;
       }
     </style>
     <noscript>
     <style>
-      mapml-viewer:not(:defined) > :not(layer-) {
+      mapml-viewer:not(:defined) > :not(map-layer) {
         display: initial;
       }
     </style>
@@ -37,7 +37,7 @@
   </head>
   <body>
   <mapml-viewer projection="OSMTILE" zoom="4" lat="37.163851" lon="-95.8506355" controls controlslist="geolocation">
-    <layer- label="North America sample imagery,USA Population" src="map-extent-checked.mapml" checked></layer->
+    <map-layer label="North America sample imagery,USA Population" src="map-extent-checked.mapml" checked></map-layer>
   </mapml-viewer>
 </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/map-extent/map-extent-in-shadow-root.html b/test/e2e/elements/map-extent/map-extent-in-shadow-root.html
index bc5d0e208..c80ddeee7 100644
--- a/test/e2e/elements/map-extent/map-extent-in-shadow-root.html
+++ b/test/e2e/elements/map-extent/map-extent-in-shadow-root.html
@@ -36,7 +36,7 @@
     <host-element>
       <template shadowrootmode="open">
         <mapml-viewer data-testid="viewer" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-          <layer- data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></layer->
+          <map-layer data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></map-layer>
         </mapml-viewer>
       </template>
     </host-element>
diff --git a/test/e2e/elements/map-extent/map-extent.html b/test/e2e/elements/map-extent/map-extent.html
index 0a6b21e3e..91c5702df 100644
--- a/test/e2e/elements/map-extent/map-extent.html
+++ b/test/e2e/elements/map-extent/map-extent.html
@@ -52,15 +52,15 @@
 
 <body>
   <mapml-viewer data-testid="firstmap" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- id="cbmt1" data-testid="cbmt1" label="CBMT - INLINE" checked>
+    <map-layer id="cbmt1" data-testid="cbmt1" label="CBMT - INLINE" checked>
       <map-extent data-testid="ext1" label="User-generated label" units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
       </map-extent>
-    </layer->
-    <layer- id="cbmt2" data-testid="cbmt2" label="CBMT - INLINE - 2" checked>
+    </map-layer>
+    <map-layer id="cbmt2" data-testid="cbmt2" label="CBMT - INLINE - 2" checked>
       <map-extent data-testid="ext2-1" label="User-generated label" units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
@@ -73,7 +73,7 @@
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>  
 </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/map-extent/map-extent.test.js b/test/e2e/elements/map-extent/map-extent.test.js
index 3fee3586f..d2979da48 100644
--- a/test/e2e/elements/map-extent/map-extent.test.js
+++ b/test/e2e/elements/map-extent/map-extent.test.js
@@ -163,7 +163,7 @@ test.describe('map-extent tests', () => {
     });
     const viewer = page.getByTestId('firstmap');
     await viewer.evaluate((viewer) => {
-      const l = document.createElement('layer-');
+      const l = document.createElement('map-layer');
       l.label = 'Layer';
       const e = document
         .querySelector('template')
@@ -182,7 +182,7 @@ test.describe('map-extent tests', () => {
   test("An empty layer's extent equals projection extent + it updates once content is added to the layer", async () => {
     const viewer = await page.getByTestId('firstmap');
     await viewer.evaluate((viewer) => {
-      const l = document.createElement('layer-');
+      const l = document.createElement('map-layer');
       l.label = 'An empty layer';
       l.setAttribute('data-testid', 'empty');
       const metaProjection = document.createElement('map-meta');
@@ -309,7 +309,7 @@ test.describe('map-extent tests', () => {
     });
     // set up an empty layer
     await viewer.evaluate((viewer) => {
-      const l = document.createElement('layer-');
+      const l = document.createElement('map-layer');
       l.label = 'An empty layer';
       l.setAttribute('data-testid', 'empty');
       const metaProjection = document.createElement('map-meta');
diff --git a/test/e2e/elements/map-feature/feature-in-shadow-root.html b/test/e2e/elements/map-feature/feature-in-shadow-root.html
index f1de9b6aa..5b2aa7935 100644
--- a/test/e2e/elements/map-feature/feature-in-shadow-root.html
+++ b/test/e2e/elements/map-feature/feature-in-shadow-root.html
@@ -36,7 +36,7 @@
     <host-element>
       <template shadowrootmode="open">
         <mapml-viewer data-testid="viewer" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-          <layer- data-testid="test-layer" label="Remote content" src="restaurants/african.mapml" checked></layer->
+          <map-layer data-testid="test-layer" label="Remote content" src="restaurants/african.mapml" checked></map-layer>
         </mapml-viewer>
       </template>
     </host-element>
diff --git a/test/e2e/elements/map-feature/map-feature-extent.html b/test/e2e/elements/map-feature/map-feature-extent.html
index 636089eb6..9798c6caf 100644
--- a/test/e2e/elements/map-feature/map-feature-extent.html
+++ b/test/e2e/elements/map-feature/map-feature-extent.html
@@ -38,7 +38,7 @@
   <body>
   <mapml-viewer data-testid="viewer" zoom="10" lon="-75.6" lat="45.4" controls>
 
-    <layer- data-testid="layer1" label="Polygon" checked>
+    <map-layer data-testid="layer1" label="Polygon" checked>
       <map-meta name="projection" content="OSMTILE"></map-meta>
       
       <!-- set up a layer with some non-default extent via map-meta s-->
@@ -84,7 +84,7 @@
         </map-geometry>
         <map-properties><h2>A polygon</h2></map-properties>
       </map-feature>
-    </layer->
+    </map-layer>
 
   </mapml-viewer>
 </body>
diff --git a/test/e2e/elements/map-feature/map-feature-extent.test.js b/test/e2e/elements/map-feature/map-feature-extent.test.js
index 9d81476e3..be32ccdc0 100644
--- a/test/e2e/elements/map-feature/map-feature-extent.test.js
+++ b/test/e2e/elements/map-feature/map-feature-extent.test.js
@@ -10,7 +10,7 @@ test.describe('map-feature extent functionality and API', () => {
       (await context.newPage());
     await page.goto('map-feature-extent.html');
   });
-  /* Test that feature extent is correct, interaction with layer- extent is
+  /* Test that feature extent is correct, interaction with map-layer extent is
    * appropriate.  Tests SHOULD cover different projections, not only OSMTILE and WGS84,
    * but also CBMTILE and perhaps a custom projection.  The tricky thing about
    * features is that coordinates are supposed to be expressed in any of gcrs,
@@ -110,7 +110,7 @@ test.describe('map-feature extent functionality and API', () => {
     );
     expect(metaBoundsExcludeFeatureBounds).toBe(true);
   });
-  test(`bounds of map-meta + map-feature extent bounds equal layer- extent bounds`, async () => {
+  test(`bounds of map-meta + map-feature extent bounds equal map-layer extent bounds`, async () => {
     // get bounds of map-meta
     const meta = await page.getByTestId('meta-ext1');
     const metaExtent = await meta.evaluate((m) => {
diff --git a/test/e2e/elements/map-feature/render-bug.html b/test/e2e/elements/map-feature/render-bug.html
index cde5af14a..7d66a8b16 100644
--- a/test/e2e/elements/map-feature/render-bug.html
+++ b/test/e2e/elements/map-feature/render-bug.html
@@ -15,7 +15,7 @@
   </head>
   <body>
   <mapml-viewer data-testid="viewer" zoom="7" lon="16.53066406" lat="45.21669922" controls>
-    <layer- label="Polygon with map-span" checked>
+    <map-layer label="Polygon with map-span" checked>
       <map-meta name="cs" content="gcrs"></map-meta>
       <map-meta name="projection" content="OSMTILE"></map-meta>
       <map-style>.bbox{display:none; stroke:none; fill:none}
@@ -27,8 +27,8 @@
           <h2>zinger</h2>
         </map-properties>
       </map-feature>  
-    </layer->
-    <layer- label="Same polygon, no map-span" >
+    </map-layer>
+    <map-layer label="Same polygon, no map-span" >
       <map-meta name="cs" content="gcrs"></map-meta>
       <map-meta name="projection" content="OSMTILE"></map-meta>
       <map-style>.bbox{display:none; stroke:none; fill:none}
@@ -39,7 +39,7 @@ <h2>zinger</h2>
           <h2>normal</h2>
         </map-properties>
       </map-feature>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 </html>
diff --git a/test/e2e/elements/map-input/map-input-in-shadow-root.html b/test/e2e/elements/map-input/map-input-in-shadow-root.html
index bc5d0e208..c80ddeee7 100644
--- a/test/e2e/elements/map-input/map-input-in-shadow-root.html
+++ b/test/e2e/elements/map-input/map-input-in-shadow-root.html
@@ -36,7 +36,7 @@
     <host-element>
       <template shadowrootmode="open">
         <mapml-viewer data-testid="viewer" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-          <layer- data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></layer->
+          <map-layer data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></map-layer>
         </mapml-viewer>
       </template>
     </host-element>
diff --git a/test/e2e/elements/layer-/dummy-cbmtile-cbmt-layer-extent.mapml b/test/e2e/elements/map-layer/dummy-cbmtile-cbmt-layer-extent.mapml
similarity index 100%
rename from test/e2e/elements/layer-/dummy-cbmtile-cbmt-layer-extent.mapml
rename to test/e2e/elements/map-layer/dummy-cbmtile-cbmt-layer-extent.mapml
diff --git a/test/e2e/elements/layer-/layer-extent.html b/test/e2e/elements/map-layer/layer-extent.html
similarity index 88%
rename from test/e2e/elements/layer-/layer-extent.html
rename to test/e2e/elements/map-layer/layer-extent.html
index b03cdd2fc..c766f137a 100644
--- a/test/e2e/elements/layer-/layer-extent.html
+++ b/test/e2e/elements/map-layer/layer-extent.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>&lt;layer-&gt; test</title>
+    <title>&lt;map-layer&gt; test</title>
     <meta charset="UTF-8">
     <script type="module" src="mapml.js"></script>
     <style>
@@ -21,8 +21,8 @@
   </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-layer data-testid="remote-layer" label="Remote content" src="dummy-cbmtile-cbmt-layer-extent.mapml" checked></map-layer>
+      <map-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>
@@ -38,7 +38,7 @@
           </map-link>
         </map-extent>
         
-      </layer->
+      </map-layer>
     </mapml-viewer>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/layer-/layer-extent.test.js b/test/e2e/elements/map-layer/layer-extent.test.js
similarity index 92%
rename from test/e2e/elements/layer-/layer-extent.test.js
rename to test/e2e/elements/map-layer/layer-extent.test.js
index 264ace631..c245060db 100644
--- a/test/e2e/elements/layer-/layer-extent.test.js
+++ b/test/e2e/elements/map-layer/layer-extent.test.js
@@ -1,6 +1,6 @@
 import { test, expect, chromium } from '@playwright/test';
 
-test.describe('layer- local/inline extent source tests', () => {
+test.describe('map-layer local/inline extent source tests', () => {
   let page;
   let context;
   test.beforeAll(async function () {
@@ -11,9 +11,9 @@ test.describe('layer- local/inline extent source tests', () => {
     await page.goto('layer-extent.html');
     await page.waitForTimeout(1000);
   });
-  test('layer-.extent min/maxZoom from map-inputs', async () => {
+  test('map-layer.extent min/maxZoom from map-inputs', async () => {
     // changed to add :host / :scope - create a test that passes now but failed before that change
-    //      <layer- data-testid="inline-layer" label="Local content" checked>
+    //      <map-layer data-testid="inline-layer" label="Local content" checked>
     //        <map-extent units="CBMTILE"  checked="checked">
     //          <!-- the bounds and zoom bounds of the inline content are different than the remote layer's content -->
     //          <map-input name="z" type="zoom"  value="17" min="3" max="17"></map-input>
@@ -24,7 +24,7 @@ test.describe('layer- local/inline extent source tests', () => {
     //            <map-meta name="zoom" content="min=5,max=10"></map-meta>
     //          </map-link>//
     //        </map-extent>
-    //      </layer->
+    //      </map-layer>
     const inline = await page.getByTestId('inline-layer');
     let zoomBounds = await inline.evaluate((l) => l.extent.zoom);
     expect(zoomBounds.minZoom).toEqual(3);
@@ -35,7 +35,7 @@ test.describe('layer- local/inline extent source tests', () => {
     expect(zoomBounds.minZoom).toEqual(0);
     expect(zoomBounds.maxZoom).toEqual(17);
   });
-  test('layer-.extent bounds from map-inputs', async () => {
+  test('map-layer.extent bounds from map-inputs', async () => {
     const inline = await page.getByTestId('inline-layer');
     let bounds = await inline.evaluate((l) => {
       return {
@@ -63,9 +63,9 @@ test.describe('layer- local/inline extent source tests', () => {
     expect(bounds.xmax).toEqual(32463);
     expect(bounds.ymax).toEqual(34475);
   });
-  test('layer-.extent bounds update when map-extent changes extent due to map-meta', async () => {
-    // add a map-meta for extent inside the layer- element
-    //      <layer- data-testid="inline-layer" label="Local content" checked>
+  test('map-layer.extent bounds update when map-extent changes extent due to map-meta', async () => {
+    // add a map-meta for extent inside the map-layer element
+    //      <map-layer data-testid="inline-layer" label="Local content" checked>
     //        <map-extent units="CBMTILE"  checked="checked">
     //          <!-- add map-meta extent here, layer extent bounds should change -->
     //          <!-- add map-meta zoom here, layer extent zoom bounds should change -->
@@ -79,7 +79,7 @@ test.describe('layer- local/inline extent source tests', () => {
     //            <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>
     //          </map-link>//
     //        </map-extent>
-    //      </layer->
+    //      </map-layer>
 
     const inline = await page.getByTestId('inline-layer');
     let bounds = await inline.evaluate((l) => {
@@ -136,13 +136,13 @@ test.describe('layer- local/inline extent source tests', () => {
     expect(bounds.zmaxNative).toEqual(17);
     expect(bounds.zminNative).toEqual(3);
   });
-  test('layer-.extent bounds update with addition of map-meta children', async () => {
+  test('map-layer.extent bounds update with addition of map-meta children', async () => {
     await page.reload();
     await page.waitForTimeout(1000);
-    // this tests the MutationObserver on the layer- element to ensure it's
+    // this tests the MutationObserver on the map-layer element to ensure it's
     // listening for map-meta name=zoom and name=extent
-    // add a map-meta for extent inside the layer- element
-    //      <layer- data-testid="inline-layer" label="Local content" checked>
+    // add a map-meta for extent inside the map-layer element
+    //      <map-layer data-testid="inline-layer" label="Local content" checked>
     //          <!-- add map-meta extent here, layer extent bounds should change -->
     //          <!-- add map-meta zoom here, layer extent zoom bounds should change -->
     //        <map-extent units="CBMTILE"  checked="checked">
@@ -156,7 +156,7 @@ test.describe('layer- local/inline extent source tests', () => {
     //            <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>
     //          </map-link>//
     //        </map-extent>
-    //      </layer->
+    //      </map-layer>
 
     const inline = await page.getByTestId('inline-layer');
     let bounds = await inline.evaluate((l) => {
@@ -213,7 +213,7 @@ test.describe('layer- local/inline extent source tests', () => {
     expect(bounds.zmaxNative).toEqual(17);
     expect(bounds.zminNative).toEqual(3);
   });
-  test(`layer- .extent bounds change with added / removed child map-features`, async () => {
+  test(`map-layer .extent bounds change with added / removed child map-features`, async () => {
     const newFeature = `<map-feature data-testid="f1" zoom="0" min="0" max="11"><map-geometry cs="pcrs"><map-linestring>
                         <map-coordinates>-7195964 5732985 4048850 5732985 4048850 -5511829 -7195964 -5511829 -7195964 5732985 
                         </map-coordinates></map-linestring></map-geometry>
diff --git a/test/e2e/elements/layer-/layer-src.test.js b/test/e2e/elements/map-layer/layer-src.test.js
similarity index 91%
rename from test/e2e/elements/layer-/layer-src.test.js
rename to test/e2e/elements/map-layer/layer-src.test.js
index 0a205cdab..f517f70d9 100644
--- a/test/e2e/elements/layer-/layer-src.test.js
+++ b/test/e2e/elements/map-layer/layer-src.test.js
@@ -1,6 +1,6 @@
 import { test, expect, chromium } from '@playwright/test';
 
-test.describe('layer- local/inline vs remote content/src tests', () => {
+test.describe('map-layer local/inline vs remote content/src tests', () => {
   let page;
   let context;
   test.beforeAll(async function () {
@@ -8,10 +8,10 @@ test.describe('layer- local/inline vs remote content/src tests', () => {
     page =
       context.pages().find((page) => page.url() === 'about:blank') ||
       (await context.newPage());
-    await page.goto('layer-.html');
+    await page.goto('map-layer.html');
     await page.waitForTimeout(1000);
   });
-  test('Test that a layer- with src attribute can transition to inline content', async () => {
+  test('Test that a map-layer with src attribute can transition to inline content', async () => {
     const viewer = await page.getByTestId('viewer');
     const layer = await page.getByTestId('test-layer');
     const labelAttribute = await layer.evaluate((l) => l.getAttribute('label'));
@@ -70,7 +70,7 @@ test.describe('layer- local/inline vs remote content/src tests', () => {
       (layer) => (layer.label = 'You can set the label of a local layer')
     );
   });
-  test('Test that a layer- with inline content can transition to remote (src-based) content', async () => {
+  test('Test that a map-layer with inline content can transition to remote (src-based) content', async () => {
     const viewer = await page.getByTestId('viewer');
     const layer = await page.getByTestId('test-layer');
     let label = await layer.evaluate((l) => l.label);
diff --git a/test/e2e/elements/layer-/layer-.html b/test/e2e/elements/map-layer/map-layer.html
similarity index 88%
rename from test/e2e/elements/layer-/layer-.html
rename to test/e2e/elements/map-layer/map-layer.html
index c431f6e11..c502f6115 100644
--- a/test/e2e/elements/layer-/layer-.html
+++ b/test/e2e/elements/map-layer/map-layer.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>&lt;layer-&gt; test</title>
+    <title>&lt;map-layer&gt; test</title>
     <meta charset="UTF-8">
     <script type="module" src="mapml.js"></script>
     <style>
@@ -30,7 +30,7 @@
   </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="test-layer" label="Remote content" src="dummy-cbmtile-cbmt.mapml" checked></layer->
+      <map-layer data-testid="test-layer" label="Remote content" src="dummy-cbmtile-cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/map-link/map-link-api.html b/test/e2e/elements/map-link/map-link-api.html
index addce59c5..a33c6599b 100644
--- a/test/e2e/elements/map-link/map-link-api.html
+++ b/test/e2e/elements/map-link/map-link-api.html
@@ -19,7 +19,7 @@
       }
     </style>
     <template>
-      <layer- data-testid="inline-tiles" label="inline content" >
+      <map-layer data-testid="inline-tiles" label="inline content" >
         <map-title>OpenStreetMap image tiles</map-title>
         <map-link rel="license" href="https://www.openstreetmap.org/copyright" title="© OpenStreetMap contributors CC BY-SA"></map-link>  
         <map-extent id="extent-via-map-input" units="OSMTILE" checked="checked" hidden="hidden">
@@ -36,8 +36,8 @@
           <map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
           <map-link rel="tile" tref="tiles/osmtile/{z}/{x}/{y}.png"></map-link>
         </map-extent>
-      </layer->
-      <layer- data-testid="inline-image" label="inline content" checked>
+      </map-layer>
+      <map-layer data-testid="inline-image" label="inline content" checked>
         <map-title>Non-queryable inline WMS image Layer</map-title>
         <!-- the extent below should have the same extent property as the extent in the inline-image-queryable layer -->
         <!-- the bounds of the extent are established via native map-input variables -->
@@ -59,14 +59,14 @@
 
         </map-extent>
         
-      </layer->
+      </map-layer>
     </template>    
   </head>
   <body>
     <mapml-viewer data-testid="viewer" style="height: 500px;width:500px;" controls zoom="1" lat="0" lon="0" >
-      <layer- data-testid="initially-empty" label='Initally empty' checked>
+      <map-layer data-testid="initially-empty" label='Initally empty' checked>
         <map-meta name='projection' content='OSMTILE'></map-meta>
-      </layer->
+      </map-layer>
     </mapml-viewer>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/map-link/map-link-in-shadow-root.html b/test/e2e/elements/map-link/map-link-in-shadow-root.html
index bc5d0e208..c80ddeee7 100644
--- a/test/e2e/elements/map-link/map-link-in-shadow-root.html
+++ b/test/e2e/elements/map-link/map-link-in-shadow-root.html
@@ -36,7 +36,7 @@
     <host-element>
       <template shadowrootmode="open">
         <mapml-viewer data-testid="viewer" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-          <layer- data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></layer->
+          <map-layer data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></map-layer>
         </mapml-viewer>
       </template>
     </host-element>
diff --git a/test/e2e/elements/map-link/map-link.html b/test/e2e/elements/map-link/map-link.html
index 77396682a..1a0fecc5b 100644
--- a/test/e2e/elements/map-link/map-link.html
+++ b/test/e2e/elements/map-link/map-link.html
@@ -21,7 +21,7 @@
   </head>
   <body>
     <mapml-viewer data-testid="viewer" style="height: 500px;width:500px;" controls zoom="1" lat="0" lon="0" >
-      <layer- data-testid="inline-tiles" label="inline content" >
+      <map-layer data-testid="inline-tiles" label="inline content" >
         <map-title>OpenStreetMap image tiles</map-title>
         <map-link rel="license" href="https://www.openstreetmap.org/copyright" title="© OpenStreetMap contributors CC BY-SA"></map-link>  
         <map-extent units="OSMTILE" checked="checked" hidden="hidden">
@@ -30,8 +30,8 @@
           <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="8"></map-input>
           <map-link rel="tile" tref="tiles/osmtile/{z}/{x}/{y}.png"></map-link>
         </map-extent>
-      </layer->
-      <layer- data-testid="inline-image" label="inline content" checked>
+      </map-layer>
+      <map-layer data-testid="inline-image" label="inline content" checked>
         <map-title>Non-queryable inline WMS image Layer</map-title>
         <!-- the extent below should have the same extent property as the extent in the inline-image-queryable layer -->
         <!-- the bounds of the extent are established via native map-input variables -->
@@ -99,8 +99,8 @@
           and the zoom bounds of the projection -->
           <map-link data-testid="inline-link3" rel="image" tref="images/toporama_en.jpg?service=WMS&version=1.3.0&request=GetMap&bbox={xmin3},{ymin3},{xmax3},{ymax3}&width={w3}&height={h3}&layers=FBP_FuelLayer_wBurnScars&CRS=EPSG:3857&format=image/png&transparent=true"></map-link>
         </map-extent>
-      </layer->
-      <layer- data-testid="inline-image-queryable" label="inline queryable content" checked>
+      </map-layer>
+      <map-layer data-testid="inline-image-queryable" label="inline queryable content" checked>
         <!-- this is a separate layer in order to test that the layer becomes
              disabled according to bounds and zoom bounds. This was not always 
              the case, but it is now, and it's got a test. -->
@@ -123,11 +123,11 @@
           <map-link rel="image" tref="images/toporama_en.jpg?service=WMS&version=1.3.0&request=GetMap&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&layers=FBP_FuelLayer_wBurnScars&CRS=EPSG:3857&format=image/png&transparent=true"></map-link>
           <map-link rel="query" tref="images/toporama_en.jpg?service=WMS&version=1.3.0&request=GetFeatureInfo&i={i}&j={j}&query_layers=FBP_FuelLayer_wBurnScars&layers=FBP_FuelLayer_wBurnScars&info_format=text/html&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&CRS=EPSG:3857"></map-link>
         </map-extent>
-      </layer->
+      </map-layer>
 <!--          <map-link rel="feature"></map-link>
           <map-link rel="query"></map-link>-->
-      <layer- data-testid="remote-image" label="remote non-queryable content" src="remote-non-queryable-layer-map-link.mapml" checked></layer->
-      <layer- data-testid="remote-image-queryable" label="remote queryable content" src="remote-queryable-layer-map-link.mapml" checked></layer->
+      <map-layer data-testid="remote-image" label="remote non-queryable content" src="remote-non-queryable-layer-map-link.mapml" checked></map-layer>
+      <map-layer data-testid="remote-image-queryable" label="remote queryable content" src="remote-queryable-layer-map-link.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.html b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.html
index 9377e1e73..d450be1d8 100644
--- a/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.html
+++ b/test/e2e/elements/map-link/pmtiles/map-link-pmtiles-styles.html
@@ -8,8 +8,8 @@
   </head>
   <body>
     <mapml-viewer data-testid="viewer" controls style="width: 500px;height: 500px;"  projection="OSMTILE" zoom="10" lat="44.5" lon="-103.8">
-      <layer- data-testid="dark" src="dark.mapml" ></layer->
-      <layer- data-testid="local-layer">
+      <map-layer data-testid="dark" src="dark.mapml" ></map-layer>
+      <map-layer data-testid="local-layer">
         <map-link data-testid="local-operative-light" rel="stylesheet" type="application/pmtiles+stylesheet" href="lightTheme.js"></map-link>
 
         <!-- only the first stylesheet within scope in document order is used... -->
@@ -29,7 +29,7 @@
           <map-link rel="tile" type="application/pmtiles" tref="../spearfish.pmtiles?theme=dark"></map-link>
 
         </map-extent>
-      </layer->
+      </map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/elements/map-style/map-style.html b/test/e2e/elements/map-style/map-style.html
index 3717add14..aeb2dc100 100644
--- a/test/e2e/elements/map-style/map-style.html
+++ b/test/e2e/elements/map-style/map-style.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; 
        } 
@@ -49,7 +49,7 @@
        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> 
@@ -57,7 +57,7 @@
        <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; 
          } 
          
@@ -74,7 +74,7 @@
   <body>
     
     <mapml-viewer projection="OSMTILE" zoom="3" lat="45.406314" lon="-75.6883335" controls>
-      <layer- label="Layer" checked="">
+      <map-layer label="Layer" checked="">
         <map-meta name="extent" content="top-left-longitude=-108.18295690328578, top-left-latitude=50.014258109371525, bottom-right-longitude=-80.36884559227745,bottom-right-latitude=56.408480743634385"></map-meta>
         <map-meta name="projection" content="OSMTILE"></map-meta>
         <map-meta name="cs" content="gcrs"></map-meta>
@@ -82,7 +82,7 @@
         <map-style>.poly {stroke: black; fill:black}</map-style>
 		<!-----------------------  Element being tested ----------------------->
         <map-feature class="poly"><map-featurecaption>Layer</map-featurecaption><map-geometry><map-polygon><map-coordinates>-100.50664854831412 56.0571475247103 -108.18295690328578 55.57677707477441 -106.44464507203479 51.99763924555603 -91.90173251505614 50.014258109371525 -80.36884559227745 50.0637759718567 -92.5284724652151 56.408480743634385 -100.50664854831412 56.0571475247103 </map-coordinates></map-polygon></map-geometry><map-properties>Styled Polygon</map-properties></map-feature>
-      </layer->
+      </map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/elements/map/map-in-shadow-root.html b/test/e2e/elements/map/map-in-shadow-root.html
index 82295ed1f..555e50d19 100644
--- a/test/e2e/elements/map/map-in-shadow-root.html
+++ b/test/e2e/elements/map/map-in-shadow-root.html
@@ -33,15 +33,15 @@
     <host-element>
       <template shadowrootmode="open">
         <map is="web-map" data-testid="map1" id="map1" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-          <layer- data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></layer->
+          <map-layer data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></map-layer>
         </map>
         <map is="web-map" data-testid="map2" id="map2" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-          <layer- data-testid="test-layer2" label="Remote content" src="data/cbmt.mapml" checked></layer->
+          <map-layer data-testid="test-layer2" label="Remote content" src="data/cbmt.mapml" checked></map-layer>
         </map>
       </template>
     </host-element>
     <map is="web-map" data-testid="map3" id="map3" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-      <layer- data-testid="test-layer3" label="Remote content" src="data/cbmt.mapml" checked></layer->
+      <map-layer data-testid="test-layer3" label="Remote content" src="data/cbmt.mapml" checked></map-layer>
     </map>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/mapml-viewer/mapml-viewer-in-shadow-root.html b/test/e2e/elements/mapml-viewer/mapml-viewer-in-shadow-root.html
index 380c9bda8..666cbc67d 100644
--- a/test/e2e/elements/mapml-viewer/mapml-viewer-in-shadow-root.html
+++ b/test/e2e/elements/mapml-viewer/mapml-viewer-in-shadow-root.html
@@ -46,15 +46,15 @@
     <host-element>
       <template shadowrootmode="open">
         <mapml-viewer data-testid="map1" id="map1" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-          <layer- data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></layer->
+          <map-layer data-testid="test-layer" label="Remote content" src="data/cbmt.mapml" checked></map-layer>
         </mapml-viewer>
         <mapml-viewer data-testid="map2" id="map2" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-          <layer- data-testid="test-layer2" label="Remote content" src="data/cbmt.mapml" checked></layer->
+          <map-layer data-testid="test-layer2" label="Remote content" src="data/cbmt.mapml" checked></map-layer>
         </mapml-viewer>
       </template>
     </host-element>
     <mapml-viewer data-testid="map3" id="map3" style="height: 500px;width:500px;"  zoom="2" lat="63" lon="-87" controls projection="CBMTILE">
-      <layer- data-testid="test-layer3" label="Remote content" src="data/cbmt.mapml" checked></layer->
+      <map-layer data-testid="test-layer3" label="Remote content" src="data/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.html b/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.html
index 6acd13f5f..cc35060ff 100644
--- a/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.html
+++ b/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.html
@@ -23,7 +23,7 @@
 
 <body>
   <mapml-viewer data-testid="testviewer" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- data-testid="testlayer" label="CBMT - INLINE" checked>
+    <map-layer data-testid="testlayer" label="CBMT - INLINE" checked>
       <map-meta name="zoom" content="min=0,max=25"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
@@ -31,7 +31,7 @@
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/features/mapFeature.html b/test/e2e/features/mapFeature.html
index 464f8fd22..a21fb56df 100644
--- a/test/e2e/features/mapFeature.html
+++ b/test/e2e/features/mapFeature.html
@@ -19,7 +19,7 @@
   <body>
   <mapml-viewer data-testid="viewer" zoom="10" lon="-75.7" lat="45.4" controls="">
 
-    <layer- label="Polygon" checked>
+    <map-layer label="Polygon" checked>
       <map-meta name="projection" content="OSMTILE"></map-meta>
       <map-meta name="zoom" content="min=10,max=11"></map-meta>
       <map-feature>
@@ -34,11 +34,11 @@
         </map-geometry>
         <map-properties></map-properties>
       </map-feature>
-    </layer->
+    </map-layer>
 
 
 
-    <layer- data-testid="points" label="Points" checked>
+    <map-layer data-testid="points" label="Points" checked>
       <map-meta name="projection" content="OSMTILE"></map-meta>
       <map-meta name="zoom" content="min=14,max=24"></map-meta>
       <map-feature>
@@ -73,7 +73,7 @@
         </map-geometry>
         <map-properties><h2>Point 3</h2></map-properties>
       </map-feature>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/geojson/geojson2mapml.html b/test/e2e/geojson/geojson2mapml.html
index 7dde4636f..a9d389be9 100644
--- a/test/e2e/geojson/geojson2mapml.html
+++ b/test/e2e/geojson/geojson2mapml.html
@@ -16,17 +16,17 @@
 
     <!-- The expected results for geojson2mapml go here-->
     <template id="expected">
-      <layer- label="Point Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.6916809, top-left-latitude=45.4186964, bottom-right-longitude=-75.6916809,bottom-right-latitude=45.4186964"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Point Geometry</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Point</td></tr></tbody></table></map-properties></map-feature></layer->
-      <layer- label="Line Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.8516693, top-left-latitude=45.3714435, bottom-right-longitude=-75.6168365,bottom-right-latitude=45.471929"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Line Geometry</map-featurecaption><map-geometry><map-linestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 -75.7236099 45.4208652 -75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-linestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Line</td></tr></tbody></table></map-properties></map-feature></layer->
-      <layer- label="Polygon Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.7792282, top-left-latitude=45.3294614, bottom-right-longitude=-75.5673981,bottom-right-latitude=45.465669"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Polygon Geometry</map-featurecaption><map-geometry><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates><map-coordinates>-75.6596588 45.4211062 -75.6338958 45.4254436 -75.6277127 45.4066458 -75.6572542 45.4097792 -75.6596588 45.4211062 </map-coordinates></map-polygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Polygon</td></tr></tbody></table></map-properties></map-feature></layer->
-      <layer- label="MultiPoint Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.7833481, top-left-latitude=45.384225, bottom-right-longitude=-75.7016373,bottom-right-latitude=45.4391764"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>MultiPoint Geometry</map-featurecaption><map-geometry><map-multipoint><map-coordinates>-75.7016373 45.4391764 -75.7236099 45.4208652 -75.7833481 45.384225 </map-coordinates></map-multipoint></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a multipoint</td></tr></tbody></table></map-properties></map-feature></layer->
-      <layer- label="MultiLineString Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26965"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>MultiLineString Geometry</map-featurecaption><map-geometry><map-multilinestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 </map-coordinates><map-coordinates>-75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-multilinestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiLineString</td></tr></tbody></table></map-properties></map-feature></layer->
-      <layer- label="MultiPolygon Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.7943133, top-left-latitude=45.3294614, bottom-right-longitude=-75.5673981,bottom-right-latitude=45.472892"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>MultiPolygon Geometry</map-featurecaption><map-geometry><map-multipolygon><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon><map-polygon><map-coordinates>-75.6744295 45.472892 -75.7053451 45.4439942 -75.7063756 45.4249616 -75.7489704 45.4177324 -75.7788555 45.4003785 -75.7943133 45.4321899 -75.6744295 45.472892 </map-coordinates></map-polygon></map-multipolygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiPolygon</td></tr></tbody></table></map-properties></map-feature></layer->
-      <layer- label="Geometry Collection" checked><map-meta name="extent" content="top-left-longitude=-75.8516693, top-left-latitude=45.3294614, bottom-right-longitude=-75.5673981,bottom-right-latitude=45.471929"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Geometry Collection</map-featurecaption><map-geometry><map-geometrycollection><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon><map-linestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 -75.7236099 45.4208652 -75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-linestring><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometrycollection></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Geometry Collection</td></tr></tbody></table></map-properties></map-feature></layer->
-      <layer- label="Test MapML" checked><map-meta name="extent" content="top-left-longitude=-75.8516693, top-left-latitude=45.3294614, bottom-right-longitude=-75.5673981,bottom-right-latitude=45.472892"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">id</th><td itemprop="id">24e21a60be4811d892e2080020a0f4c9</td></tr><tr><th scope="row">label_fr</th><td itemprop="label_fr">Québec</td></tr><tr><th scope="row">label_en</th><td itemprop="label_en">Québec</td></tr><tr><th scope="row">label_ab</th><td itemprop="label_ab">Québec</td></tr><tr><th scope="row">type_fr</th><td itemprop="type_fr">CITY-Ville</td></tr><tr><th scope="row">type_en</th><td itemprop="type_en">CITY-City</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-linestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 -75.7236099 45.4208652 -75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-linestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Line</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Point</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-multipoint><map-coordinates>-75.7016373 45.4391764 -75.7236099 45.4208652 -75.7833481 45.384225 </map-coordinates></map-multipoint></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a multipoint</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-multilinestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 </map-coordinates><map-coordinates>-75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-multilinestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiLineString</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-multipolygon><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon><map-polygon><map-coordinates>-75.6744295 45.472892 -75.7053451 45.4439942 -75.7063756 45.4249616 -75.7489704 45.4177324 -75.7788555 45.4003785 -75.7943133 45.4321899 -75.6744295 45.472892 </map-coordinates><map-coordinates>-75.6744295 45.472892 -75.7053451 45.4439942 -75.7063756 45.4249616 -75.7489704 45.4177324 -75.7788555 45.4003785 -75.7943133 45.4321899 -75.6744295 45.472892 </map-coordinates></map-polygon></map-multipolygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiPolygon</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates><map-coordinates>-75.6467062 45.4215881 -75.6889363 45.4049585 -75.6693647 45.3767494 -75.627064 45.3924229 -75.6467062 45.4215881 </map-coordinates></map-polygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Polygon with holes</td></tr></tbody></table></map-properties></map-feature></layer->
-      <layer- label="Point" checked><map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>This is a Point</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><h1>String Properties test</h1></map-properties></map-feature></layer->
-      <layer- label="Point 1" checked><map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>caption test</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><h1>This is a Point - with a featurecaption function</h1></map-properties></map-feature></layer->
-      <layer- label="Milk River" checked disabled><map-meta name="extent" content="top-left-longitude=-112.0866667, top-left-latitude=49.15, bottom-right-longitude=-112.0866667,bottom-right-latitude=49.15"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Milk River</map-featurecaption><map-geometry><map-multipoint><map-coordinates>-112.0866667 49.15 </map-coordinates></map-multipoint></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">id</th><td itemprop="id">7d615dd1d05511d892e2080020a0f4c9</td></tr><tr><th scope="row">label_fr</th><td itemprop="label_fr">Milk River</td></tr><tr><th scope="row">label_en</th><td itemprop="label_en">Milk River</td></tr><tr><th scope="row">label_ab</th><td itemprop="label_ab">Milk River</td></tr><tr><th scope="row">type_fr</th><td itemprop="type_fr">TOWN-Ville</td></tr><tr><th scope="row">type_en</th><td itemprop="type_en">TOWN-Town</td></tr></tbody></table></map-properties></map-feature></layer->
+      <map-layer label="Point Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.6916809, top-left-latitude=45.4186964, bottom-right-longitude=-75.6916809,bottom-right-latitude=45.4186964"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Point Geometry</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Point</td></tr></tbody></table></map-properties></map-feature></map-layer>
+      <map-layer label="Line Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.8516693, top-left-latitude=45.3714435, bottom-right-longitude=-75.6168365,bottom-right-latitude=45.471929"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Line Geometry</map-featurecaption><map-geometry><map-linestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 -75.7236099 45.4208652 -75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-linestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Line</td></tr></tbody></table></map-properties></map-feature></map-layer>
+      <map-layer label="Polygon Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.7792282, top-left-latitude=45.3294614, bottom-right-longitude=-75.5673981,bottom-right-latitude=45.465669"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Polygon Geometry</map-featurecaption><map-geometry><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates><map-coordinates>-75.6596588 45.4211062 -75.6338958 45.4254436 -75.6277127 45.4066458 -75.6572542 45.4097792 -75.6596588 45.4211062 </map-coordinates></map-polygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Polygon</td></tr></tbody></table></map-properties></map-feature></map-layer>
+      <map-layer label="MultiPoint Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.7833481, top-left-latitude=45.384225, bottom-right-longitude=-75.7016373,bottom-right-latitude=45.4391764"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>MultiPoint Geometry</map-featurecaption><map-geometry><map-multipoint><map-coordinates>-75.7016373 45.4391764 -75.7236099 45.4208652 -75.7833481 45.384225 </map-coordinates></map-multipoint></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a multipoint</td></tr></tbody></table></map-properties></map-feature></map-layer>
+      <map-layer label="MultiLineString Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26965"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>MultiLineString Geometry</map-featurecaption><map-geometry><map-multilinestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 </map-coordinates><map-coordinates>-75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-multilinestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiLineString</td></tr></tbody></table></map-properties></map-feature></map-layer>
+      <map-layer label="MultiPolygon Geometry" checked><map-meta name="extent" content="top-left-longitude=-75.7943133, top-left-latitude=45.3294614, bottom-right-longitude=-75.5673981,bottom-right-latitude=45.472892"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>MultiPolygon Geometry</map-featurecaption><map-geometry><map-multipolygon><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon><map-polygon><map-coordinates>-75.6744295 45.472892 -75.7053451 45.4439942 -75.7063756 45.4249616 -75.7489704 45.4177324 -75.7788555 45.4003785 -75.7943133 45.4321899 -75.6744295 45.472892 </map-coordinates></map-polygon></map-multipolygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiPolygon</td></tr></tbody></table></map-properties></map-feature></map-layer>
+      <map-layer label="Geometry Collection" checked><map-meta name="extent" content="top-left-longitude=-75.8516693, top-left-latitude=45.3294614, bottom-right-longitude=-75.5673981,bottom-right-latitude=45.471929"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Geometry Collection</map-featurecaption><map-geometry><map-geometrycollection><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon><map-linestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 -75.7236099 45.4208652 -75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-linestring><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometrycollection></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Geometry Collection</td></tr></tbody></table></map-properties></map-feature></map-layer>
+      <map-layer label="Test MapML" checked><map-meta name="extent" content="top-left-longitude=-75.8516693, top-left-latitude=45.3294614, bottom-right-longitude=-75.5673981,bottom-right-latitude=45.472892"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">id</th><td itemprop="id">24e21a60be4811d892e2080020a0f4c9</td></tr><tr><th scope="row">label_fr</th><td itemprop="label_fr">Québec</td></tr><tr><th scope="row">label_en</th><td itemprop="label_en">Québec</td></tr><tr><th scope="row">label_ab</th><td itemprop="label_ab">Québec</td></tr><tr><th scope="row">type_fr</th><td itemprop="type_fr">CITY-Ville</td></tr><tr><th scope="row">type_en</th><td itemprop="type_en">CITY-City</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-linestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 -75.7236099 45.4208652 -75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-linestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Line</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Point</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-multipoint><map-coordinates>-75.7016373 45.4391764 -75.7236099 45.4208652 -75.7833481 45.384225 </map-coordinates></map-multipoint></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a multipoint</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-multilinestring><map-coordinates>-75.6168365 45.471929 -75.6855011 45.458445 -75.7016373 45.4391764 -75.7030106 45.4259255 </map-coordinates><map-coordinates>-75.7565689 45.4117074 -75.7833481 45.384225 -75.8197403 45.3714435 -75.8516693 45.377714 </map-coordinates></map-multilinestring></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiLineString</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-multipolygon><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates></map-polygon><map-polygon><map-coordinates>-75.6744295 45.472892 -75.7053451 45.4439942 -75.7063756 45.4249616 -75.7489704 45.4177324 -75.7788555 45.4003785 -75.7943133 45.4321899 -75.6744295 45.472892 </map-coordinates><map-coordinates>-75.6744295 45.472892 -75.7053451 45.4439942 -75.7063756 45.4249616 -75.7489704 45.4177324 -75.7788555 45.4003785 -75.7943133 45.4321899 -75.6744295 45.472892 </map-coordinates></map-polygon></map-multipolygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a MultiPolygon</td></tr></tbody></table></map-properties></map-feature><map-feature><map-featurecaption>Test MapML</map-featurecaption><map-geometry><map-polygon><map-coordinates>-75.5859375 45.465669 -75.6813812 45.4533876 -75.6961441 45.4239978 -75.7249832 45.4083331 -75.7792282 45.3772317 -75.753479 45.3294614 -75.5831909 45.3815724 -75.602417 45.4273712 -75.5673981 45.4639834 -75.5859375 45.465669 </map-coordinates><map-coordinates>-75.6467062 45.4215881 -75.6889363 45.4049585 -75.6693647 45.3767494 -75.627064 45.3924229 -75.6467062 45.4215881 </map-coordinates></map-polygon></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">prop0</th><td itemprop="prop0">This is a Polygon with holes</td></tr></tbody></table></map-properties></map-feature></map-layer>
+      <map-layer label="Point" checked><map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>This is a Point</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><h1>String Properties test</h1></map-properties></map-feature></map-layer>
+      <map-layer label="Point 1" checked><map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>caption test</map-featurecaption><map-geometry><map-point><map-coordinates>-75.6916809 45.4186964</map-coordinates></map-point></map-geometry><map-properties><h1>This is a Point - with a featurecaption function</h1></map-properties></map-feature></map-layer>
+      <map-layer label="Milk River" checked disabled><map-meta name="extent" content="top-left-longitude=-112.0866667, top-left-latitude=49.15, bottom-right-longitude=-112.0866667,bottom-right-latitude=49.15"></map-meta><map-meta name="projection" content="OSMTILE"></map-meta><map-meta name="cs" content="gcrs"></map-meta><map-feature><map-featurecaption>Milk River</map-featurecaption><map-geometry><map-multipoint><map-coordinates>-112.0866667 49.15 </map-coordinates></map-multipoint></map-geometry><map-properties><table><thead><tr><th role="columnheader" scope="col">Property name</th><th role="columnheader" scope="col">Property value</th></tr></thead><tbody><tr><th scope="row">id</th><td itemprop="id">7d615dd1d05511d892e2080020a0f4c9</td></tr><tr><th scope="row">label_fr</th><td itemprop="label_fr">Milk River</td></tr><tr><th scope="row">label_en</th><td itemprop="label_en">Milk River</td></tr><tr><th scope="row">label_ab</th><td itemprop="label_ab">Milk River</td></tr><tr><th scope="row">type_fr</th><td itemprop="type_fr">TOWN-Ville</td></tr><tr><th scope="row">type_en</th><td itemprop="type_en">TOWN-Town</td></tr></tbody></table></map-properties></map-feature></map-layer>
     </template>
 
       <script>
diff --git a/test/e2e/geojson/geojson2mapml.test.js b/test/e2e/geojson/geojson2mapml.test.js
index e95f9519b..6bf208009 100644
--- a/test/e2e/geojson/geojson2mapml.test.js
+++ b/test/e2e/geojson/geojson2mapml.test.js
@@ -18,143 +18,145 @@ test.describe('GeoJSON API - geojson2mapml', () => {
 
   test('Point Geometry (string json)', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[0].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(1)').outerHTML
+        (node) => node.content.querySelector('map-layer:nth-child(1)').outerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('Line Geometry', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[1].innerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(2)').innerHTML
+        (node) => node.content.querySelector('map-layer:nth-child(2)').innerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('Polygon Geometry', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[2].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(3)').outerHTML
+        (node) => node.content.querySelector('map-layer:nth-child(3)').outerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('MultiPoint Geometry', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[3].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(4)').outerHTML
+        (node) => node.content.querySelector('map-layer:nth-child(4)').outerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('MultiLineString Geometry', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[4].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(5)').outerHTML
+        (node) => node.content.querySelector('map-layer:nth-child(5)').outerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('MultiPolygon Geometry', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[5].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(6)').outerHTML
+        (node) => node.content.querySelector('map-layer:nth-child(6)').outerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('Geometry Collection', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[6].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(7)').outerHTML
+        (node) => node.content.querySelector('map-layer:nth-child(7)').outerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('Feature Collection', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[7].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(8)').outerHTML
+        (node) => node.content.querySelector('map-layer:nth-child(8)').outerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('BBOX, Options label, caption + properties string', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[8].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(9)').outerHTML
+        (node) => node.content.querySelector('map-layer:nth-child(9)').outerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('BBOX, Options label, caption + properties function', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[9].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(10)').outerHTML
+        (node) =>
+          node.content.querySelector('map-layer:nth-child(10)').outerHTML
       );
     expect(out).toEqual(exp);
   });
 
   test('Feature', async () => {
     const out = await page.$$eval(
-      '#output > layer-',
+      '#output > map-layer',
       (node) => node[10].outerHTML
     );
     const exp = await page
       .locator('#expected')
       .evaluate(
-        (node) => node.content.querySelector('layer-:nth-child(11)').outerHTML
+        (node) =>
+          node.content.querySelector('map-layer:nth-child(11)').outerHTML
       );
     expect(out).toEqual(exp);
   });
diff --git a/test/e2e/geojson/mapml2geojson.html b/test/e2e/geojson/mapml2geojson.html
index 5347cf7c0..7f8b6230d 100644
--- a/test/e2e/geojson/mapml2geojson.html
+++ b/test/e2e/geojson/mapml2geojson.html
@@ -13,7 +13,7 @@
   <!--All the mapml layers- that will be converted to geojson go in the mapml-viewer-->
     <mapml-viewer projection="OSMTILE" zoom="10" lon="-75.7" lat="45.4" controls>
         
-      <layer- data-testid="point" label="Point Geometry" checked>
+      <map-layer data-testid="point" label="Point Geometry" checked>
           <map-feature>
             <map-featurecaption>Point</map-featurecaption>
             <map-geometry>
@@ -23,9 +23,9 @@
             </map-geometry>
             <map-properties><h2>This is a Point</h2></map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
-        <layer- label="Line Geometry" checked>
+        <map-layer label="Line Geometry" checked>
           <map-feature>
             <map-featurecaption>Line</map-featurecaption>
             <map-geometry>
@@ -35,9 +35,9 @@
             </map-geometry>
             <map-properties><h2>This is a Line</h2></map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
-        <layer- label="Polygon Geometry" checked>
+        <map-layer label="Polygon Geometry" checked>
           <map-feature>
             <map-featurecaption>Polygon</map-featurecaption>
             <map-geometry>
@@ -48,9 +48,9 @@
             </map-geometry>
             <map-properties><h2>This is a Polygon</h2></map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
-        <layer- label="MultiPoint Geometry" checked>
+        <map-layer label="MultiPoint Geometry" checked>
           <map-feature>
             <map-featurecaption>MultiPoint</map-featurecaption>
             <map-geometry>
@@ -60,9 +60,9 @@
             </map-geometry>
             <map-properties><h2>This is a multipoint</h2></map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
-        <layer- label="MultiLineString Geometry" checked>
+        <map-layer label="MultiLineString Geometry" checked>
           <map-feature>
             <map-featurecaption>MultiLineString</map-featurecaption>
             <map-geometry>
@@ -73,9 +73,9 @@
             </map-geometry>
             <map-properties><h2>This is a MultiLineString</h2></map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
-        <layer- label="MultiPolygon Geometry" checked>
+        <map-layer label="MultiPolygon Geometry" checked>
           <map-feature>
             <map-featurecaption>MultiPolygon</map-featurecaption>
             <map-geometry>
@@ -90,14 +90,14 @@
             </map-geometry>
             <map-properties><h2>This is a MultiPolygon</h2></map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
 
 
 
 
 
-        <layer- label="Test MapML" checked>
+        <map-layer label="Test MapML" checked>
           <map-feature>
             <map-featurecaption>Polygon</map-featurecaption>
             <map-geometry>
@@ -175,9 +175,9 @@
             </map-geometry>
             <map-properties><h2>This is a Polygon with holes</h2></map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
-        <layer- label="Geometry Collection" checked>
+        <map-layer label="Geometry Collection" checked>
            <map-feature>
               <map-featurecaption></map-featurecaption>
               <map-geometry>
@@ -210,9 +210,9 @@
                 </table>
               </map-properties>
            </map-feature>
-        </layer->
+        </map-layer>
 
-        <layer- label="Point Geometry" checked>
+        <map-layer label="Point Geometry" checked>
           <map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta>
           <map-feature>
             <map-featurecaption>Point</map-featurecaption>
@@ -225,9 +225,9 @@
               <h2>This is <div>bolded and emphasized</div>.</h2>
             </map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
-        <layer- label="Point Geometry" checked>
+        <map-layer label="Point Geometry" checked>
           <map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta>
           <map-feature>
             <map-featurecaption>Point</map-featurecaption>
@@ -253,9 +253,9 @@ <h2>This is <div>bolded and emphasized</div>.</h2>
               </table>
             </map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
-        <layer- label="map-a geometry" checked>
+        <map-layer label="map-a geometry" checked>
             <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
           <map-feature zoom="2" class="refDiff">
             <map-properties><h1>Test</h1></map-properties>
@@ -301,7 +301,7 @@ <h2>This is <div>bolded and emphasized</div>.</h2>
             </map-geometry>
             <map-properties><h2>This is a Geometry Collection</h2></map-properties>
           </map-feature>
-        </layer->
+        </map-layer>
 
       </mapml-viewer>
 
@@ -361,35 +361,35 @@ <h2>This is <div>bolded and emphasized</div>.</h2>
 
             let json;
 
-            json = document.querySelectorAll("layer-")[0].mapml2geojson();
+            json = document.querySelectorAll("map-layer")[0].mapml2geojson();
             json = JSON.stringify(json);
             document.getElementById('json0').innerHTML = json;
 
-            json = document.querySelectorAll("layer-")[1].mapml2geojson();
+            json = document.querySelectorAll("map-layer")[1].mapml2geojson();
             json = JSON.stringify(json);
             document.getElementById('json1').innerHTML = json;
 
-            json = document.querySelectorAll("layer-")[2].mapml2geojson();
+            json = document.querySelectorAll("map-layer")[2].mapml2geojson();
             json = JSON.stringify(json);
             document.getElementById('json2').innerHTML = json;
             
-            json = document.querySelectorAll("layer-")[3].mapml2geojson();
+            json = document.querySelectorAll("map-layer")[3].mapml2geojson();
             json = JSON.stringify(json);
             document.getElementById('json3').innerHTML = json;
 
-            json = document.querySelectorAll("layer-")[4].mapml2geojson();
+            json = document.querySelectorAll("map-layer")[4].mapml2geojson();
             json = JSON.stringify(json);
             document.getElementById('json4').innerHTML = json;
 
-            json = document.querySelectorAll("layer-")[5].mapml2geojson();
+            json = document.querySelectorAll("map-layer")[5].mapml2geojson();
             json = JSON.stringify(json);
             document.getElementById('json5').innerHTML = json;
 
-            json = document.querySelectorAll("layer-")[6].mapml2geojson();
+            json = document.querySelectorAll("map-layer")[6].mapml2geojson();
             json = JSON.stringify(json);
             document.getElementById('json6').innerHTML = json;
 
-            json = document.querySelectorAll("layer-")[7].mapml2geojson();
+            json = document.querySelectorAll("map-layer")[7].mapml2geojson();
             json = JSON.stringify(json);
             document.getElementById('json7').innerHTML = json;
 
@@ -399,15 +399,15 @@ <h2>This is <div>bolded and emphasized</div>.</h2>
               prop["name"] = p.querySelector("div").innerHTML;
               return prop;
             }
-            json = document.querySelectorAll("layer-")[8].mapml2geojson({propertyFunction: propF});
+            json = document.querySelectorAll("map-layer")[8].mapml2geojson({propertyFunction: propF});
             json = JSON.stringify(json);
             document.getElementById('json8').innerHTML = json;
 
-            json = document.querySelectorAll("layer-")[9].mapml2geojson({transform: false});
+            json = document.querySelectorAll("map-layer")[9].mapml2geojson({transform: false});
             json = JSON.stringify(json);
             document.getElementById('json9').innerHTML = json;
 
-            json = document.querySelectorAll("layer-")[10].mapml2geojson({transform: false});
+            json = document.querySelectorAll("map-layer")[10].mapml2geojson({transform: false});
             json = JSON.stringify(json);
             document.getElementById('json10').innerHTML = json;
         };
diff --git a/test/e2e/layers/CustomProjectionLayers.html b/test/e2e/layers/CustomProjectionLayers.html
index 393d83b1f..9dbf729df 100644
--- a/test/e2e/layers/CustomProjectionLayers.html
+++ b/test/e2e/layers/CustomProjectionLayers.html
@@ -25,7 +25,7 @@
 	</script>
 	
 	<mapml-viewer width="500" height="500" zoom="0" lat="51.437097" lon="0" controls="" role="application" projection="BNG">
-		<layer- label="OS Roads tile map in BNG custom projection" checked="">
+		<map-layer label="OS Roads tile map in BNG custom projection" checked="">
 		  <map-meta name="projection" content="BNG"></map-meta>
 		  <map-extent units="BNG" hidden="" checked="">
 			<map-input name="z" type="zoom" min="0" max="9" value="0"></map-input>
@@ -34,8 +34,8 @@
 			<map-link rel="tile" tref="https://api.os.uk/maps/raster/v1/wmts?key=TtPU7xWvj7AmV6uePZRYWFXuKVHzRTq7&amp;tileMatrixSet=EPSG:27700&amp;version=1.0.0&amp;style=default&amp;layer=Road_27700&amp;service=WMTS&amp;request=GetTile&amp;tileCol={x}&amp;tileRow={y}&amp;tileMatrix={z}">
 			</map-link>
 		  </map-extent>
-		</layer->
-		<layer- label="London" checked="">
+		</map-layer>
+		<map-layer label="London" checked="">
 		   <map-meta name="projection" content="BNG"></map-meta>
 		   <map-meta name="cs" content="gcrs"></map-meta>
 		   <map-feature zoom="2" id="LondonPoint">
@@ -47,7 +47,7 @@
 		      </map-geometry>
 		      <map-properties>London Point!</map-properties>
 		   </map-feature>
-		</layer->
+		</map-layer>
 	</mapml-viewer>
 </body>
 
diff --git a/test/e2e/layers/clientTemplatedTileLayer.html b/test/e2e/layers/clientTemplatedTileLayer.html
index aeda0521a..09af2c0fd 100644
--- a/test/e2e/layers/clientTemplatedTileLayer.html
+++ b/test/e2e/layers/clientTemplatedTileLayer.html
@@ -24,7 +24,7 @@
 <body>
   <mapml-viewer width="500" height="500" projection="WGS84" zoom="1" lat="59.87304909" lon="-53.22587225" controls>
 
-    <layer- label="Inline Templated Tile" checked>
+    <map-layer label="Inline Templated Tile" checked>
       <map-meta name="zoom" content="min=0,max=5"></map-meta>
       <map-extent units="WGS84" checked hidden>
         <map-input name="zoomLevel" type="zoom" min="1" max="1" value="0" ></map-input>
@@ -34,10 +34,10 @@
         <map-link rel='tile' type='text/mapml' title='Tiles for ne_10m_admin_0_countries (as MapML)' ></map-link>
 
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
   <script>
-    let layer = document.querySelector("body > mapml-viewer > layer- > map-extent > map-link");
+    let layer = document.querySelector("body > mapml-viewer > map-layer > map-extent > map-link");
     layer.addEventListener("tileloadstart", (e) => {
       let cust = document.createElement("P");
       cust.textContent = `${e.detail.x}${e.detail.y}${e.detail.zoom}`;
diff --git a/test/e2e/layers/featureLayer.html b/test/e2e/layers/featureLayer.html
index c72d77e37..0d9e1ab18 100644
--- a/test/e2e/layers/featureLayer.html
+++ b/test/e2e/layers/featureLayer.html
@@ -24,7 +24,7 @@
   <map style="height: 500px;width:500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
     controls>
 
-    <layer- label="Arizona" checked>
+    <map-layer label="Arizona" checked>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-meta name="zoom" content="min=2,max=5,value=0"></map-meta>
       <map-meta name="cs" content="gcrs"></map-meta>
@@ -124,17 +124,17 @@ <h1>Colorado</h1>
           </map-polygon>
         </map-geometry>
       </map-feature>
-    </layer->
-    <layer- label="Static MapML with tiles" checked>
+    </map-layer>
+    <map-layer label="Static MapML with tiles" checked>
       <map-meta name="zoom" content="min=0,max=10"></map-meta>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-link rel="license"
         href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285"
         title="Canada Base Map © Natural Resources Canada"></map-link>
       <map-tile zoom="0" row="3" col="3" src="data/cbmt/0/c3_r3.png"></map-tile>
-    </layer->
-    <layer- id="US" label="vector states" src="data/us_pop_density.mapml" checked></layer->
-    <layer- id="inline" label="Inline Feature" checked>
+    </map-layer>
+    <map-layer id="US" label="vector states" src="data/us_pop_density.mapml" checked></map-layer>
+    <map-layer id="inline" label="Inline Feature" checked>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-meta name="zoom" content="min=2,max=2"></map-meta>
       <map-feature zoom="2">
@@ -144,7 +144,7 @@ <h1>Colorado</h1>
           </map-polygon>
         </map-geometry>
       </map-feature>
-    </layer->
+    </map-layer>
   </map>
 
 </body>
diff --git a/test/e2e/layers/featureLayer.test.js b/test/e2e/layers/featureLayer.test.js
index 564ea2b96..b51851ef7 100644
--- a/test/e2e/layers/featureLayer.test.js
+++ b/test/e2e/layers/featureLayer.test.js
@@ -46,7 +46,7 @@ test.describe('Playwright featureLayer (Static Features) Layer Tests', () => {
     test('Loading in retrieved features', async () => {
       await page.waitForTimeout(350);
       const features = await page.$eval(
-        'layer-#US',
+        'map-layer#US',
         (layer) =>
           layer._layer._container.querySelector('svg').firstChild
             .childElementCount
@@ -81,7 +81,7 @@ test.describe('Playwright featureLayer (Static Features) Layer Tests', () => {
     test('valid <layer>.extent', async () => {
       // this is the us_pop_density.mapml layer
       const layerExtent = await page.$eval(
-        'body > map > layer-:nth-child(3)',
+        'body > map > map-layer:nth-child(3)',
         (layer) => layer.extent
       );
       expect(layerExtent.topLeft.pcrs).toEqual({
@@ -132,14 +132,14 @@ test.describe('Playwright featureLayer (Static Features) Layer Tests', () => {
     test('Feature without properties renders & is not interactable', async () => {
       await page.waitForTimeout(2000);
       const featureRendering = await page
-        .locator('layer-#inline > map-feature')
+        .locator('map-layer#inline > map-feature')
         .evaluate((f) => f._groupEl.firstChild.getAttribute('d'));
       await expect(featureRendering).toEqual(
         'M74 -173L330 -173L330 83L74 83L74 -173z'
       );
 
       const classList = await page
-        .locator('layer-#inline > map-feature')
+        .locator('map-layer#inline > map-feature')
         .evaluate((f) => f._groupEl.firstChild.getAttribute('class'));
       await expect(classList).toBeFalsy();
     });
diff --git a/test/e2e/layers/general/extentProperty.js b/test/e2e/layers/general/extentProperty.js
index 0a038da5e..b6a32c6a9 100644
--- a/test/e2e/layers/general/extentProperty.js
+++ b/test/e2e/layers/general/extentProperty.js
@@ -17,10 +17,10 @@ exports.test = (path, expectedPCRS, expectedGCRS) => {
       await page.waitForTimeout(250);
     });
 
-    test('<layer->.extent test', async () => {
+    test('<map-layer>.extent test', async () => {
       await page.waitForTimeout(200);
       const extent = await page.$eval(
-        'body > map > layer-:nth-child(1)',
+        'body > map > map-layer:nth-child(1)',
         (layer) => layer.extent
       );
       expect(extent.hasOwnProperty('zoom')).toBeTruthy();
@@ -32,9 +32,9 @@ exports.test = (path, expectedPCRS, expectedGCRS) => {
       expect(extent.topLeft.gcrs).toEqual(expectedGCRS.topLeft);
       expect(extent.bottomRight.gcrs).toEqual(expectedGCRS.bottomRight);
     });
-    test('2nd <layer->.extent test', async () => {
+    test('2nd <map-layer>.extent test', async () => {
       const extent = await page.$eval(
-        'body > map > layer-:nth-child(2)',
+        'body > map > map-layer:nth-child(2)',
         (layer) => layer.extent
       );
       expect(extent.hasOwnProperty('zoom')).toBeTruthy();
diff --git a/test/e2e/layers/layerControl.html b/test/e2e/layers/layerControl.html
index 5e7765e0c..41f2218d1 100644
--- a/test/e2e/layers/layerControl.html
+++ b/test/e2e/layers/layerControl.html
@@ -33,7 +33,7 @@
       /* border: none; */
     }
 
-    /* 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;
     }
@@ -42,7 +42,7 @@
        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>
@@ -50,7 +50,7 @@
     <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;
       }
     </style>
@@ -59,9 +59,9 @@
 
 <body>
   <mapml-viewer projection="CBMTILE" zoom="2" lat="61.2091250" lon="-90.8508370" controls>
-    <layer- hidden label="Canada Base Map - Transportation (CBMT)" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/"
+    <map-layer hidden label="Canada Base Map - Transportation (CBMT)" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/"
       checked>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/layers/layerControl.test.js b/test/e2e/layers/layerControl.test.js
index a4baf304d..0b2392feb 100644
--- a/test/e2e/layers/layerControl.test.js
+++ b/test/e2e/layers/layerControl.test.js
@@ -27,7 +27,7 @@ test.describe('Playwright layerControl Tests', () => {
     test('Control panel shown when layers are on map', async () => {
       const map = await page.locator('body > mapml-viewer');
       await map.evaluate((map) =>
-        map.querySelector('layer-').removeAttribute('hidden')
+        map.querySelector('map-layer').removeAttribute('hidden')
       );
       await page.waitForTimeout(1000);
       const controlsHidden = await page.$eval(
diff --git a/test/e2e/layers/layerOpacityAttribute.html b/test/e2e/layers/layerOpacityAttribute.html
index 470606346..39b755f10 100644
--- a/test/e2e/layers/layerOpacityAttribute.html
+++ b/test/e2e/layers/layerOpacityAttribute.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; 
        } 
@@ -49,7 +49,7 @@
        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> 
@@ -57,7 +57,7 @@
        <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; 
          } 
          
@@ -73,7 +73,7 @@
   </head>
   <body>
     <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- opacity = "0.8" label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer opacity = "0.8" label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/layers/layerOpacityAttribute.test.js b/test/e2e/layers/layerOpacityAttribute.test.js
index 76a348a43..4f9c14bbc 100644
--- a/test/e2e/layers/layerOpacityAttribute.test.js
+++ b/test/e2e/layers/layerOpacityAttribute.test.js
@@ -1,6 +1,6 @@
 import { test, expect, chromium } from '@playwright/test';
 
-test.describe('Adding Opacity Attribute to the Layer- Element', () => {
+test.describe('Adding Opacity Attribute to the map-layer Element', () => {
   let page;
   let context;
   test.beforeAll(async function () {
@@ -9,20 +9,20 @@ test.describe('Adding Opacity Attribute to the Layer- Element', () => {
       context.pages().find((page) => page.url() === 'about:blank') ||
       (await context.newPage());
     await page.goto('layerOpacityAttribute.html');
-    const l = await page.locator('layer-');
+    const l = await page.locator('map-layer');
     await l.evaluate((l) => l.whenReady());
   });
   test.afterAll(async function () {
     await context.close();
   });
 
-  test('Setting Opacity Attibute to Layer- Element', async () => {
+  test('Setting Opacity Attibute to map-layer Element', async () => {
     let opacity_attribute_value = await page.$eval(
-      'body > mapml-viewer > layer-',
+      'body > mapml-viewer > map-layer',
       (layer) => layer.getAttribute('opacity')
     );
     let layer_opacity = await page.$eval(
-      'body > mapml-viewer > layer-',
+      'body > mapml-viewer > map-layer',
       (layer) => layer.opacity
     );
     expect(layer_opacity).toEqual(+opacity_attribute_value);
@@ -33,7 +33,7 @@ test.describe('Adding Opacity Attribute to the Layer- Element', () => {
       (input) => input.value
     );
     let layer_opacity = await page.$eval(
-      'body > mapml-viewer > layer-',
+      'body > mapml-viewer > map-layer',
       (layer) => layer.opacity
     );
     expect(layer_opacity).toEqual(+opacity_slider_value);
diff --git a/test/e2e/layers/multipleExtents.html b/test/e2e/layers/multipleExtents.html
index f3da57cb2..6701d2f63 100644
--- a/test/e2e/layers/multipleExtents.html
+++ b/test/e2e/layers/multipleExtents.html
@@ -24,7 +24,7 @@
 
 <body>
   <mapml-viewer style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="47" lon="-92" controls>
-    <layer- data-testid="multiple-extents" label="Multiple Extents" checked>
+    <map-layer data-testid="multiple-extents" label="Multiple Extents" checked>
       <map-extent label="cbmt" units="CBMTILE" checked>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="16" max="20" ></map-input>
@@ -38,8 +38,8 @@
         <map-input name="xmax" type="location" units="gcrs" axis="longitude" position="bottom-right" min="-76" max="-74" ></map-input>
         <map-input name="ymax" type="location" units="gcrs" axis="latitude" position="top-left" min="45" max="6" ></map-input>
         <map-link rel="features" tref="data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" ></map-link>
-    </layer->
-    <layer- data-testid="single-extent" label="One hidden Extent" checked>
+    </map-layer>
+    <map-layer data-testid="single-extent" label="One hidden Extent" checked>
       <map-extent units="CBMTILE" checked hidden>
         <map-meta name="zoom" content="min=2,max=4"></map-meta>
         <map-input name="w" type="width" ></map-input>
@@ -51,7 +51,7 @@
         <map-link rel="image"
           tref="images/toporama_en.jpg?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH={w}&HEIGHT={h}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&m4h=t" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
   <textarea name="message" rows="10" cols="100"></textarea>
 </body>
diff --git a/test/e2e/layers/multipleExtentsOpacity.html b/test/e2e/layers/multipleExtentsOpacity.html
index 07a5952ac..69e9087b6 100644
--- a/test/e2e/layers/multipleExtentsOpacity.html
+++ b/test/e2e/layers/multipleExtentsOpacity.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; 
        } 
@@ -49,7 +49,7 @@
        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> 
@@ -57,7 +57,7 @@
        <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; 
          } 
          
@@ -73,7 +73,7 @@
   </head>
   <body>
     <mapml-viewer zoom="15" lon="-75.703611" lat="45.411105" controls="" projection="OSMTILE" role="application">    
-      <layer- opacity = "0.5" label="National Geographic" checked="">
+      <map-layer opacity = "0.5" label="National Geographic" checked="">
             <map-extent opacity = "0.9" label="National Geographic" units="OSMTILE" checked hidden>
               <map-input name="TileMatrix" type="zoom" value="18" min="0" max="18"></map-input>
               <map-input name="TileCol" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
@@ -94,7 +94,7 @@
               <map-input name="TileRow" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
               <map-link rel="tile" ></map-link>
             </map-extent>
-          </layer->
+          </map-layer>
         </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/layers/multipleExtentsOpacity.test.js b/test/e2e/layers/multipleExtentsOpacity.test.js
index eb376408f..2df099aba 100644
--- a/test/e2e/layers/multipleExtentsOpacity.test.js
+++ b/test/e2e/layers/multipleExtentsOpacity.test.js
@@ -17,17 +17,17 @@ test.describe('Adding Opacity Attribute to the <map-extent> Element', () => {
   test('Setting Opacity Attibute Value to map-extent Element', async () => {
     await page.waitForTimeout(3000);
     let extent_opacity1 = await page.$eval(
-      'body > mapml-viewer > layer- > map-extent:nth-child(1)',
+      'body > mapml-viewer > map-layer > map-extent:nth-child(1)',
       (extent) => extent._extentLayer._container.style.opacity
     );
     expect(extent_opacity1).toEqual('0.9');
     let extent_opacity2 = await page.$eval(
-      'body > mapml-viewer > layer- > map-extent:nth-child(2)',
+      'body > mapml-viewer > map-layer > map-extent:nth-child(2)',
       (extent) => extent._extentLayer._container.style.opacity
     );
     expect(extent_opacity2).toEqual('0.3');
     let extent_opacity3 = await page.$eval(
-      'body > mapml-viewer > layer- > map-extent:nth-child(3)',
+      'body > mapml-viewer > map-layer > map-extent:nth-child(3)',
       (extent) => extent._extentLayer._container.style.opacity
     );
     expect(extent_opacity3).toEqual('0.2');
@@ -43,7 +43,7 @@ test.describe('Adding Opacity Attribute to the <map-extent> Element', () => {
 
   test('Opacity Slider Value Matches the Extent Opacity after map-extent are unhidden', async () => {
     // set hidden=false for all map-extents
-    await page.$eval('body > mapml-viewer > layer-', (layer) => {
+    await page.$eval('body > mapml-viewer > map-layer', (layer) => {
       [].forEach.call(layer.children, (extent) => {
         extent.hidden = false;
       });
@@ -55,7 +55,7 @@ test.describe('Adding Opacity Attribute to the <map-extent> Element', () => {
       (opacity) => opacity.value
     );
     let extent_opacity1 = await page.$eval(
-      'body > mapml-viewer > layer- > map-extent:nth-child(1)',
+      'body > mapml-viewer > map-layer > map-extent:nth-child(1)',
       (extent) => extent._extentLayer._container.style.opacity
     );
     let opacity_slider_value2 = await page.$eval(
@@ -63,7 +63,7 @@ test.describe('Adding Opacity Attribute to the <map-extent> Element', () => {
       (opacity) => opacity.value
     );
     let extent_opacity2 = await page.$eval(
-      'body > mapml-viewer > layer- > map-extent:nth-child(2)',
+      'body > mapml-viewer > map-layer > map-extent:nth-child(2)',
       (extent) => extent._extentLayer._container.style.opacity
     );
     let opacity_slider_value3 = await page.$eval(
@@ -71,7 +71,7 @@ test.describe('Adding Opacity Attribute to the <map-extent> Element', () => {
       (opacity) => opacity.value
     );
     let extent_opacity3 = await page.$eval(
-      'body > mapml-viewer > layer- > map-extent:nth-child(3)',
+      'body > mapml-viewer > map-layer > map-extent:nth-child(3)',
       (extent) => extent._extentLayer._container.style.opacity
     );
     expect(extent_opacity1).toEqual(opacity_slider_value1);
diff --git a/test/e2e/layers/multipleHeterogeneousQueryExtents.html b/test/e2e/layers/multipleHeterogeneousQueryExtents.html
index 51787c6a2..bf50c8b1d 100644
--- a/test/e2e/layers/multipleHeterogeneousQueryExtents.html
+++ b/test/e2e/layers/multipleHeterogeneousQueryExtents.html
@@ -23,7 +23,7 @@
 
 <body>
   <mapml-viewer style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="40.59994213516742" lon="-102.62078167264747" controls>
-    <layer- label="Multiple Heterogeneous Query Extents" checked>
+    <map-layer label="Multiple Heterogeneous Query Extents" checked>
       <map-extent label="cbmt" units="CBMTILE" 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>
@@ -52,7 +52,7 @@
         <map-input name="h" type="height" ></map-input>
         <map-link rel="query" tref="data/query/us_map_query?{i}{j}{xmin}{ymin}{xmax}{ymax}{w}{h}" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
   <textarea name="message" rows="10" cols="100"></textarea>
 </body>
diff --git a/test/e2e/layers/multipleQueryExtents.html b/test/e2e/layers/multipleQueryExtents.html
index cb2778096..dc77a4de2 100644
--- a/test/e2e/layers/multipleQueryExtents.html
+++ b/test/e2e/layers/multipleQueryExtents.html
@@ -23,7 +23,7 @@
 
 <body>
   <mapml-viewer style="width: 500px;height: 500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-<layer- label="Multiple Query Extents" checked>
+<map-layer label="Multiple Query Extents" checked>
       <!-- the non-query extent (in this case a TemplatedTileLayer) is necessary 
            to have the layer not disabled in the layer control -->
       <!-- see: https://github.com/Maps4HTML/MapML.js/issues/647#issue-1096626052 -->
@@ -66,7 +66,7 @@
         <map-input name="h" type="height" ></map-input>
         <map-link rel="query" tref="data/query/us_map_query?{i}{j}{xmin}{ymin}{xmax}{ymax}{w}{h}" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
   <textarea name="message" rows="10" cols="100"></textarea>
 </body>
diff --git a/test/e2e/layers/queryFeatureCSFallback.html b/test/e2e/layers/queryFeatureCSFallback.html
index 55e42b91f..59ca4e773 100644
--- a/test/e2e/layers/queryFeatureCSFallback.html
+++ b/test/e2e/layers/queryFeatureCSFallback.html
@@ -11,7 +11,7 @@
 <body>
   <mapml-viewer style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="35" lon="-90" controls>
 
-    <layer- label="remote queryable mapml document with multiple queryable extents" src="queryFeatureCSFallback.mapml" checked></layer->
+    <map-layer label="remote queryable mapml document with multiple queryable extents" src="queryFeatureCSFallback.mapml" checked></map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/layers/queryLink.html b/test/e2e/layers/queryLink.html
index 1fc79b6bf..3a1e7bc6f 100644
--- a/test/e2e/layers/queryLink.html
+++ b/test/e2e/layers/queryLink.html
@@ -10,7 +10,7 @@
 
 <body>
   <mapml-viewer style="width: 500px;height: 500px;" projection="CBMTILE" zoom="0" lat="45" lon="-90" controls>
-    <layer- label="Inline Templated Tile" checked>
+    <map-layer label="Inline Templated Tile" checked>
       <map-meta name="zoom" content="min=0,max=6"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="i" type="location" units="map" axis="i" ></map-input>
@@ -27,7 +27,7 @@
         <map-input name="h" type="height" ></map-input>
         <map-link rel="query" tref="data/query/us_map_query?{i}{j}{xmin}{ymin}{xmax}{ymax}{w}{h}" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/layers/queryLink.test.js b/test/e2e/layers/queryLink.test.js
index 3395ea685..ed0e193bf 100644
--- a/test/e2e/layers/queryLink.test.js
+++ b/test/e2e/layers/queryLink.test.js
@@ -119,12 +119,12 @@ test.describe('Playwright Query Link Tests', () => {
       expect(href).toEqual('#6,32.62418749999957,-86.6801555');
 
       const elementCount = await page.evaluate(
-        `document.querySelector('mapml-viewer > layer- > map-extent > map-link').shadowRoot.children.length`
+        `document.querySelector('mapml-viewer > map-layer > map-extent > map-link').shadowRoot.children.length`
       );
       // shadowRoot contains 1 map-feature and 3 map-meta (cs, zoom, projection)
       expect(elementCount).toEqual(4);
       const property = await page.evaluate(
-        `document.querySelector('mapml-viewer > layer- > map-extent > map-link').shadowRoot.querySelector('map-properties').innerText.trim()`
+        `document.querySelector('mapml-viewer > map-layer > map-extent > map-link').shadowRoot.querySelector('map-properties').innerText.trim()`
       );
       expect(property).toEqual('Alabama');
     });
@@ -152,12 +152,12 @@ test.describe('Playwright Query Link Tests', () => {
       expect(href).toEqual('#0,34.168684499999635,-111.9288505');
 
       const elementCount = await page.evaluate(
-        `document.querySelector('mapml-viewer > layer- > map-extent > map-link').shadowRoot.children.length`
+        `document.querySelector('mapml-viewer > map-layer > map-extent > map-link').shadowRoot.children.length`
       );
       // shadowRoot contains 1 map-feature and 3 map-meta (cs, zoom, projection)
       expect(elementCount).toEqual(4);
       const property = await page.evaluate(
-        `document.querySelector('mapml-viewer > layer- > map-extent > map-link').shadowRoot.querySelector('map-properties').innerText.trim()`
+        `document.querySelector('mapml-viewer > map-layer > map-extent > map-link').shadowRoot.querySelector('map-properties').innerText.trim()`
       );
       expect(property).toEqual('Arizona');
     });
@@ -187,12 +187,12 @@ test.describe('Playwright Query Link Tests', () => {
       expect(href).toEqual('#6,32.62418749999957,-86.6801555');
 
       const elementCount = await page.evaluate(
-        `document.querySelector('mapml-viewer > layer- > map-extent > map-link').shadowRoot.children.length`
+        `document.querySelector('mapml-viewer > map-layer > map-extent > map-link').shadowRoot.children.length`
       );
       // shadowRoot contains 1 map-feature and 3 map-meta (cs, zoom, projection)
       expect(elementCount).toEqual(4);
       const property = await page.evaluate(
-        `document.querySelector('mapml-viewer > layer- > map-extent > map-link').shadowRoot.querySelector('map-properties').innerText.trim()`
+        `document.querySelector('mapml-viewer > map-layer > map-extent > map-link').shadowRoot.querySelector('map-properties').innerText.trim()`
       );
       expect(property).toEqual('Alabama');
     });
@@ -319,7 +319,7 @@ test.describe('Playwright Query Link Tests', () => {
       let popups = await popupPane.evaluate((pane) => pane.childElementCount);
       // expect results
       expect(popups).toBe(1);
-      const layer = await page.locator('layer-');
+      const layer = await page.locator('map-layer');
       // dismiss the popup
       await page.keyboard.press('Escape');
       // hide the layer
diff --git a/test/e2e/layers/queryableMapExtent.html b/test/e2e/layers/queryableMapExtent.html
index 8b22f1c56..9e6068930 100644
--- a/test/e2e/layers/queryableMapExtent.html
+++ b/test/e2e/layers/queryableMapExtent.html
@@ -12,7 +12,7 @@
   <mapml-viewer style="width: 500px;height: 500px;" projection="OSMTILE" zoom="2" lat="45" lon="-90" controls>
     <!-- the point of this map is that there is a mapml document pointed to by src
          and the document has a map-link rel=query in it -->
-    <layer- label="remote queryable mapml document" src="layers/queryableMapExtent.mapml" checked></layer->
+    <map-layer label="remote queryable mapml document" src="layers/queryableMapExtent.mapml" checked></map-layer>
   </mapml-viewer>
 </body>
 
diff --git a/test/e2e/layers/staticTileLayer.html b/test/e2e/layers/staticTileLayer.html
index 7ac430d04..054cbf876 100644
--- a/test/e2e/layers/staticTileLayer.html
+++ b/test/e2e/layers/staticTileLayer.html
@@ -29,7 +29,7 @@
   <map is="web-map" projection="CBMTILE" zoom="2" lat="59.87304909" lon="-53.22587225" width="900" height="400"
     controls>
 
-    <layer- label="Static MapML with tiles" checked>
+    <map-layer label="Static MapML with tiles" checked>
       <map-meta name="zoom" content="min=1,max=4"></map-meta>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-link rel="license"
@@ -39,15 +39,15 @@
       <map-tile zoom="2" row="10" col="11" src="data/cbmt/2/c11_r10.png"></map-tile>
       <map-tile zoom="2" row="10" col="9" src="data/cbmt/2/c9_r10.png"></map-tile>
       <map-tile zoom="2" row="11" col="9" src="data/cbmt/2/c9_r11.png"></map-tile>
-    </layer->
-    <layer- label="Static MapML with tiles" checked>
+    </map-layer>
+    <map-layer label="Static MapML with tiles" checked>
       <map-meta name="zoom" content="min=0,max=10"></map-meta>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-link rel="license"
         href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285"
         title="Canada Base Map © Natural Resources Canada"></map-link>
       <map-tile zoom="0" row="3" col="3" src="data/cbmt/0/c3_r3.png"></map-tile>
-    </layer->
+    </map-layer>
   </map>
 </body>
 
diff --git a/test/e2e/layers/step/templatedFeaturesLayerStep.html b/test/e2e/layers/step/templatedFeaturesLayerStep.html
index 964973afa..012b2e025 100644
--- a/test/e2e/layers/step/templatedFeaturesLayerStep.html
+++ b/test/e2e/layers/step/templatedFeaturesLayerStep.html
@@ -22,7 +22,7 @@
 <body>
 <map style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="1" lat="45.5052040" lon="-75.2202344"
      controls>
-  <layer- label="Alabama" checked>
+  <map-layer label="Alabama" checked>
     <map-meta name="zoom" content="min=0,max=5"></map-meta>
     <map-extent units="CBMTILE" checked hidden>
       <map-input name="z" type="zoom" min="0" max="18" value="0" step="3"></map-input>
@@ -32,7 +32,7 @@
       <map-input name="ymax" type="location" units="gcrs" axis="latitude" position="top-left" min="45" max="46" ></map-input>
       <map-link rel="features" tref="../data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" ></map-link>
     </map-extent>
-  </layer->
+  </map-layer>
 </map>
 </body>
 
diff --git a/test/e2e/layers/step/templatedImageLayerStep.html b/test/e2e/layers/step/templatedImageLayerStep.html
index 6604a0f32..f897f112a 100644
--- a/test/e2e/layers/step/templatedImageLayerStep.html
+++ b/test/e2e/layers/step/templatedImageLayerStep.html
@@ -24,7 +24,7 @@
 
 <body>
 <mapml-viewer projection="CBMTILE" zoom="1" lat="53.331" lon="-91.667" controls>
-  <layer- label="Toporama" checked>
+  <map-layer label="Toporama" checked>
     <map-meta name="zoom" content="min=0,max=5"></map-meta>
     <map-extent units="CBMTILE" checked hidden>
       <map-input name="z" type="zoom" value="19" step="3"></map-input>
@@ -41,7 +41,7 @@
       <map-link rel="image"
                 tref="/images/toporama_en.jpg?SERVICE=WMS&amp;REQUEST=GetMap&amp;FORMAT=image/jpeg&amp;TRANSPARENT=FALSE&amp;STYLES=&amp;VERSION=1.3.0&amp;LAYERS=WMS-Toporama&amp;WIDTH={w}&amp;HEIGHT={h}&amp;CRS=EPSG:3978&amp;BBOX={xmin},{ymin},{xmax},{ymax}&amp;m4h=t" ></map-link>
     </map-extent>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 </body>
 
diff --git a/test/e2e/layers/step/templatedTileLayerStep.html b/test/e2e/layers/step/templatedTileLayerStep.html
index dd30e9d42..aa9cc8719 100644
--- a/test/e2e/layers/step/templatedTileLayerStep.html
+++ b/test/e2e/layers/step/templatedTileLayerStep.html
@@ -11,7 +11,7 @@
 <body>
 <mapml-viewer style="width: 600px;height:600px" projection="WGS84" zoom="1" lat="-10" lon="-112" controls>
 
-  <layer- label="Inline Countries" checked>
+  <map-layer label="Inline Countries" checked>
     <map-meta name="zoom" content="min=0,max=7"></map-meta>
     <map-extent units="WGS84" checked hidden>
       <map-input name="zoomLevel" type="zoom" value="1" min="0" max="4" step="3"></map-input>
@@ -22,7 +22,7 @@
       <map-link tms rel="tile" tref="https://maps4html.org/TiledArt-Rousseau/TheBanksOfTheBièvreNearBicêtre/{zoomLevel}/{col}/{row}.png" ></map-link>
 
     </map-extent>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/layers/templatedFeatures.html b/test/e2e/layers/templatedFeatures.html
index 0c598c369..71437ce9c 100644
--- a/test/e2e/layers/templatedFeatures.html
+++ b/test/e2e/layers/templatedFeatures.html
@@ -22,7 +22,7 @@
 <body>
   <map data-testid="map1" style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="3" lat="45.5052040" lon="-75.2202344"
     controls>
-    <layer- label="Alabama" checked>
+    <map-layer label="Alabama" checked>
       <map-meta name="zoom" content="min=3,max=5"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" min="2" max="18" value="0" ></map-input>
@@ -32,18 +32,18 @@
         <map-input name="ymax" type="location" units="gcrs" axis="latitude" position="top-left" min="45" max="46" ></map-input>
         <map-link rel="features" tref="data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" ></map-link>
       </map-extent>
-    </layer->
-    <layer- label="Static MapML with tiles" checked>
+    </map-layer>
+    <map-layer label="Static MapML with tiles" checked>
       <map-meta name="zoom" content="min=0,max=10"></map-meta>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-link rel="license"
         href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285"
         title="Canada Base Map © Natural Resources Canada"></map-link>
       <map-tile zoom="0" row="3" col="3" src="data/cbmt/0/c3_r3.png"></map-tile>
-    </layer->
+    </map-layer>
   </map>
   <map data-testid="map2" id="map2" data-testid="map2" style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="17" lat="45.4069740362364" lon="-75.70155300710053" controls>
-    <layer- data-testid="restaurants" label="Restaurants" checked>
+    <map-layer data-testid="restaurants" label="Restaurants" checked>
       <map-meta name="cs" content="gcrs" ></map-meta>
       <map-meta name="extent" content="top-left-easting=1509080.1964270622,top-left-northing=-169400.558801122,bottom-right-easting=1512094.3357886747,bottom-right-northing=-172702.5654051304" ></map-meta>
       <map-extent units="CBMTILE" checked hidden>
@@ -58,7 +58,7 @@
           </map-select>
         <map-link tref="restaurants/{cuisine}.mapml" rel="features"></map-link>
         </map-extent>
-    </layer->
+    </map-layer>
   </map>
 
 </body>
diff --git a/test/e2e/layers/templatedFeatures.test.js b/test/e2e/layers/templatedFeatures.test.js
index aad3ed4d3..95257d0f9 100644
--- a/test/e2e/layers/templatedFeatures.test.js
+++ b/test/e2e/layers/templatedFeatures.test.js
@@ -48,10 +48,10 @@ test.describe('Playwright templatedFeatures Layer Tests', () => {
     test("Templated features attaches to MapExtent's shadow root", async () => {
       await page.waitForTimeout(500);
       const shadow = await page.evaluate(
-        `document.querySelector('#map2 > layer- > map-extent > map-link').shadowRoot`
+        `document.querySelector('#map2 > map-layer > map-extent > map-link').shadowRoot`
       );
       const features = await page.evaluate(
-        `document.querySelector('#map2 > layer- > map-extent > map-link').shadowRoot.querySelectorAll('map-feature').length`
+        `document.querySelector('#map2 > map-layer > map-extent > map-link').shadowRoot.querySelectorAll('map-feature').length`
       );
       expect(shadow).toBeTruthy();
       expect(features).toBe(8);
@@ -71,7 +71,9 @@ test.describe('Playwright templatedFeatures Layer Tests', () => {
       expect(startTopLeft.vertical).toBe(-170323.5596054569);
       expect(startBottomRight.horizontal).toBe(1511931.6167132407);
       expect(startBottomRight.vertical).toBe(-172638.668402344);
-      await page.evaluate(`document.querySelector('#map2 > layer-').zoomTo()`);
+      await page.evaluate(
+        `document.querySelector('#map2 > map-layer').zoomTo()`
+      );
       const endTopLeft = await page.evaluate(
         `document.querySelector('#map2').extent.topLeft.pcrs`
       );
@@ -100,7 +102,7 @@ test.describe('Playwright templatedFeatures Layer Tests', () => {
       expect(startBottomRight.vertical).toBe(-173037.52857506275);
       expect(startZoomLevel).toBe(16);
       await page.evaluate(
-        `document.querySelector('#map2 > layer- > map-extent > map-link').shadowRoot.querySelector('map-feature').zoomTo()`
+        `document.querySelector('#map2 > map-layer > map-extent > map-link').shadowRoot.querySelector('map-feature').zoomTo()`
       );
       await page.waitForTimeout(1000);
       const endTopLeft = await page.evaluate(
diff --git a/test/e2e/layers/templatedFeaturesFilter.html b/test/e2e/layers/templatedFeaturesFilter.html
index 7d13137a2..fa5ca2b56 100644
--- a/test/e2e/layers/templatedFeaturesFilter.html
+++ b/test/e2e/layers/templatedFeaturesFilter.html
@@ -15,7 +15,7 @@
 
 <body>
   <mapml-viewer style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="17" lat="45.4069740362364" lon="-75.70155300710053" controls>
-    <layer- label="Restaurants" checked>
+    <map-layer label="Restaurants" checked>
       <map-meta name="cs" content="gcrs" ></map-meta>
       <map-meta name="extent" content="top-left-easting=1509080.1964270622,top-left-northing=-169400.558801122,bottom-right-easting=1512094.3357886747,bottom-right-northing=-172702.5654051304" ></map-meta>
       <map-extent units="CBMTILE" checked>
@@ -30,7 +30,7 @@
           </map-select>
         <map-link tref="restaurants/{cuisine}.mapml" rel="features"></map-link>
         </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 
 </body>
diff --git a/test/e2e/layers/templatedImageLayer.html b/test/e2e/layers/templatedImageLayer.html
index 166382d0b..f7aae3a4a 100644
--- a/test/e2e/layers/templatedImageLayer.html
+++ b/test/e2e/layers/templatedImageLayer.html
@@ -27,7 +27,7 @@
 <body>
   <map is="web-map" projection="CBMTILE" zoom="4" lat="53.331" lon="-91.667" controls>
 
-    <layer- label="Toporama" checked>
+    <map-layer label="Toporama" checked>
       <map-meta name="zoom" content="min=4,max=5"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" value="19" min="4" max="4" ></map-input>
@@ -44,15 +44,15 @@
         <map-link rel="image"
                   tref="images/toporama_en.jpg?WIDTH={w}&amp;HEIGHT={h}&amp;CRS=EPSG:3978&amp;BBOX={xmin},{ymin},{xmax},{ymax}&amp;m4h=t" ></map-link>
       </map-extent>
-    </layer->
-    <layer- label="Static MapML with tiles" checked>
+    </map-layer>
+    <map-layer label="Static MapML with tiles" checked>
       <map-meta name="zoom" content="min=0,max=10"></map-meta>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-link rel="license"
         href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285"
         title="Canada Base Map © Natural Resources Canada"></map-link>
       <map-tile zoom="0" row="3" col="3" src="data/cbmt/0/c3_r3.png"></map-tile>
-    </layer->
+    </map-layer>
   </map>
 </body>
 
diff --git a/test/e2e/layers/templatedMapMLTileLayer.html b/test/e2e/layers/templatedMapMLTileLayer.html
index b731bbb18..03e82a929 100644
--- a/test/e2e/layers/templatedMapMLTileLayer.html
+++ b/test/e2e/layers/templatedMapMLTileLayer.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; 
        } 
@@ -49,7 +49,7 @@
        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> 
@@ -57,7 +57,7 @@
        <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; 
          } 
          
@@ -74,7 +74,7 @@
   <body>
     
       <mapml-viewer projection="OSMTILE" zoom="2" lat="50.7" lon="-84.4" controls>
-        <layer- label="Countries" checked>
+        <map-layer label="Countries" checked>
           <map-link rel="stylesheet" href="tiles/vector-tile.css" ></map-link>
           <map-extent units="OSMTILE" checked hidden>
             <!-- tiles at zoom=2 are scaled to zoom=3,4,5 and 6 as required-->
@@ -84,7 +84,7 @@
             <map-input  name="col" type="location" axis="column" units="tilematrix" min="15" max="19"></map-input>
             <!-- tiles outside bbox=15,20,19,23,zoom=6 should not be requested at all -->
             <map-link data-testid="templated-link" rel='tile' type='text/mapml' tref='tiles/osmtile/{zoomLevel}/{row}/{col}.mapml' ></map-link>           </map-extent>
-        </layer->
+        </map-layer>
       </mapml-viewer>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/layers/templatedPMTilesCBMTILETest.html b/test/e2e/layers/templatedPMTilesCBMTILETest.html
index 50b9d666b..43cb9d7be 100644
--- a/test/e2e/layers/templatedPMTilesCBMTILETest.html
+++ b/test/e2e/layers/templatedPMTilesCBMTILETest.html
@@ -11,7 +11,7 @@
   <!-- pmtiles / pmtiles-mvt layers only work in OSMTILE projecton -->
   <mapml-viewer data-testid="viewer" projection="CBMTILE" zoom="0" lat="52" lon="-93" width="400" height="400">
     <!-- on load, this layer should be enabled, because one extent is enabled -->
-    <layer- data-testid="flexible-projection-layer" checked>
+    <map-layer data-testid="flexible-projection-layer" checked>
       <!-- on load, this  extent is enabled, because the map projection is CBMTILE -->
       <map-extent units="CBMTILE"  checked="checked" hidden="hidden">
         <map-input name="z" type="zoom"  value="17" min="0" max="17"></map-input>
@@ -26,9 +26,9 @@
         <map-input name="bar" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
         <map-link rel="tile" type="application/vnd.mapbox-vector-tile" tref="tiles/osmtile/{beans}/{foo}/{bar}.mvt?theme=light"></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
     <!-- on load this layer should be disabled -->
-    <layer- checked data-testid="osmtile-only-layer">
+    <map-layer checked data-testid="osmtile-only-layer">
       <map-title>{z}/{x}/{y}.mvt test</map-title>
     <!-- on load this extent should be disabled -->
       <map-extent data-testid="osmtile-only-extent" units="OSMTILE" checked="checked">
@@ -37,7 +37,7 @@
         <map-input name="bar" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
         <map-link rel="tile" type="application/vnd.mapbox-vector-tile" tref="tiles/osmtile/{beans}/{foo}/{bar}.mvt?theme=light"></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 </html>
diff --git a/test/e2e/layers/templatedPMTilesMVTLayer.html b/test/e2e/layers/templatedPMTilesMVTLayer.html
index bd9d41c2c..b3c33b521 100644
--- a/test/e2e/layers/templatedPMTilesMVTLayer.html
+++ b/test/e2e/layers/templatedPMTilesMVTLayer.html
@@ -9,7 +9,7 @@
   <body>
 
   <mapml-viewer data-testid="viewer" projection="OSMTILE" zoom="0" lat="0" lon="0" width="400" height="400">
-    <layer- data-testid="dark">
+    <map-layer data-testid="dark">
       <map-title>PMTiles test dark</map-title>
       <map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
       <map-extent units="OSMTILE" checked>
@@ -17,8 +17,8 @@
         <map-meta name="extent" content="top-left-easting=-11563967, top-left-northing=5549940, bottom-right-easting=-11534883, bottom-right-northing=5516384"></map-meta>
         <map-link rel="tile" type="application/pmtiles" tref="spearfish.pmtiles?theme=dark"></map-link>
       </map-extent>
-    </layer->
-    <layer- checked data-testid="light">
+    </map-layer>
+    <map-layer checked data-testid="light">
       <map-title>{z}/{x}/{y}.mvt test</map-title>
       <map-link rel="stylesheet" type="application/pmtiles+stylesheet" href="pmtilesRulesModule.js"></map-link>
       <map-extent units="OSMTILE" checked="checked">
@@ -27,14 +27,14 @@
         <map-input name="bar" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
         <map-link rel="tile" type="application/vnd.mapbox-vector-tile" tref="tiles/osmtile/{beans}/{foo}/{bar}.mvt?theme=light"></map-link>
       </map-extent>
-    </layer->
-    <layer- data-testid="hard-coded-variables">
+    </map-layer>
+    <map-layer data-testid="hard-coded-variables">
       <map-title>{z}/{x}/{y}.mvt hardcoding test</map-title>
       <map-link rel="stylesheet" type="application/pmtiles+stylesheet" href="pmtilesRulesModule.js"></map-link>
       <map-extent units="OSMTILE" checked="checked">
         <map-link rel="tile" type="application/vnd.mapbox-vector-tile" tref="tiles/osmtile/{z}/{x}/{y}.mvt?theme=light"></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 </html>
diff --git a/test/e2e/layers/templatedPMTilesMVTLayer.test.js b/test/e2e/layers/templatedPMTilesMVTLayer.test.js
index 2a517c99f..1974cc54b 100644
--- a/test/e2e/layers/templatedPMTilesMVTLayer.test.js
+++ b/test/e2e/layers/templatedPMTilesMVTLayer.test.js
@@ -96,7 +96,7 @@ test.describe('Playwright templatedPMTilesLayer Tests', () => {
     await expect(flexProjectionLayer).not.toHaveAttribute('disabled');
     await expect(fixedProjectionLayer).not.toHaveAttribute('disabled');
   });
-  test('A protomaps map-link, parent map-extent and ancestor layer- are disabled when out of bounds', async ({
+  test('A protomaps map-link, parent map-extent and ancestor map-layer are disabled when out of bounds', async ({
     page
   }) => {
     await page.goto('templatedPMTilesMVTLayer.html');
diff --git a/test/e2e/layers/templatedPMTilesMVTLayerMissingRuleKey.html b/test/e2e/layers/templatedPMTilesMVTLayerMissingRuleKey.html
index 71d9ad2d3..e9a052e61 100644
--- a/test/e2e/layers/templatedPMTilesMVTLayerMissingRuleKey.html
+++ b/test/e2e/layers/templatedPMTilesMVTLayerMissingRuleKey.html
@@ -9,7 +9,7 @@
   <body>
 
   <mapml-viewer data-testid="viewer" projection="OSMTILE" zoom="0" lat="0" lon="0" width="400" height="400">
-    <layer- checked data-testid="light" checked>
+    <map-layer checked data-testid="light" checked>
       <map-title>{z}/{x}/{y}.mvt test</map-title>
       <map-link rel="stylesheet" type="application/pmtiles+stylesheet" href="pmtilesRulesModule.js"></map-link>
       <map-extent units="OSMTILE" checked="checked">
@@ -18,7 +18,7 @@
         <map-input name="bar" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
         <map-link rel="tile" type="application/vnd.mapbox-vector-tile" tref="tiles/osmtile/{beans}/{foo}/{bar}.mvt?theme=light&foil-the-key-lookup=foo"></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 </html>
diff --git a/test/e2e/layers/templatedPMTilesMVTLayerMissingStyles.html b/test/e2e/layers/templatedPMTilesMVTLayerMissingStyles.html
index a34de427b..f62381ec8 100644
--- a/test/e2e/layers/templatedPMTilesMVTLayerMissingStyles.html
+++ b/test/e2e/layers/templatedPMTilesMVTLayerMissingStyles.html
@@ -9,7 +9,7 @@
   <body>
 
   <mapml-viewer data-testid="viewer" projection="OSMTILE" zoom="0" lat="0" lon="0" width="400" height="400">
-    <layer- checked data-testid="light" checked>
+    <map-layer checked data-testid="light" checked>
       <map-title>{z}/{x}/{y}.mvt test</map-title>
       <map-link rel="stylesheet" type="application/pmtiles+stylesheet" href="templatedPMTilesPmtilesRulesMissing.js"></map-link>
       <map-extent units="OSMTILE" checked="checked">
@@ -18,7 +18,7 @@
         <map-input name="bar" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
         <map-link rel="tile" type="application/vnd.mapbox-vector-tile" tref="tiles/osmtile/{beans}/{foo}/{bar}.mvt?theme=light"></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 </body>
 </html>
diff --git a/test/e2e/layers/templatedTileLayer.html b/test/e2e/layers/templatedTileLayer.html
index 0d6dc6aa5..bc9c1f63f 100644
--- a/test/e2e/layers/templatedTileLayer.html
+++ b/test/e2e/layers/templatedTileLayer.html
@@ -27,7 +27,7 @@
 <body>
   <map is="web-map" projection="WGS84" zoom="1" lat="59.87304909" lon="-53.22587225" width="900" height="400" controls>
 
-    <layer- label="Inline Templated Tile" checked>
+    <map-layer label="Inline Templated Tile" checked>
       <map-meta name="zoom" content="min=1,max=2"></map-meta>
       <map-extent units="WGS84" checked hidden>
         <map-input name="zoomLevel" type="zoom" min="1" max="1" value="0" ></map-input>
@@ -38,18 +38,18 @@
           tref='data/wgs84/{zoomLevel}/r{row}_c{col}.mapml' ></map-link>
 
       </map-extent>
-    </layer->
+    </map-layer>
     <!-- this layer is removed before the zoom in control test is done -->
-    <layer- label="Static MapML with tiles" checked>
+    <map-layer label="Static MapML with tiles" checked>
       <map-meta name="zoom" content="min=0,max=10"></map-meta>
       <map-meta name="projection" content="WGS84"></map-meta>
       <map-link rel="license"
         href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285"
         title="Canada Base Map © Natural Resources Canada"></map-link>
       <map-tile zoom="0" row="3" col="3" src="data/cbmt/0/c3_r3.png"></map-tile>
-    </layer->
+    </map-layer>
 
-    <layer- label="Templated Tile Layer for Zoom" checked>
+    <map-layer label="Templated Tile Layer for Zoom" checked>
       <!-- for the zoom in control disabled test to work at or above z=3, need to set the max zoom level -->
       <map-meta name="zoom" content="min=1,max=2"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
@@ -59,7 +59,7 @@
         <map-input name="tymax" type="location" rel="tile" position="top-left" axis="northing" units="tilematrix" ></map-input>
         <map-link rel="tile" tref="https://datacube.services.geo.ca/ows/msi?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=TRUE&STYLES=msi-color&VERSION=1.3.0&LAYERS=msi&WIDTH=256&HEIGHT=256&CRS=EPSG:3978&BBOX={txmin},{tymin},{txmax},{tymax}" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </map>
 </body>
 
diff --git a/test/e2e/mapml-viewer/cssDomination.html b/test/e2e/mapml-viewer/cssDomination.html
index a2178af50..f78ffce88 100644
--- a/test/e2e/mapml-viewer/cssDomination.html
+++ b/test/e2e/mapml-viewer/cssDomination.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; 
        } 
@@ -49,7 +49,7 @@
        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> 
@@ -57,7 +57,7 @@
        <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; 
          } 
          
@@ -73,7 +73,7 @@
   </head>
   <body>
     <mapml-viewer height = "600" width = "600" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/mapml-viewer/customTCRS.html b/test/e2e/mapml-viewer/customTCRS.html
index 0314a73d7..d32356394 100644
--- a/test/e2e/mapml-viewer/customTCRS.html
+++ b/test/e2e/mapml-viewer/customTCRS.html
@@ -10,14 +10,14 @@
 
 <body>
   <mapml-viewer zoom="2" lat="45" lon="-90" controls>
-    <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
-    <layer- label="Static MapML with tiles" checked>
+    <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
+    <map-layer label="Static MapML with tiles" checked>
       <map-meta name="zoom" content="min=1,max=4"></map-meta>
       <map-meta name="projection" content="basic"></map-meta>
 
       <map-tile zoom="2" row="-23" col="-9" src="data/cbmt/3/c17_r18.png"></map-tile>
       <map-tile zoom="2" row="-23" col="-10" src="data/cbmt/3/c16_r18.png"></map-tile>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 
   <script type="module">
@@ -37,7 +37,7 @@
 
   <mapml-viewer data-testid="map2" style="width:500px;height:500px;" projection="other" zoom="3" lat="45.5052040" lon="-75.2202344"
     controls>
-    <layer- label="Arizona" checked>
+    <map-layer label="Arizona" checked>
       <map-meta name="projection" content="other"></map-meta>
       <map-meta name="zoom" content="min=1,max=5,value=0"></map-meta>
       <map-meta name="cs" content="gcrs"></map-meta>
@@ -113,8 +113,8 @@ <h1>Colorado</h1>
           </map-polygon>
         </map-geometry>
       </map-feature>
-    </layer->
-    <layer- label="Alabama" checked>
+    </map-layer>
+    <map-layer label="Alabama" checked>
       <map-meta name="zoom" content="min=1,max=5"></map-meta>
       <map-extent units="other" checked hidden>
         <map-input name="z" type="zoom" min="2" max="18" value="0"></map-input>
@@ -124,7 +124,7 @@ <h1>Colorado</h1>
         <map-input name="ymax" type="location" units="gcrs" axis="latitude" position="top-left" min="45" max="46"></map-input>
         <map-link rel="features" tref="data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 
   <script type="module">
@@ -214,13 +214,13 @@ <h1>Colorado</h1>
     mapThree.projection = badProj;
   </script>
   <mapml-viewer id="mapThree" zoom="2" lat="45" lon="-90" controls>
-    <layer- label="Static MapML with tiles" checked>
+    <map-layer label="Static MapML with tiles" checked>
       <map-meta name="zoom" content="min=1,max=4"></map-meta>
       <map-meta name="projection" content="basic"></map-meta>
 
       <map-tile zoom="2" row="-23" col="-9" src="data/cbmt/3/c17_r18.png"></map-tile>
       <map-tile zoom="2" row="-23" col="-10" src="data/cbmt/3/c16_r18.png"></map-tile>
-    </layer->
+    </map-layer>
   </mapml-viewer>
   
 </body>
diff --git a/test/e2e/mapml-viewer/customTCRS.test.js b/test/e2e/mapml-viewer/customTCRS.test.js
index 2bf12269b..ca642d7b5 100644
--- a/test/e2e/mapml-viewer/customTCRS.test.js
+++ b/test/e2e/mapml-viewer/customTCRS.test.js
@@ -20,12 +20,12 @@ test.describe('Playwright Custom TCRS Tests', () => {
     await page.waitForTimeout(500);
     const misMatchedLayerDisabled = await page.$eval(
       'body > mapml-viewer:nth-child(1)',
-      (map) => map.querySelectorAll('layer-')[0].hasAttribute('disabled')
+      (map) => map.querySelectorAll('map-layer')[0].hasAttribute('disabled')
     );
 
     const matchedLayerEnabled = await page.$eval(
       'body > mapml-viewer:nth-child(1)',
-      (map) => map.querySelectorAll('layer-')[1].hasAttribute('disabled')
+      (map) => map.querySelectorAll('map-layer')[1].hasAttribute('disabled')
     );
 
     await expect(
@@ -45,12 +45,12 @@ test.describe('Playwright Custom TCRS Tests', () => {
     const staticFeaturesLayerDisabled = await page
       .getByTestId('map2')
       .evaluate((map) =>
-        map.querySelectorAll('layer-')[0].hasAttribute('disabled')
+        map.querySelectorAll('map-layer')[0].hasAttribute('disabled')
       );
     const templatedFeaturesLayerDisabled = await page
       .getByTestId('map2')
       .evaluate((map) =>
-        map.querySelectorAll('layer-')[1].hasAttribute('disabled')
+        map.querySelectorAll('map-layer')[1].hasAttribute('disabled')
       );
 
     const featureOne = await page
diff --git a/test/e2e/mapml-viewer/locateButton.html b/test/e2e/mapml-viewer/locateButton.html
index 6d6faa97c..397b1e7fa 100644
--- a/test/e2e/mapml-viewer/locateButton.html
+++ b/test/e2e/mapml-viewer/locateButton.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; 
        } 
@@ -49,7 +49,7 @@
        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> 
@@ -57,7 +57,7 @@
        <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; 
          } 
          
@@ -73,7 +73,7 @@
   </head>
   <body>
     <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist="geolocation">
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/mapml-viewer/mapml-viewer.html b/test/e2e/mapml-viewer/mapml-viewer.html
index 7a5b75890..03a7a3101 100644
--- a/test/e2e/mapml-viewer/mapml-viewer.html
+++ b/test/e2e/mapml-viewer/mapml-viewer.html
@@ -28,7 +28,7 @@
 
 <body>
   <mapml-viewer data-testid="testviewer" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
-    <layer- data-testid="testlayer" label="CBMT - INLINE" checked>
+    <map-layer data-testid="testlayer" label="CBMT - INLINE" checked>
       <map-meta name="zoom" content="min=0,max=25"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
@@ -36,7 +36,7 @@
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>
   <textarea id="coord" name="message" rows="10" cols="100"></textarea>
   <textarea id="copyGeoJSON" name="message" rows="10" cols="100">{"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"coordinates": [29.93926429273742,26.465501185936787],"type": "Point"}}]}</textarea>
diff --git a/test/e2e/mapml-viewer/mapml-viewerCaption.html b/test/e2e/mapml-viewer/mapml-viewerCaption.html
index ec5d8abdf..3c99472c9 100644
--- a/test/e2e/mapml-viewer/mapml-viewerCaption.html
+++ b/test/e2e/mapml-viewer/mapml-viewerCaption.html
@@ -28,9 +28,9 @@
     <map-caption id="test2">Test2</map-caption>
     <map-caption id="test3">Test3</map-caption>
     
-    <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked>
+    <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked>
       <map-caption> Layer Test</map-caption>
-    </layer->
+    </map-layer>
   </mapml-viewer>
 
 </body>
diff --git a/test/e2e/mapml-viewer/mapml-viewerCaption.test.js b/test/e2e/mapml-viewer/mapml-viewerCaption.test.js
index 8deb47c05..2b53d6bf2 100644
--- a/test/e2e/mapml-viewer/mapml-viewerCaption.test.js
+++ b/test/e2e/mapml-viewer/mapml-viewerCaption.test.js
@@ -58,7 +58,7 @@ test.describe('Playwright mapml-viewer map-captions Test', () => {
   });
   test("Map Caption doesn't create aria-label on a layer", async () => {
     let arialabel = await page.evaluate(
-      `document.querySelector('layer-').getAttribute('aria-label')`
+      `document.querySelector('map-layer').getAttribute('aria-label')`
     );
     expect(arialabel).toEqual(null);
   });
diff --git a/test/e2e/mapml-viewer/mapml-viewerHeightAndWidthAttributes.html b/test/e2e/mapml-viewer/mapml-viewerHeightAndWidthAttributes.html
index 978d5bab0..a013ea2c5 100644
--- a/test/e2e/mapml-viewer/mapml-viewerHeightAndWidthAttributes.html
+++ b/test/e2e/mapml-viewer/mapml-viewerHeightAndWidthAttributes.html
@@ -31,7 +31,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; 
        } 
@@ -47,7 +47,7 @@
        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> 
@@ -55,7 +55,7 @@
        <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; 
          } 
          
@@ -71,7 +71,7 @@
   </head>
   <body>
     <mapml-viewer height = "800" width = "900" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/mapml-viewer/noWidthAndHeight.html b/test/e2e/mapml-viewer/noWidthAndHeight.html
index 4af15c36e..505f1b454 100644
--- a/test/e2e/mapml-viewer/noWidthAndHeight.html
+++ b/test/e2e/mapml-viewer/noWidthAndHeight.html
@@ -31,7 +31,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; 
        } 
@@ -47,7 +47,7 @@
        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> 
@@ -55,7 +55,7 @@
        <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; 
          } 
          
@@ -71,7 +71,7 @@
   </head>
   <body>
     <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/mapml-viewer/staticAttribute.html b/test/e2e/mapml-viewer/staticAttribute.html
index e633e1bef..dfa81173f 100644
--- a/test/e2e/mapml-viewer/staticAttribute.html
+++ b/test/e2e/mapml-viewer/staticAttribute.html
@@ -32,7 +32,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; 
        } 
@@ -48,7 +48,7 @@
        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> 
@@ -56,7 +56,7 @@
        <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; 
          } 
          
@@ -72,7 +72,7 @@
   </head>
   <body>
     <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js
index 993af1dc9..05282b6c8 100644
--- a/test/e2e/mapml-viewer/viewerContextMenu.test.js
+++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js
@@ -359,7 +359,7 @@ test.describe('Playwright mapml-viewer Context Menu (and api) Tests', () => {
       (text) => text.value
     );
     const expected = `<mapml-viewer data-testid="testviewer" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls="" role="application">
-    <layer- data-testid="testlayer" label="CBMT - INLINE" checked="">
+    <map-layer data-testid="testlayer" label="CBMT - INLINE" checked="">
       <map-meta name="zoom" content="min=0,max=25"></map-meta>
       <map-extent units="CBMTILE" checked="" hidden="">
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
@@ -367,7 +367,7 @@ test.describe('Playwright mapml-viewer Context Menu (and api) Tests', () => {
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
         <map-link rel="tile" tref="/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </mapml-viewer>`;
     expect(copyValue).toEqual(expected);
     await page.locator('body > textarea#coord').fill('');
diff --git a/test/e2e/mapml-viewer/windowSizeChange.html b/test/e2e/mapml-viewer/windowSizeChange.html
index e633e1bef..dfa81173f 100644
--- a/test/e2e/mapml-viewer/windowSizeChange.html
+++ b/test/e2e/mapml-viewer/windowSizeChange.html
@@ -32,7 +32,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; 
        } 
@@ -48,7 +48,7 @@
        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> 
@@ -56,7 +56,7 @@
        <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; 
          } 
          
@@ -72,7 +72,7 @@
   </head>
   <body>
     <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>
diff --git a/test/e2e/web-map/map.html b/test/e2e/web-map/map.html
index 7f7042780..36b311d5f 100644
--- a/test/e2e/web-map/map.html
+++ b/test/e2e/web-map/map.html
@@ -29,7 +29,7 @@
 <body>
   <map is="web-map" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344"
   	controls>
-  	<layer- label="CBMT - INLINE" checked>
+  	<map-layer label="CBMT - INLINE" checked>
       <map-meta name="zoom" content="min=0,max=4"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
@@ -37,7 +37,7 @@
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
         <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
       </map-extent>
-    </layer->
+    </map-layer>
   </map>
   <textarea id="copyGeoJSON" name="message" rows="10" cols="100">{"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"coordinates": [-83.22289418030245, 48.63126690901518],"type": "Point"}}]}</textarea>
   <textarea id="invalidLink" name="message" rows="10" cols="100">https://example.com</textarea>
diff --git a/test/e2e/web-map/mapCaption.html b/test/e2e/web-map/mapCaption.html
index 7b8c507ae..35aa63df5 100644
--- a/test/e2e/web-map/mapCaption.html
+++ b/test/e2e/web-map/mapCaption.html
@@ -28,9 +28,9 @@
     <map-caption id="test2">Test2</map-caption>
     <map-caption id="test3">Test3</map-caption>
     
-    <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked>
+    <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked>
       <map-caption> Layer Test</map-caption>
-    </layer->
+    </map-layer>
   </map>
 
 </body>
diff --git a/test/e2e/web-map/mapCaption.test.js b/test/e2e/web-map/mapCaption.test.js
index 7f8f59c4a..ab57b4997 100644
--- a/test/e2e/web-map/mapCaption.test.js
+++ b/test/e2e/web-map/mapCaption.test.js
@@ -58,7 +58,7 @@ test.describe('Playwright web-map map-captions Test', () => {
   });
   test("Map Caption doesn't create aria-label on a layer", async () => {
     let arialabel = await page.evaluate(
-      `document.querySelector('layer-').getAttribute('aria-label')`
+      `document.querySelector('map-layer').getAttribute('aria-label')`
     );
     expect(arialabel).toEqual(null);
   });
diff --git a/test/e2e/web-map/mapCssNoDomination.html b/test/e2e/web-map/mapCssNoDomination.html
index ffa8af5b5..20ed3b8bb 100644
--- a/test/e2e/web-map/mapCssNoDomination.html
+++ b/test/e2e/web-map/mapCssNoDomination.html
@@ -38,7 +38,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;
@@ -48,7 +48,7 @@
       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>
@@ -72,7 +72,7 @@
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" height = "600" width = "600" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </map>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/web-map/mapHeightAndWidthAttributes.html b/test/e2e/web-map/mapHeightAndWidthAttributes.html
index c1aad11f0..96075d72a 100644
--- a/test/e2e/web-map/mapHeightAndWidthAttributes.html
+++ b/test/e2e/web-map/mapHeightAndWidthAttributes.html
@@ -36,7 +36,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;
@@ -46,7 +46,7 @@
       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>
@@ -70,7 +70,7 @@
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" height = "800" width = "800" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </map>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/web-map/mapNoWidthAndHeight.html b/test/e2e/web-map/mapNoWidthAndHeight.html
index 34624f164..2ff0a7293 100644
--- a/test/e2e/web-map/mapNoWidthAndHeight.html
+++ b/test/e2e/web-map/mapNoWidthAndHeight.html
@@ -36,7 +36,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;
@@ -46,7 +46,7 @@
       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>
@@ -70,7 +70,7 @@
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </map>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/web-map/mapStatic.html b/test/e2e/web-map/mapStatic.html
index 1e5c8484d..053aa8a5d 100644
--- a/test/e2e/web-map/mapStatic.html
+++ b/test/e2e/web-map/mapStatic.html
@@ -37,7 +37,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;
@@ -47,7 +47,7 @@
       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>
@@ -71,7 +71,7 @@
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </map>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/web-map/mapWindowSizeChange.html b/test/e2e/web-map/mapWindowSizeChange.html
index e66e85fe2..df1f9d91d 100644
--- a/test/e2e/web-map/mapWindowSizeChange.html
+++ b/test/e2e/web-map/mapWindowSizeChange.html
@@ -38,7 +38,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;
@@ -48,7 +48,7 @@
       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>
@@ -72,7 +72,7 @@
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
+      <map-layer label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></map-layer>
     </map>
   </body>
 </html>
\ No newline at end of file
diff --git a/test/e2e/web-map/web-map.html b/test/e2e/web-map/web-map.html
index 1eaa9e385..26cf172a9 100644
--- a/test/e2e/web-map/web-map.html
+++ b/test/e2e/web-map/web-map.html
@@ -29,14 +29,14 @@
 <body>
     <map is="web-map" data-testid="testviewer" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47"
         lon="-92" controls>
-        <layer- data-testid="testlayer" label="CBMT - INLINE" checked>
+        <map-layer data-testid="testlayer" label="CBMT - INLINE" checked>
             <map-extent units="CBMTILE" checked hidden>
                 <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
                 <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
                 <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
                 <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
             </map-extent>
-        </layer->
+        </map-layer>
     </mapml-viewer>
     <textarea id="coord" name="message" rows="10" cols="100"></textarea>
     <textarea id="copyGeoJSON" name="message" rows="10"
diff --git a/test/layers/mapMLLayer.spec.js b/test/layers/mapMLLayer.spec.js
index ac4ad814d..08d95245e 100644
--- a/test/layers/mapMLLayer.spec.js
+++ b/test/layers/mapMLLayer.spec.js
@@ -17,10 +17,10 @@ describe('MapMLLayer Constructor Tests', () => {
     });
   });
 
-  describe('M.mapMLLayer(null, <layer-></layer->, options) factory function ', () => {
+  describe('M.mapMLLayer(null, <map-layer></map-layer>, options) factory function ', () => {
     var content;
     beforeEach(async () => {
-      content = document.createElement('layer-');
+      content = document.createElement('map-layer');
       content.innerHTML = `<map-extent units="CBMTILE">
                         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
                         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
diff --git a/test/server.js b/test/server.js
index 4ccfd6692..3d34b2936 100644
--- a/test/server.js
+++ b/test/server.js
@@ -15,7 +15,7 @@ app.use(express.static(path.join(__dirname, 'e2e/elements/map-a')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map-input')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map-link')));
 app.use(express.static(path.join(__dirname, 'e2e/elements/map-style')));
-app.use(express.static(path.join(__dirname, 'e2e/elements/layer-')));
+app.use(express.static(path.join(__dirname, 'e2e/elements/map-layer')));
 app.use(express.static(path.join(__dirname, 'e2e/api')));
 app.use(express.static(path.join(__dirname, 'e2e/data')));
 app.use(express.static(path.join(__dirname, 'e2e/geojson')));
