Close #137 Rename the layer- element to map-layer

api/custom-map-ui/bootstrap-ui.html

@@ -45,9 +45,9 @@ <h3>Layers</h3>
         <figure>
           <mapml-viewer id="custom-map" style="width:500px;height: 500px;" projection="CBMTILE" zoom="0" lat="47"
             lon="-92">
-            <layer- label="Canada Base Map - Geometry" src="../../refactoring-temporary/cbmtgeom.mapml" checked>
-            </layer->
-            <layer- label="Fire Danger (forecast)" src="../../refactoring-temporary/fdi.mapml"></layer->
+            <map-layer label="Canada Base Map - Geometry" src="../../refactoring-temporary/cbmtgeom.mapml" checked>
+            </map-layer>
+            <map-layer label="Fire Danger (forecast)" src="../../refactoring-temporary/fdi.mapml"></map-layer>
           </mapml-viewer>
 
           <figcaption class="map-controls">

api/custom-map-ui/custom-css-ui.html

@@ -45,9 +45,9 @@ <h3>Layers</h3>
         <figure>
           <mapml-viewer id="custom-map" style="width:500px;height: 500px;" projection="CBMTILE" zoom="0" lat="47"
             lon="-92">
-            <layer- label="Canada Base Map - Geometry" src="../../refactoring-temporary/cbmtgeom.mapml" checked>
-            </layer->
-            <layer- label="Fire Danger (forecast)" src="../../refactoring-temporary/fdi.mapml"></layer->
+            <map-layer label="Canada Base Map - Geometry" src="../../refactoring-temporary/cbmtgeom.mapml" checked>
+            </map-layer>
+            <map-layer label="Fire Danger (forecast)" src="../../refactoring-temporary/fdi.mapml"></map-layer>
           </mapml-viewer>
 
           <figcaption class="map-controls">

api/custom-map-ui/custom-ui.js

@@ -1,13 +1,13 @@
 CustomUI = {
   initialize: function () {
-    let layers = document.querySelectorAll("layer-");
+    let layers = document.querySelectorAll("map-layer");
     let map = document.querySelector("mapml-viewer");
 
     let mapObserver = new MutationObserver((m) => {
       m.forEach((mut) => {
         if (mut.type === "childList") {
           mut.addedNodes.forEach((l) => {
-            if (l.tagName === "LAYER-") {
+            if (l.tagName === "MAP-LAYER") {
               CustomUI.addLayer(l);
             }
           });

api/custom-map-ui/geolocation-search-ui.html

@@ -25,7 +25,7 @@
     </div>
 
     <mapml-viewer projection="OSMTILE" zoom="4" lat="58.276703" lon="-103.710938" controls controlslist="nofullscreen" id="map">
-        <layer- label="OpenStreetMap" src="../../refactoring-temporary/osm.mapml" checked></layer->
+        <map-layer label="OpenStreetMap" src="../../refactoring-temporary/osm.mapml" checked></map-layer>
     </mapml-viewer>
 
     <script>

api/custom-map-ui/geoname-search-ui.html

@@ -26,7 +26,7 @@
     </div>
 
     <mapml-viewer projection="OSMTILE" zoom="4" lat="58.276703" lon="-103.710938" controls controlslist="nofullscreen" id="map">
-        <layer- label="OpenStreetMap" src="../../refactoring-temporary/osm.mapml" checked></layer->
+        <map-layer label="OpenStreetMap" src="../../refactoring-temporary/osm.mapml" checked></map-layer>
     </mapml-viewer>
 
     <script>

api/geojson/index.html

@@ -100,7 +100,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; 
        } 
@@ -116,15 +116,15 @@
        supported, or if javascript is disabled. This needs to be defined separately 
        from the above, because the `:not(:defined)` selector invalidates the entire 
        declaration in browsers that do not support it. */ 
-       layer- { 
+       map-layer { 
          display: none; 
        } 
      </style> 
      <noscript> 
        <style> 
          /* Ensure fallback content (children of the map element) is displayed if 
          custom/built-in elements is supported but javascript is disabled. */ 
-         mapml-viewer:not(:defined) > :not(layer-) { 
+         mapml-viewer:not(:defined) > :not(map-layer) { 
            display: initial; 
          } 
 
@@ -140,14 +140,14 @@
   </head>
   <body>
     <mapml-viewer projection="OSMTILE" zoom="2" lat="45" lon="-90" controls>
-      <layer- label="United States - The National Map" checked>
+      <map-layer label="United States - The National Map" checked>
         <map-extent units="OSMTILE" checked hidden>
           <map-input name="TileMatrix" type="zoom" value="18" min="0" max="16"></map-input>
           <map-input name="TileCol" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
           <map-input name="TileRow" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
           <map-link rel="tile" tref="https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}"></map-link>
         </map-extent>
-      </layer->
+      </map-layer>
     </mapml-viewer>
   <script src="https://leafletjs.com/examples/choropleth/us-states.js"></script>
 <script src="canada.js"></script>

api/map-feature/index.html

@@ -100,17 +100,17 @@
         document.querySelector('map-feature').zoomTo();
       }
       function removeMan() {
-        document.querySelector('layer-[label="Two Hat Man"]').remove();
+        document.querySelector('map-layer[label="Two Hat Man"]').remove();
         toggleDisabled();
       }
     </script>
     <template id="projection">
       <map-meta name="projection" content="OSMTILE"></map-meta>
     </template>
     <template id="empty-layer">
-      <layer-  label="Empty" checked>
+      <map-layer  label="Empty" checked>
         <map-meta name="projection" content="OSMTILE"></map-meta>
-      </layer->
+      </map-layer>
     </template>
 
     <template id="hatman">
@@ -143,10 +143,10 @@
 
 
     <mapml-viewer projection="OSMTILE" zoom="1" lat="0" lon="0" controls>
-      <layer- label="OSM" src="../../refactoring-temporary/osm.mapml" checked></layer->
-<!--      <layer- id="target-layer" label="Empty" checked>
+      <map-layer label="OSM" src="../../refactoring-temporary/osm.mapml" checked></map-layer>
+<!--      <map-layer id="target-layer" label="Empty" checked>
         <map-meta name="projection" content="OSMTILE"></map-meta>
-      </layer->-->
+      </map-layer>-->
     </mapml-viewer>
   <button id="add" onclick="_doMan('add')">Add feature</button>
     <button id="focus" disabled onclick="_doMan('focus')">Focus feature</button>

api/pwa/file-handling/README.md

@@ -132,15 +132,15 @@ In this post, we will not dive into all the details, so I will just show the sni
 ...
 // Create the map with one layer
 <mapml-viewer zoom="2" lat="0" lon="0" controls controlslist="geolocation">
-  <layer- label="OpenStreetMap" checked >
+  <map-layer label="OpenStreetMap" checked >
     <map-link rel="license" href="https://www.openstreetmap.org/copyright" title="© OpenStreetMap contributors CC BY-SA"></map-link>
     <map-extent units="OSMTILE" checked>
       <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
       <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
       <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
       <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
     </map-extent>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 ...
 ```

api/pwa/file-handling/src/main-app.js

@@ -135,15 +135,15 @@ mapml-viewer {
 <label for="loadfile">Load GeoJSON</label>
 </div>
 <mapml-viewer zoom="2" lat="0" lon="0" controls controlslist="geolocation">
-  <layer- label="OpenStreetMap" checked >
+  <map-layer label="OpenStreetMap" checked >
     <map-link rel="license" href="https://www.openstreetmap.org/copyright" title="© OpenStreetMap contributors CC BY-SA"></map-link>
     <map-extent units="OSMTILE" checked>
       <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
       <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
       <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
       <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
     </map-extent>
-  </layer->
+  </map-layer>
 </mapml-viewer>
 <a class="credits" href="https://www.flaticon.com/free-icons/parchment" title="parchment icons">Parchment icons created by Freepik - Flaticon</a>
 </div>

change-projection/default-projection/index.html

@@ -23,7 +23,7 @@
   </head>
   <body>
     <mapml-viewer zoom="5" lon="-97.288195" lat="56.555669"  controls>
-    <layer- checked>
+    <map-layer checked>
       <map-meta name="extent" content="top-left-easting=-19959237, top-left-northing=13854059, bottom-right-easting=-1174073, bottom-right-northing=4647371"></map-meta>
       <map-title>Topo base</map-title>
       <map-extent units="OSMTILE" label="Toprama - Mercator" checked>
@@ -41,8 +41,8 @@
           <map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
           <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
           <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
-        </map-extent>        </layer->
-      <layer- label="Projection not specified"  checked>
+        </map-extent>        </map-layer>
+      <map-layer label="Projection not specified"  checked>
       <map-feature zoom="14">
         <map-featurecaption>Copied OSMTILE pcrs location</map-featurecaption>
         <map-properties>
@@ -55,7 +55,7 @@ <h2>Copied OSMTILE pcrs location</h2>
           </map-point>
         </map-geometry>
       </map-feature>
-      </layer->
+      </map-layer>
     </mapml-viewer>
 </body>
 </html>

change-projection/projection-extent-fallback/index.html

@@ -32,7 +32,7 @@
   </head>
   <body>
     <mapml-viewer zoom="4" lon="-97.288195" lat="56.555669"  controls projection="OSMTILE">
-      <layer- label="Projection changer"  checked>
+      <map-layer label="Projection changer"  checked>
         <map-extent label="CBMT - Mercator" checked units="OSMTILE" >
           <map-input name="z" type="zoom" value="15" min="0" max="15"></map-input>
           <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="32768"></map-input>
@@ -46,7 +46,7 @@
           <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
           <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
         </map-extent>    
-      </layer->
+      </map-layer>
     </mapml-viewer>
     <button name="change" autofocus type="button" onclick="changeProjection()">Change map projection</button>
 </body>

change-projection/projection-negotiation/index.html

@@ -25,14 +25,14 @@
     </head>
   <body>
     <template id="negotiable-map-content">
-      <layer- src="msi-tiles-osmtile.mapml" checked></layer->
+      <map-layer src="msi-tiles-osmtile.mapml" checked></map-layer>
     </template>
     <p><a href="msi-tiles-osmtile.mapml" target="_blank">Minimum Snow and Ice Probability (view source in new tab)</a> <button onclick="addToMaps()" >Add to single source to both maps</button></p>
   <mapml-viewer projection="CBMTILE" zoom="4" lat="60" lon="-90" controls>
-    <layer- label="CBMT" src="../../refactoring-temporary/cbmtile-cbmt.mapml" checked hidden></layer->
+    <map-layer label="CBMT" src="../../refactoring-temporary/cbmtile-cbmt.mapml" checked hidden></map-layer>
   </mapml-viewer>
   <mapml-viewer projection="OSMTILE" zoom="4" lat="60" lon="-90" controls>
-    <layer- label="CBMT" src="../../refactoring-temporary/osmtile-cbmt.mapml" checked hidden></layer->
+    <map-layer label="CBMT" src="../../refactoring-temporary/osmtile-cbmt.mapml" checked hidden></map-layer>
   </mapml-viewer>
   </body>
 </html>

change-projection/zoomin-zoomout/mapml-viewer/index.html

@@ -48,7 +48,7 @@
   </head>
   <body>
     <mapml-viewer projection="CBMTILE" zoom="8" lat="48.840422" lon="-101.219978" controls>
-      <layer- label="CBMT" src="../cbmt-changeProjection.mapml" checked ></layer->
+      <map-layer label="CBMT" src="../cbmt-changeProjection.mapml" checked ></map-layer>
     </mapml-viewer>
   </body>
 </html>

change-projection/zoomin-zoomout/web-map/index.html

@@ -48,7 +48,7 @@
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="8" lat="48.840422" lon="-101.219978" controls>
-      <layer- label="CBMT" src="../cbmt-changeProjection.mapml" checked></layer->
+      <map-layer label="CBMT" src="../cbmt-changeProjection.mapml" checked></map-layer>
     </map>
   </body>
 </html>

custom-projections/Arctic-SDI/index.html

@@ -36,8 +36,8 @@
   </head>
   <body>
     <mapml-viewer projection="EPSG3573" zoom="2" lat="90" lon="-90" controls>
-<!--      <layer- label="Style-based approach to linking the Arctic nations SDIs" src="canada/alternates.mapml" checked></layer->-->
-      <layer- label="Explicit links to Canada's Arctic SDI Partners" src='canada/links.mapml' checked></layer->
+<!--      <map-layer label="Style-based approach to linking the Arctic nations SDIs" src="canada/alternates.mapml" checked></map-layer>-->
+      <map-layer label="Explicit links to Canada's Arctic SDI Partners" src='canada/links.mapml' checked></map-layer>
     </mapml-viewer>
   </body>
 </html>

custom-projections/Atlas-of-Canada/index.html

@@ -23,7 +23,7 @@
   </head>
   <body>
     <mapml-viewer projection="ATLAS_POLAR_MAP" zoom="2" lat="83.48919" lon="-87.7687" controls>
-      <layer- label="Atlas of Canada Polar Wall Map" checked>
+      <map-layer label="Atlas of Canada Polar Wall Map" checked>
         <map-link rel="license" title="Canadian Federal Geospatial Platform" href="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN/MapServer/"></map-link>
         <map-extent units="ATLAS_POLAR_MAP" checked hidden>
           <map-input type="zoom" name="z" min="0" max="6" value="6" ></map-input>
@@ -32,8 +32,8 @@
           <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN/MapServer/tile/{z}/{y}/{x}/"></map-link>
 <!--          <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN_A/MapServer/tile/{z}/{y}/{x}/"></map-link>-->
         </map-extent>
-      </layer->
-      <layer- label="Annotation" src="annotation.mapml" checked></layer->
+      </map-layer>
+      <map-layer label="Annotation" src="annotation.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>

custom-projections/BNG/index.html

@@ -63,15 +63,15 @@
          /* 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; 
        } 
        /* Ensure inline layer content is hidden if custom/built-in elements isn't 
        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> 
@@ -93,7 +93,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> 
@@ -102,17 +102,17 @@
   <body>
     <!-- when using  -->
     <mapml-viewer zoom="0" lat="54.41338" lon="-3.19995" controls 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" checked hidden>
           <map-input  name="z" type="zoom" min="0" max="9"></map-input>
           <map-input  name="y" type="location" units="tilematrix" axis="row" ></map-input>
           <map-input  name="x" type="location" units="tilematrix" axis="column"></map-input>
           <map-link rel="tile"   tref="https://api.os.uk/maps/raster/v1/wmts?key=TtPU7xWvj7AmV6uePZRYWFXuKVHzRTq7&tileMatrixSet=EPSG:27700&version=1.0.0&style=default&layer=Road_27700&service=WMTS&request=GetTile&tileCol={x}&tileRow={y}&tileMatrix={z}"></map-link>
         </map-extent>        
-      </layer->
-      <layer- checked src="bgs-surficial-geology.mapml"></layer->
-      <layer- label="BNG Shrink/Swell WMS" >
+      </map-layer>
+      <map-layer checked src="bgs-surficial-geology.mapml"></map-layer>
+      <map-layer label="BNG Shrink/Swell WMS" >
         <map-meta name="projection" content="BNG"></map-meta>
         <map-extent units="BNG" checked hidden>
             <map-input  name="xmin" type="location" rel="map" position="top-left" axis="easting" units="pcrs" min="240755" max="261199" ></map-input>
@@ -123,7 +123,7 @@
             <map-input  name="h" type="height" min="1" max="10000" ></map-input>
             <map-link rel="image" tref="https://ogc.bgs.ac.uk/cgi-bin/BGS_1GE_Geology/wms?version=1.3.0&request=GetMap&layers=GBR_Kilmarnock_BGS_50k_ShrinkSwell&styles=&format=image/png&crs=epsg:27700&BBOX={xmin},{ymin},{xmax},{ymax}&WIDTH={w}&HEIGHT={h}"></map-link>
         </map-extent>      
-      </layer->
+      </map-layer>
     </mapml-viewer>
   </body>
 </html>

custom-projections/bc/index.html

@@ -23,16 +23,16 @@
   </head>
   <body>
     <mapml-viewer zoom="3" lon="-125.667383" lat="54.60128" controls projection="BCTILE">
-      <layer- label="BC basemap" checked>
+      <map-layer label="BC basemap" checked>
         <map-link rel="license" title="Government of British Columbia" href="https://maps.gov.bc.ca/arcserver/rest/services/province/albers_cache/MapServer/wmts/"></map-link>
         <map-extent units="BCTILE" checked hidden>
           <map-input  type="zoom" name="z" min="0" max="11" value="3"></map-input>
           <map-input  type="location" name="x" axis="column" units="tilematrix" min="42" max="50"></map-input>
           <map-input  type="location" name="y" axis="row" units="tilematrix" min="56" max="64"></map-input>
           <map-link rel="tile" tref="https://maps.gov.bc.ca/arcgis/rest/services/province/albers_cache/MapServer/WMTS/tile/1.0.0/province_albers_cache/default/default028mm/{z}/{y}/{x}.jpg"></map-link>
         </map-extent>
-      </layer->
-      <layer- label="British Columbia Geological Survey" src="bcgs.mapml" checked></layer->
+      </map-layer>
+      <map-layer label="British Columbia Geological Survey" src="bcgs.mapml" checked></map-layer>
     </mapml-viewer>
   </body>
 </html>

datacube/index.html

@@ -9,9 +9,9 @@
     </head>
   <body>
   <mapml-viewer projection="CBMTILE" zoom="4" lat="60" lon="-90" controls>
-    <layer- label="CBMT" src="../refactoring-temporary/cbmtile-cbmt.mapml" checked hidden></layer->
-    <layer- label="Minimum Snow and Ice" src="msi.mapml" checked></layer->
-    <layer- label="Permanent snow and ice (prob. 94% or more) WMS GetMap" src="msi-94-plus.mapml" checked></layer->
+    <map-layer label="CBMT" src="../refactoring-temporary/cbmtile-cbmt.mapml" checked hidden></map-layer>
+    <map-layer label="Minimum Snow and Ice" src="msi.mapml" checked></map-layer>
+    <map-layer label="Permanent snow and ice (prob. 94% or more) WMS GetMap" src="msi-94-plus.mapml" checked></map-layer>
   </mapml-viewer>
   </body>
 </html>

global.css

@@ -30,7 +30,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;
 }
@@ -42,6 +42,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;
 }