Make mapml a dependency, not a devDependency, since it must be present

at runtime / installed with product

Revert <layer-> to <map-layer> refactoring, because that code has not
been released yet

Author: prushforth

packages/web/package.json

@@ -38,7 +38,8 @@
     "@storybook/addon-a11y": "^8.0.9",
     "@storybook/addons": "^7.6.17",
     "@storybook/test": "^8.0.9",
-    "@storybook/theming": "^8.0.9"
+    "@storybook/theming": "^8.0.9",
+    "@maps4html/mapml": "^0.14.1"
   },
   "devDependencies": {
     "@axe-core/puppeteer": "^4.7.3",
@@ -47,7 +48,6 @@
     "@babel/preset-typescript": "^7.21.0",
     "@cdssnc/gcds-tokens": "^1.20.2",
     "@fortawesome/fontawesome-free": "^6.3.0",
-    "@maps4html/mapml": "^0.14.1",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/postcss": "^2.1.0",
     "@stencil/sass": "^3.0.0-0",

packages/web/src/components/gcds-map/gcds-map.tsx

@@ -27,7 +27,7 @@ export class GcdsMap {
     // Reference the <mapml-viewer> element
     this.mapViewer = this.el.shadowRoot.querySelector('mapml-viewer') as HTMLMapmlViewerElement;
 
-    // Handle <map-layer> readiness once the map is rendered
+    // Handle <layer-> readiness once the map is rendered
     this.handleLayerReady();
   }
 
@@ -67,13 +67,13 @@ export class GcdsMap {
   }
 
   handleLayerReady() {
-    // Wait for the 'map-layer' custom element to be defined
-    customElements.whenDefined('map-layer').then(() => {
-      // Find all <map-layer> elements inside the mapml-viewer
-      const layers = Array.from(this.el.shadowRoot.querySelectorAll('map-layer'));
+    // Wait for the 'layer-' custom element to be defined
+    customElements.whenDefined('layer-').then(() => {
+      // Find all <layer-> elements inside the mapml-viewer
+      const layers = Array.from(this.el.shadowRoot.querySelectorAll('layer-'));
 
       layers.forEach((layer) => {
-        // Now we know the <map-layer> element is fully defined, call whenReady()
+        // Now we know the <layer-> element is fully defined, call whenReady()
         (layer as any).whenReady().then(() => {
           // Check for <map-extent> in the layer's shadow DOM and add 'checked' attribute
           // this is necessary only for geogratis MapML resources, but harmless
@@ -106,13 +106,13 @@ export class GcdsMap {
           controlslist={this.controlslist ? this.controlslist : undefined}
         >
           {layers.map((layer) => (
-            <map-layer
+            <layer-
               label={layer.getAttribute('label')}
               src={layer.getAttribute('src')}
               hidden={layer.getAttribute('hidden') === 'true' ? 'hidden' : undefined}
               checked={layer.getAttribute('checked') === 'true' ? 'checked' : undefined}
               opacity={layer.getAttribute('opacity')}
-            ></map-layer>
+            ></layer->
           ))}
         </mapml-viewer>
         <script type="module" src="./dist/gcds/gcds-map/mapml.js"></script>