Rename the layer- element to map-layer

Author: prushfor

docs/api/geojson-api.mdx

@@ -29,7 +29,7 @@ The **GeoJSON API** is provided as a library to convert GeoJSON to and from MapM
 
 | Function | Returns | Description |
 |----------|---------|-------------|
-|<code>geojson2mapml(\<Object \| String\> json, \<Object\>options)</code> | A MapML `<layer->` element. | Convert a GeoJSON feature or feature collection string or object to MapML `<layer->` containing one or more `<map-feature>` elements.|
+|<code>geojson2mapml(\<Object \| String\> json, \<Object\>options)</code> | A MapML `<map-layer>` element. | Convert a GeoJSON feature or feature collection string or object to MapML `<map-layer>` containing one or more `<map-feature>` elements.|
 
 :::tip
 
@@ -143,7 +143,7 @@ let output = geojson2mapml(json, {label: "Example 1", projection: "CBMTILE", cap
 <summary>Click to view the output HTMLElement</summary>
 
 ``` html
-<layer- label="Example 1" checked="">
+<map-layer label="Example 1" checked="">
    <map-meta name="projection" content="CBMTILE"></map-meta>
    <map-meta name="cs" content="gcrs"></map-meta>
    <map-feature>
@@ -157,7 +157,7 @@ let output = geojson2mapml(json, {label: "Example 1", projection: "CBMTILE", cap
          <h3>This is a property heading</h3>
       </map-properties>
    </map-feature>
-</layer->
+</map-layer>
 ```
 
 </details> 
@@ -195,7 +195,7 @@ let output = geojson2mapml(json, {label: "Example 2", caption: cap, properties:
 <summary>Click to view the output HTMLElement</summary>
 
 ``` html
-<layer- label="Example 2" checked="">
+<map-layer label="Example 2" checked="">
    <map-meta name="projection" content="OSMTILE"></map-meta>
    <map-meta name="cs" content="gcrs"></map-meta>
    <map-feature>
@@ -209,7 +209,7 @@ let output = geojson2mapml(json, {label: "Example 2", caption: cap, properties:
          <h1>This is a Point's property</h1>
       </map-properties>
    </map-feature>
-</layer->
+</map-layer>
 ```
 
 </details> 
@@ -241,7 +241,7 @@ let output = geojson2mapml(json);
 <summary>Click to view the output HTMLElement</summary>
 
 ``` html
-<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-meta name="projection" content="OSMTILE"></map-meta>
    <map-meta name="cs" content="gcrs"></map-meta>
@@ -269,7 +269,7 @@ let output = geojson2mapml(json);
          </table>
       </map-properties>
    </map-feature>
-</layer->
+</map-layer>
 ```
 
 </details> 
@@ -280,7 +280,7 @@ let output = geojson2mapml(json);
 
 | Function | Returns | Description |
 |----------|---------|-------------|
-| <code>mapml2geojson(\<HTMLLayerElement\> element, \<Object\> options)</code> | A JavaScript (GeoJSON) feature collection object | This function transforms the `<feature>` element children of a `<layer->` element to a GeoJSON FeatureCollection object. You supply [options](#options-1) to control the transformation. This function must be used inside a windows.onload event.
+| <code>mapml2geojson(\<HTMLLayerElement\> element, \<Object\> options)</code> | A JavaScript (GeoJSON) feature collection object | This function transforms the `<feature>` element children of a `<map-layer>` element to a GeoJSON FeatureCollection object. You supply [options](#options-1) to control the transformation. This function must be used inside a windows.onload event.
 
 :::caution
 
@@ -298,7 +298,7 @@ window.onload = (event) => {
 
 | Parameter | Description |
 |------|--------------|
-| \<HTMLLayerElement\> element | A `<layer->` element. |
+| \<HTMLLayerElement\> element | A `<map-layer>` element. |
 | \<Object\> options | You supply parameters via an options object with [predefined option names](#options-1). |
 
 ### Options
@@ -327,7 +327,7 @@ the layer.
 #### Default options
 An example showcasing default GeoJSON output when no options are provided.
 ``` html
-<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-meta name="projection" content="OSMTILE"></map-meta>
    <map-meta name="cs" content="gcrs"></map-meta>
@@ -355,10 +355,10 @@ An example showcasing default GeoJSON output when no options are provided.
          </table>
       </map-properties>
    </map-feature>
-</layer->
+</map-layer>
 <script>
 window.onload = (event) => {
-   let output = mapml2geojson(document.querySelector('layer-'))
+   let output = mapml2geojson(document.querySelector('map-layer'))
 };
 </script>
 ```

docs/api/layer-api.md

@@ -19,14 +19,14 @@ The checked property can't be changed if the disabled property is set.
 To set the checked state of a layer to on:
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 layer.checked = true; // valid values are true | false
 ```
 
 To read the checked state of the layer:
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 let isChecked = layer.checked;
 ```
 ---
@@ -43,14 +43,14 @@ user interface.
 To set/update whether the layer is "hidden":
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 layer.hidden = true; // valid values are true | false
 ```
 
-To get the `<layer->`'s hidden value:
+To get the `<map-layer>`'s hidden value:
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 let isHidden = layer.hidden;
 ```
 ---
@@ -71,20 +71,20 @@ map viewport.
 ### label
 `HTMLLayerElement.label` reflects the `label` content attribute, and specifies a 
 fallback accessible name for the layer, if the accessible name is not provided 
-via a local `<map-title>` element child of the `<layer->` element, or in the 
+via a local `<map-title>` element child of the `<map-layer>` element, or in the 
 `<map-head>` of a remote MapML document, loaded via the `src` URL value, respectively.
 
-To set/update the `<layer->`'s label:
+To set/update the `<map-layer>`'s label:
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 layer.label = "New Title";
 ```
 
-To get the `<layer->`'s label value:
+To get the `<map-layer>`'s label value:
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 let label = layer.label;
 ```
 ---
@@ -94,34 +94,34 @@ let label = layer.label;
 MapML document for the layer.  The src property may be undefined if the layer
 contains inline content.  If the src property returns a value, any inline content 
 will be ignored.
-To set/update the `<layer->`'s src:
+To set/update the `<map-layer>`'s src:
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 layer.src = "https://example.org";
 ```
 
-To get the `<layer->`'s src value (URL):
+To get the `<map-layer>`'s src value (URL):
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 let url = layer.src;
 ```
 ---
 ### opacity
 `HTMLLayerElement.opacity` provides read/write access to the `opacity` value, and is reflected in the layer control for each layer, under "Opacity".
 
-To set/update the `<layer->`'s opacity:
+To set/update the `<map-layer>`'s opacity:
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 layer.opacity = 0.5; // valid values from 0 to 1
 ```
 
-To get the `<layer->`'s opacity value:
+To get the `<map-layer>`'s opacity value:
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 let opacity = layer.opacity;
 ```
 
@@ -133,7 +133,7 @@ let opacity = layer.opacity;
 zoom level in which the extent fits completely.
 
 ```js
-let layer = document.querySelector('layer-');
+let layer = document.querySelector('map-layer');
 layer.zoomTo();
 ```
 
@@ -145,15 +145,15 @@ layer.zoomTo();
 
 | Function | Returns | Description |
 |----------|---------|-------------|
-| <code>mapml2geojson(\<Object\> options)</code> | A JavaScript (GeoJSON) feature collection object | This function transforms the `<feature>` element children of a `<layer->` element to a GeoJSON FeatureCollection object. You supply [options](#options) to control the transformation. This function must be used inside a windows.onload event.
+| <code>mapml2geojson(\<Object\> options)</code> | A JavaScript (GeoJSON) feature collection object | This function transforms the `<feature>` element children of a `<map-layer>` element to a GeoJSON FeatureCollection object. You supply [options](#options) to control the transformation. This function must be used inside a windows.onload event.
 
 :::caution
 
 `mapml2geojson` must be called inside a windows.onload event to work properly. i.e.
 
 ``` js
 window.onload = (event) => {
-  let layer = document.querySelector('layer-');
+  let layer = document.querySelector('map-layer');
   layer.mapml2geojson();
 };
 ```
@@ -202,7 +202,7 @@ so the resulting JSON SHOULD (somehow, tbd) be tagged with the datum in use by t
 #### Default options
 An example showcasing default GeoJSON output when no options are provided.
 ``` html
-<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-meta name="projection" content="OSMTILE"></map-meta>
    <map-meta name="cs" content="gcrs"></map-meta>
@@ -230,10 +230,10 @@ An example showcasing default GeoJSON output when no options are provided.
          </table>
       </map-properties>
    </map-feature>
-</layer->
+</map-layer>
 <script>
 window.onload = (event) => {
-   let layer = document.querySelector('layer-');
+   let layer = document.querySelector('map-layer');
    let output = layer.mapml2geojson();
 };
 </script>

docs/api/map-feature-api.md

@@ -313,7 +313,7 @@ None ([undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere
 
 ``` js
 window.onload = (event) => {
-  let layer = document.querySelector('layer-');
+  let layer = document.querySelector('map-layer');
   layer.mapml2geojson();
 };
 ```
@@ -366,7 +366,7 @@ A GeoJSON object representing the feature
 #### Default options
 An example showcasing default GeoJSON output when no options are provided.
 ``` html
-<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-meta name="projection" content="OSMTILE"></map-meta>
    <map-meta name="cs" content="gcrs"></map-meta>
@@ -394,10 +394,10 @@ An example showcasing default GeoJSON output when no options are provided.
          </table>
       </map-properties>
    </map-feature>
-</layer->
+</map-layer>
 <script>
 window.onload = (event) => {
-   let layer = document.querySelector('layer-');
+   let layer = document.querySelector('map-layer');
    let output = layer.mapml2geojson();
 };
 </script>

docs/api/map-link-api.md

@@ -34,7 +34,7 @@ This event is fired when a tile is first being created, the event contains the f
 The map:
 ```html
 <mapml-viewer projection="OSMTILE" zoom="0" lat="45" lon="-75" controls>
-  <layer- label="Custom Tiles" checked>
+  <map-layer label="Custom Tiles" checked>
     <map-meta name="zoom" content="min=0,max=23" ></map-meta>
     <map-extent units="OSMTILE" checked hidden>
       <map-input name="zoomLevel" type="zoom" min="0" max="23" value="1" ></map-input>
@@ -43,14 +43,14 @@ The map:
       <!-- listen for the tileloadstart event on this element -->
       <map-link rel="tile" title="" tref="" ></map-link>
     </map-extent>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 ```
 
 
 The JavaScript for creating custom tiles:
 ```js
-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 customTile = document.createElement("p");
       customTile.innerHTML = `x: ${e.detail.x} y: ${e.detail.y} zoom: ${e.detail.zoom}`;