Add @maps4html/mapml as dependency. Add copy script, update stencil

config to invoke copy of mapml artifacts to dist output directory.

packages/web/package.json

@@ -47,6 +47,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@cdssnc/gcds-tokens": "^1.19.1",
     "@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/scripts/copyMapMLFiles.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+const path = require('path');
+
+// Define paths
+const source = path.join(__dirname, '../../../node_modules/@maps4html/mapml/dist');
+const destination = path.join(__dirname, '../dist/gcds/gcds-map');
+
+// Function to copy files
+function copyDirectory(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  fs.readdirSync(src).forEach((item) => {
+    const srcPath = path.join(src, item);
+    const destPath = path.join(dest, item);
+
+    if (fs.lstatSync(srcPath).isDirectory()) {
+      copyDirectory(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  });
+}
+
+// Copy and rename
+try {
+  copyDirectory(source, destination);
+  console.log('Copied @maps4html/mapml to dist/gcds/gcds-map successfully.');
+} catch (error) {
+  console.error('Error copying files:', error);
+}

packages/web/src/index.html

@@ -106,7 +106,7 @@
 
       <hr class="my-550" />
     <!-- GCDS Map with a single map layer -->
-    <gcds-map lat="45.4215" lon="-75.6972" zoom="10" projection="OSMTILE">
+    <gcds-map lat="45.4215" lon="-75.6972" zoom="10" projection="OSMTILE" controls controlslist="geolocation">
       <!-- Canada Base Map - Transportation (CBMT) layer -->
       <gcds-map-layer
         label="Canada Base Map - Transportation (CBMT)"

packages/web/stencil.config.ts

@@ -5,6 +5,7 @@ import { inlineSvg } from 'stencil-inline-svg';
 import { reactOutputTarget } from '@stencil/react-output-target';
 import { angularOutputTarget } from '@stencil/angular-output-target';
 import { vueOutputTarget } from '@stencil/vue-output-target';
+import { execSync } from 'child_process';
 
 export const config: Config = {
   namespace: 'gcds',
@@ -49,6 +50,18 @@ export const config: Config = {
     }),
     inlineSvg(),
     sass(),
+    {
+      name: 'postBuildCopy',
+      async buildEnd() {
+        try {
+          // copy MapML dependency
+          execSync('node ./scripts/copyMapMLFiles.js', { stdio: 'inherit' });
+          console.log('MapML files copied successfully to dist/gcds/gcds-map');
+        } catch (err) {
+          console.error('Error copying MapML files:', err);
+        }
+      },
+    }
   ],
   testing: {
     transform: {