diff --git a/Gruntfile.js b/Gruntfile.js
index 9914c74f1..4c40f6bf1 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -23,22 +23,8 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          'dist/mapml.js':        ['<%= rollup.main.dest %>'],
-          'dist/web-map.js':      ['src/web-map.js'],
-          'dist/mapml-viewer.js': ['src/mapml-viewer.js'],
-          'dist/map-caption.js':  ['src/map-caption.js'],
-          'dist/map-feature.js':  ['src/map-feature.js'],
-          'dist/map-extent.js':   ['src/map-extent.js'],
-          'dist/map-input.js':    ['src/map-input.js'],
-          'dist/map-select.js':    ['src/map-select.js'],
-          'dist/map-link.js':    ['src/map-link.js'],
-          'dist/map-style.js':    ['src/map-style.js'],
-          'dist/map-area.js':     ['src/map-area.js'],
-          'dist/layer.js':        ['src/layer.js'],
-          'dist/leaflet.js':      ['dist/leaflet-src.js',
-                                   'dist/proj4-src.js',
-                                   'dist/proj4leaflet.js',
-                                   'dist/L.Control.Locate.js']
+          'dist/mapml-viewer.js':        ['<%= rollup.main.dest %>'],
+          'dist/web-map.js':             ['<%= rollup.webmap.dest %>']
         } 
       }
     },
@@ -187,7 +173,7 @@ module.exports = function(grunt) {
     },
     clean: {
       dist: ['dist'],
-      tidyup: ['dist/leaflet-src.js','dist/proj4-src.js','dist/proj4leaflet.js','dist/L.Control.Locate.js'],
+      tidyup: ['dist/leaflet-src.js','dist/proj4-src.js','dist/proj4leaflet.js','dist/L.Control.Locate.js','dist/mapmlviewer.js','dist/webmap.js'],
       experiments: {
         options: {force: true},
         src: ['../experiments/dist']
@@ -207,13 +193,17 @@ module.exports = function(grunt) {
     },
     rollup: {
       options: {
-        format: 'iife',
+        format: 'es',
         plugins: [nodeResolve()],
         external: './pmtilesRules.js'
       },
       main: {
-        dest: 'dist/mapml.js',
+        dest: 'dist/mapmlviewer.js',
         src: 'src/mapml/index.js' // Only one source file is permitted
+      },
+      webmap: {
+        dest: 'dist/webmap.js',
+        src: 'src/mapml/index-web-map.js' // Only one source file is permitted
       }
     },
     prettier: {
diff --git a/src/layer.js b/src/layer.js
index 7db8fdf94..b814f84b0 100644
--- a/src/layer.js
+++ b/src/layer.js
@@ -1,5 +1,6 @@
-import './leaflet.js'; // a lightly modified version of Leaflet for use as browser module
-import './mapml.js'; // modified URI to make the function a property of window scope (possibly a bad thing to do).
+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 {
   static get observedAttributes() {
@@ -67,7 +68,7 @@ export class MapLayer extends HTMLElement {
     }
     return this._layer
       ? Object.assign(
-          M._convertAndFormatPCRS(
+          Util._convertAndFormatPCRS(
             this._layer.bounds,
             M[this.getProjection()],
             this.getProjection()
@@ -165,7 +166,7 @@ export class MapLayer extends HTMLElement {
     /* jshint ignore:start */
     this.#hasConnected = true;
     /* jshint ignore:end */
-    this._createLayerControlHTML = M._createLayerControlHTML.bind(this);
+    this._createLayerControlHTML = createLayerControlHTML.bind(this);
     const doConnected = this._onAdd.bind(this);
     const doRemove = this._onRemove.bind(this);
     this.parentElement
@@ -241,7 +242,7 @@ export class MapLayer extends HTMLElement {
             this.checkForPreferredContent();
           })
           .then(() => {
-            this._layer = M.mapMLLayer(new URL(this.src, base).href, this, {
+            this._layer = mapMLLayer(new URL(this.src, base).href, this, {
               projection: this.getProjection(),
               opacity: this.opacity
             });
@@ -278,7 +279,7 @@ export class MapLayer extends HTMLElement {
             this.checkForPreferredContent();
           })
           .then(() => {
-            this._layer = M.mapMLLayer(null, this, {
+            this._layer = mapMLLayer(null, this, {
               projection: this.getProjection(),
               opacity: this.opacity
             });
@@ -398,7 +399,7 @@ export class MapLayer extends HTMLElement {
     let projection = this.parentElement.projection;
     if (mapml.querySelector('map-meta[name=projection][content]')) {
       projection =
-        M._metaContentToObject(
+        Util._metaContentToObject(
           mapml
             .querySelector('map-meta[name=projection]')
             .getAttribute('content')
@@ -793,13 +794,13 @@ export class MapLayer extends HTMLElement {
 
       let maxZoom = extent.zoom.maxZoom,
         minZoom = extent.zoom.minZoom;
-      map.setView(center, M.getMaxZoom(layerBounds, map, minZoom, maxZoom), {
+      map.setView(center, Util.getMaxZoom(layerBounds, map, minZoom, maxZoom), {
         animate: false
       });
     });
   }
   mapml2geojson(options = {}) {
-    return M.mapml2geojson(this, options);
+    return Util.mapml2geojson(this, options);
   }
   pasteFeature(feature) {
     switch (typeof feature) {
diff --git a/src/map-area.js b/src/map-area.js
index ae436f9d0..747f775a0 100644
--- a/src/map-area.js
+++ b/src/map-area.js
@@ -1,6 +1,3 @@
-import './leaflet.js'; // a lightly modified version of Leaflet for use as browser module
-import './mapml.js'; // refactored URI usage, replaced with URL standard
-
 export class MapArea extends HTMLAreaElement {
   static get observedAttributes() {
     return ['coords', 'alt', 'href', 'shape', 'rel', 'type', 'target'];
diff --git a/src/map-extent.js b/src/map-extent.js
index d4d5979d4..b65a568be 100644
--- a/src/map-extent.js
+++ b/src/map-extent.js
@@ -1,3 +1,7 @@
+import { Util } from './mapml/utils/Util';
+import { extentLayer } from './mapml/layers/ExtentLayer';
+import { createLayerControlExtentHTML } from './mapml/elementSupport/extents/createLayerControlForExtent';
+
 /* global M */
 export class MapExtent extends HTMLElement {
   static get observedAttributes() {
@@ -54,7 +58,7 @@ export class MapExtent extends HTMLElement {
   get extent() {
     const getExtent = (extent) => {
       return Object.assign(
-        M._convertAndFormatPCRS(
+        Util._convertAndFormatPCRS(
           extent._extentLayer.bounds,
           M[extent.units],
           extent.units
@@ -121,16 +125,16 @@ export class MapExtent extends HTMLElement {
       center = map.options.crs.unproject(bounds.getCenter(true)),
       maxZoom = extent.zoom.maxZoom,
       minZoom = extent.zoom.minZoom;
-    map.setView(center, M.getMaxZoom(bounds, map, minZoom, maxZoom), {
+    map.setView(center, Util.getMaxZoom(bounds, map, minZoom, maxZoom), {
       animate: false
     });
   }
 
   getMapEl() {
-    return M.getClosest(this, 'mapml-viewer,map[is=web-map]');
+    return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return M.getClosest(this, 'layer-');
+    return Util.getClosest(this, 'layer-');
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (this.#hasConnected /* jshint ignore:line */) {
@@ -226,7 +230,7 @@ export class MapExtent extends HTMLElement {
     // Always call super first in constructor
     super();
     this._createLayerControlExtentHTML =
-      M._createLayerControlExtentHTML.bind(this);
+      createLayerControlExtentHTML.bind(this);
     this._changeHandler = this._handleChange.bind(this);
   }
   async connectedCallback() {
@@ -257,7 +261,7 @@ export class MapExtent extends HTMLElement {
     // this._opacity is used to record the current opacity value (with or without updates),
     // the initial value of this._opacity should be set as opacity attribute value, if exists, or the default value 1.0
     this._opacity = this.opacity || 1.0;
-    this._extentLayer = M.extentLayer({
+    this._extentLayer = extentLayer({
       opacity: this.opacity,
       crs: M[this.units],
       extentZIndex: Array.from(
@@ -493,12 +497,12 @@ export class MapExtent extends HTMLElement {
 
     // initialize bounds from this.scope > map-meta
     let bounds = this.querySelector(':scope > map-meta[name=extent][content]')
-      ? M.getBoundsFromMeta(this) // TODO rewrite this pile of doo doo
+      ? Util.getBoundsFromMeta(this) // TODO rewrite this pile of doo doo
       : undefined;
 
     // initialize zoom bounds from this.scope > map-meta
     let zoomBounds = this.querySelector(':scope > map-meta[name=zoom][content]')
-      ? M.getZoomBoundsFromMeta(this) // TODO rewrite this pile of doo doo
+      ? Util.getZoomBoundsFromMeta(this) // TODO rewrite this pile of doo doo
       : undefined;
 
     // bounds should be able to be calculated unconditionally, not depend on map-extent.checked
diff --git a/src/map-feature.js b/src/map-feature.js
index 9a78d6c24..c8c0c4fe1 100644
--- a/src/map-feature.js
+++ b/src/map-feature.js
@@ -1,3 +1,5 @@
+import { Util } from './mapml/utils/Util';
+
 export class MapFeature extends HTMLElement {
   static get observedAttributes() {
     return ['zoom', 'min', 'max'];
@@ -10,7 +12,8 @@ export class MapFeature extends HTMLElement {
     // for templated or queried features ** native zoom is only used for zoomTo() **
     let meta = {},
       metaEl = this.getMeta('zoom');
-    if (metaEl) meta = M._metaContentToObject(metaEl.getAttribute('content'));
+    if (metaEl)
+      meta = Util._metaContentToObject(metaEl.getAttribute('content'));
     if (this._parentEl.nodeName === 'MAP-LINK') {
       // nativeZoom = zoom attribute || (sd.map-meta zoom 'value'  || 'max') || this._initialZoom
       return +(this.hasAttribute('zoom')
@@ -43,7 +46,8 @@ export class MapFeature extends HTMLElement {
     // for templated or queried features ** native zoom is only used for zoomTo() **
     let meta = {},
       metaEl = this.getMeta('zoom');
-    if (metaEl) meta = M._metaContentToObject(metaEl.getAttribute('content'));
+    if (metaEl)
+      meta = Util._metaContentToObject(metaEl.getAttribute('content'));
     let projectionMinZoom = 0;
     if (this._parentEl.nodeName === 'MAP-LINK') {
       // minZoom = min attribute || sd.map-meta min zoom || map-link minZoom
@@ -82,7 +86,8 @@ export class MapFeature extends HTMLElement {
     // for templated or queried features ** native zoom is only used for zoomTo() **
     let meta = {},
       metaEl = this.getMeta('zoom');
-    if (metaEl) meta = M._metaContentToObject(metaEl.getAttribute('content'));
+    if (metaEl)
+      meta = Util._metaContentToObject(metaEl.getAttribute('content'));
     let projectionMaxZoom =
       this.getMapEl()._map.options.crs.options.resolutions.length - 1;
     if (this._parentEl.nodeName === 'MAP-LINK') {
@@ -129,10 +134,10 @@ export class MapFeature extends HTMLElement {
     }
   }
   getMapEl() {
-    return M.getClosest(this, 'mapml-viewer,map[is=web-map]');
+    return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return M.getClosest(this, 'layer-');
+    return Util.getClosest(this, 'layer-');
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -231,7 +236,7 @@ export class MapFeature extends HTMLElement {
     // layerToRemoveFrom is the L.LayerGroup or L.FeatureGroup to remove this
     // feature from...
     layerToRemoveFrom.removeLayer(this._geometry);
-    // TODO: MOVE THIS LOGIC TO layerToRemoveFrom.removeLayer(M.Geometry)
+    // TODO: MOVE THIS LOGIC TO layerToRemoveFrom.removeLayer(Geometry)
     //    if (layerToRemoveFrom._staticFeature) {
     //      if (layerToRemoveFrom._features[this.zoom]) {
     //        this._removeInFeatureList(this.zoom);
@@ -302,7 +307,7 @@ export class MapFeature extends HTMLElement {
     // the fallback 'gcrs' SHOULD be specified by the MapML spec
     // per https://github.com/Maps4HTML/MapML/issues/257
     return csMeta
-      ? M._metaContentToObject(csMeta.getAttribute('content')).content
+      ? Util._metaContentToObject(csMeta.getAttribute('content')).content
       : 'gcrs';
   }
 
@@ -341,7 +346,7 @@ export class MapFeature extends HTMLElement {
         }
         let topLeft = L.point(bboxExtent[0], bboxExtent[1]);
         let bottomRight = L.point(bboxExtent[2], bboxExtent[3]);
-        let pcrsBound = M.boundsToPCRSBounds(
+        let pcrsBound = Util.boundsToPCRSBounds(
           L.bounds(topLeft, bottomRight),
           zoom,
           map.options.projection,
@@ -360,14 +365,14 @@ export class MapFeature extends HTMLElement {
               pcrsBound.min,
               M[projection].scale(+this.zoom || maxZoom)
             );
-          pcrsBound = M.pixelToPCRSBounds(
+          pcrsBound = Util.pixelToPCRSBounds(
             L.bounds(pixel.subtract(tileCenter), pixel.add(tileCenter)),
             this.zoom || maxZoom,
             projection
           );
         }
         let result = Object.assign(
-          M._convertAndFormatPCRS(
+          Util._convertAndFormatPCRS(
             pcrsBound,
             map.options.crs,
             map.options.projection
@@ -389,14 +394,14 @@ export class MapFeature extends HTMLElement {
         .split(/[<>\ ]/g);
       switch (shape.tagName.toUpperCase()) {
         case 'MAP-POINT':
-          bboxExtent = M._updateExtent(bboxExtent, +data[0], +data[1]);
+          bboxExtent = Util._updateExtent(bboxExtent, +data[0], +data[1]);
           break;
         case 'MAP-LINESTRING':
         case 'MAP-POLYGON':
         case 'MAP-MULTIPOINT':
         case 'MAP-MULTILINESTRING':
           for (let i = 0; i < data.length; i += 2) {
-            bboxExtent = M._updateExtent(bboxExtent, +data[i], +data[i + 1]);
+            bboxExtent = Util._updateExtent(bboxExtent, +data[i], +data[i + 1]);
           }
           break;
         default:
@@ -433,7 +438,7 @@ export class MapFeature extends HTMLElement {
       newZoom = this.zoom;
     } else {
       // if not, calculate the maximum zoom level that can show the feature completely
-      newZoom = M.getMaxZoom(bound, this.getMapEl()._map, minZoom, maxZoom);
+      newZoom = Util.getMaxZoom(bound, this.getMapEl()._map, minZoom, maxZoom);
       if (this.max < newZoom) {
         // if the calculated zoom is greater than the value of max zoom attribute, go with max zoom attribute
         newZoom = this.max;
@@ -495,7 +500,7 @@ export class MapFeature extends HTMLElement {
     } else if (el.querySelector('table')) {
       // setting properties when table presented
       let table = el.querySelector('table').cloneNode(true);
-      json.properties = M._table2properties(table);
+      json.properties = Util._table2properties(table);
     } else {
       // when no table present, strip any possible html tags to only get text
       json.properties = {
@@ -530,11 +535,11 @@ export class MapFeature extends HTMLElement {
       json.geometry.geometries = [];
       for (let shape of shapes) {
         json.geometry.geometries.push(
-          M._geometry2geojson(shape, source, dest, options.transform)
+          Util._geometry2geojson(shape, source, dest, options.transform)
         );
       }
     } else {
-      json.geometry = M._geometry2geojson(
+      json.geometry = Util._geometry2geojson(
         shapes[0],
         source,
         dest,
diff --git a/src/map-input.js b/src/map-input.js
index 3a36e869e..fb11f4da2 100644
--- a/src/map-input.js
+++ b/src/map-input.js
@@ -1,3 +1,10 @@
+import { Util } from './mapml/utils/Util';
+import { ZoomInput } from './mapml/elementSupport/inputs/zoomInput';
+import { HiddenInput } from './mapml/elementSupport/inputs/hiddenInput';
+import { WidthInput } from './mapml/elementSupport/inputs/widthInput';
+import { HeightInput } from './mapml/elementSupport/inputs/heightInput';
+import { LocationInput } from './mapml/elementSupport/inputs/locationInput';
+
 /* global M */
 export class MapInput extends HTMLElement {
   static get observedAttributes() {
@@ -30,14 +37,14 @@ export class MapInput extends HTMLElement {
   //              zoomInput.setAttribute('value', boundsFallback.zoom);
   //            }
   //            let axis = inp.getAttribute('axis'),
-  //              axisBounds = M.convertPCRSBounds(
+  //              axisBounds = Util.convertPCRSBounds(
   //                boundsFallback.bounds,
   //                boundsFallback.zoom,
   //                projection,
-  //                M.axisToCS(axis)
+  //                Util.axisToCS(axis)
   //              );
-  //            inp.setAttribute('min', axisBounds.min[M.axisToXY(axis)]);
-  //            inp.setAttribute('max', axisBounds.max[M.axisToXY(axis)]);
+  //            inp.setAttribute('min', axisBounds.min[Util.axisToXY(axis)]);
+  //            inp.setAttribute('max', axisBounds.max[Util.axisToXY(axis)]);
   //          }
 
   get name() {
@@ -108,7 +115,7 @@ export class MapInput extends HTMLElement {
           // for location, it should fall back by searching upwards: same as for zoom
         } else if (this.parentElement.querySelector('map-meta[name=zoom]')) {
           // fallback map-meta on layer
-          return M._metaContentToObject(
+          return Util._metaContentToObject(
             this.parentElement
               .querySelector('map-meta[name=zoom]')
               .getAttribute('content')
@@ -140,7 +147,7 @@ export class MapInput extends HTMLElement {
           // for location, it should fall back by searching upwards: same as for zoom
         } else if (this.parentElement.querySelector('map-meta[name=zoom]')) {
           // fallback map-meta on layer
-          return M._metaContentToObject(
+          return Util._metaContentToObject(
             this.parentElement
               .querySelector('map-meta[name=zoom]')
               .getAttribute('content')
@@ -173,10 +180,10 @@ export class MapInput extends HTMLElement {
     }
   }
   getMapEl() {
-    return M.getClosest(this, 'mapml-viewer,map[is=web-map]');
+    return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return M.getClosest(this, 'layer-');
+    return Util.getClosest(this, 'layer-');
   }
   attributeChangedCallback(name, oldValue, newValue) {
     this.whenReady()
@@ -269,7 +276,7 @@ export class MapInput extends HTMLElement {
           case 'zoom':
             // input will store the input Class specific to the input type
             this.initialValue = +this.getAttribute('value');
-            this.input = new M.ZoomInput(
+            this.input = new ZoomInput(
               this.name,
               this.min,
               this.max,
@@ -280,7 +287,7 @@ export class MapInput extends HTMLElement {
             break;
           case 'location':
             // input will store the input Class specific to the input type
-            this.input = new M.LocationInput(
+            this.input = new LocationInput(
               this.name,
               this.position,
               this.axis,
@@ -293,15 +300,15 @@ export class MapInput extends HTMLElement {
             break;
           case 'width':
             // input will store the input Class specific to the input type
-            this.input = new M.WidthInput(this.name, this._layer);
+            this.input = new WidthInput(this.name, this._layer);
             break;
           case 'height':
             // input will store the input Class specific to the input type
-            this.input = new M.HeightInput(this.name, this._layer);
+            this.input = new HeightInput(this.name, this._layer);
             break;
           case 'hidden':
             // input will store the input Class specific to the input type
-            this.input = new M.HiddenInput(this.name, this.initialValue);
+            this.input = new HiddenInput(this.name, this.initialValue);
             break;
         }
       })
diff --git a/src/map-link.js b/src/map-link.js
index fbd1a365b..3be2bd175 100644
--- a/src/map-link.js
+++ b/src/map-link.js
@@ -1,3 +1,8 @@
+import { Util } from './mapml/utils/Util';
+import { templatedImageLayer } from './mapml/layers/TemplatedImageLayer';
+import { templatedTileLayer } from './mapml/layers/TemplatedTileLayer';
+import { templatedFeaturesLayer } from './mapml/layers/TemplatedFeaturesLayer';
+import { templatedPMTilesLayer } from './mapml/layers/TemplatedPMTilesLayer';
 /* global M */
 
 export class MapLink extends HTMLElement {
@@ -101,7 +106,7 @@ export class MapLink extends HTMLElement {
     // return the content of media attribute as an object
     // maybe memoizing the object to avoid repeated formatting
     // the Util function may need to be renamed?
-    return M._metaContentToObject(this.getAttribute('media'));
+    return Util._metaContentToObject(this.getAttribute('media'));
   }
   set media(val) {
     this.setAttribute('media', val);
@@ -129,7 +134,7 @@ export class MapLink extends HTMLElement {
     // _templateVars existence happens for both templated layers and query links
     return this._templateVars
       ? Object.assign(
-          M._convertAndFormatPCRS(
+          Util._convertAndFormatPCRS(
             this.getBounds(),
             M[this.parentExtent.units],
             this.parentExtent.units
@@ -150,15 +155,15 @@ export class MapLink extends HTMLElement {
       center = map.options.crs.unproject(bounds.getCenter(true)),
       maxZoom = extent.zoom.maxZoom,
       minZoom = extent.zoom.minZoom;
-    map.setView(center, M.getMaxZoom(bounds, map, minZoom, maxZoom), {
+    map.setView(center, Util.getMaxZoom(bounds, map, minZoom, maxZoom), {
       animate: false
     });
   }
   getMapEl() {
-    return M.getClosest(this, 'mapml-viewer,map[is=web-map]');
+    return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
   getLayerEl() {
-    return M.getClosest(this, 'layer-');
+    return Util.getClosest(this, 'layer-');
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -290,7 +295,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 = M.templatedTile(pane: this.extentElement._leafletLayer._container)
+    // this._tempatedTileLayer = Util.templatedTile(pane: this.extentElement._leafletLayer._container)
     // add to viewer._map dependant on map-extent.checked, layer-.checked
     // what else?
   }
@@ -313,7 +318,7 @@ export class MapLink extends HTMLElement {
     //  be loaded as part of a templated layer processing i.e. on moveend
     //  and the generated <link> that implements this <map-link> should be located
     //  in the parent <map-link>._templatedLayer.container root node if
-    //  the _templatedLayer is an instance of M.TemplatedTileLayer or M.TemplatedFeaturesLayer
+    //  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
     // container
@@ -375,7 +380,7 @@ export class MapLink extends HTMLElement {
       let pmtilesStylesheetLink = this.getLayerEl().src
         ? this.closest('map-extent')?.querySelector(s) ??
           this.getRootNode().querySelector(':host > ' + s)
-        : M.getClosest(
+        : Util.getClosest(
             this,
             'map-extent:has(' + s + '),layer-:has(' + s + ')'
           )?.querySelector(s);
@@ -388,12 +393,12 @@ export class MapLink extends HTMLElement {
         linkEl: this,
         pmtilesRules: pmtilesStylesheetLink?._pmtilesRules
       };
-      this._templatedLayer = M.templatedPMTilesLayer(
+      this._templatedLayer = templatedPMTilesLayer(
         this._templateVars,
         options
       ).addTo(this.parentExtent._extentLayer);
     } else if (this.rel === 'tile') {
-      this._templatedLayer = M.templatedTileLayer(this._templateVars, {
+      this._templatedLayer = templatedTileLayer(this._templateVars, {
         zoomBounds: this.getZoomBounds(),
         extentBounds: this.getBounds(),
         crs: M[this.parentExtent.units],
@@ -404,7 +409,7 @@ export class MapLink extends HTMLElement {
         linkEl: this
       }).addTo(this.parentExtent._extentLayer);
     } else if (this.rel === 'image') {
-      this._templatedLayer = M.templatedImageLayer(this._templateVars, {
+      this._templatedLayer = templatedImageLayer(this._templateVars, {
         zoomBounds: this.getZoomBounds(),
         extentBounds: this.getBounds(),
         zIndex: this.zIndex,
@@ -414,7 +419,7 @@ export class MapLink extends HTMLElement {
     } else if (this.rel === 'features') {
       // map-feature retrieved by link will be stored in shadowRoot owned by link
       this.attachShadow({ mode: 'open' });
-      this._templatedLayer = M.templatedFeaturesLayer(this._templateVars, {
+      this._templatedLayer = templatedFeaturesLayer(this._templateVars, {
         zoomBounds: this.getZoomBounds(),
         extentBounds: this.getBounds(),
         zIndex: this.zIndex,
@@ -659,7 +664,7 @@ export class MapLink extends HTMLElement {
           case 'longitude':
           case 'column':
           case 'easting':
-            boundsUnit.name = M.axisToCS(
+            boundsUnit.name = Util.axisToCS(
               inputs[i].getAttribute('axis').toLowerCase()
             );
             bounds.min.x = min;
@@ -672,7 +677,7 @@ export class MapLink extends HTMLElement {
           case 'latitude':
           case 'row':
           case 'northing':
-            boundsUnit.name = M.axisToCS(
+            boundsUnit.name = Util.axisToCS(
               inputs[i].getAttribute('axis').toLowerCase()
             );
             bounds.min.y = min;
@@ -703,7 +708,7 @@ export class MapLink extends HTMLElement {
       let zoomValue = this._templateVars.zoom?.hasAttribute('value')
         ? +this._templateVars.zoom.getAttribute('value')
         : 0;
-      bounds = M.boundsToPCRSBounds(
+      bounds = Util.boundsToPCRSBounds(
         bounds,
         zoomValue,
         projection,
@@ -720,7 +725,9 @@ export class MapLink extends HTMLElement {
     let zoom = 0;
     let metaExtent = this.parentElement.getMeta('extent');
     if (metaExtent) {
-      let content = M._metaContentToObject(metaExtent.getAttribute('content')),
+      let content = Util._metaContentToObject(
+          metaExtent.getAttribute('content')
+        ),
         cs;
 
       zoom = content.zoom || zoom;
@@ -728,12 +735,12 @@ export class MapLink extends HTMLElement {
       let metaKeys = Object.keys(content);
       for (let i = 0; i < metaKeys.length; i++) {
         if (!metaKeys[i].includes('zoom')) {
-          cs = M.axisToCS(metaKeys[i].split('-')[2]);
+          cs = Util.axisToCS(metaKeys[i].split('-')[2]);
           break;
         }
       }
-      let axes = M.csToAxes(cs);
-      bounds = M.boundsToPCRSBounds(
+      let axes = Util.csToAxes(cs);
+      bounds = Util.boundsToPCRSBounds(
         L.bounds(
           L.point(
             +content[`top-left-${axes[0]}`],
@@ -804,7 +811,7 @@ export class MapLink extends HTMLElement {
     // search document from here up, using closest source of zoom bounds info
     let meta = this.parentElement.getMeta('zoom');
     let metaMin = meta
-      ? +M._metaContentToObject(meta.getAttribute('content'))?.min
+      ? +Util._metaContentToObject(meta.getAttribute('content'))?.min
       : null;
     zoomBounds.minZoom =
       metaMin || (zoomInput ? +zoomInput.getAttribute('min') : 0);
@@ -812,7 +819,7 @@ export class MapLink extends HTMLElement {
       ? +zoomInput.getAttribute('min')
       : zoomBounds.minZoom;
     let metaMax = meta
-      ? +M._metaContentToObject(meta.getAttribute('content'))?.max
+      ? +Util._metaContentToObject(meta.getAttribute('content'))?.max
       : null;
     zoomBounds.maxZoom =
       metaMax ||
diff --git a/src/map-style.js b/src/map-style.js
index 144b5858a..6073e8847 100644
--- a/src/map-style.js
+++ b/src/map-style.js
@@ -13,7 +13,7 @@ export class MapStyle extends HTMLElement {
     //  be created as part of a templated layer processing i.e. on moveend / when connected
     //  and the generated <style> that implements this <map-style> should be located
     //  in the parent <map-link>._templatedLayer.container root node if
-    //  the _templatedLayer is an instance of M.TemplatedTileLayer or M.TemplatedFeaturesLayer
+    //  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
     // container
diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
index b52839747..0bf56e4d2 100644
--- a/src/mapml-viewer.js
+++ b/src/mapml-viewer.js
@@ -1,5 +1,6 @@
-import './leaflet.js'; // bundled with proj4, proj4leaflet, modularized
-import './mapml.js';
+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';
@@ -9,6 +10,16 @@ import { MapSelect } from './map-select.js';
 import { MapLink } from './map-link.js';
 import { MapStyle } from './map-style.js';
 
+import { layerControl } from './mapml/control/LayerControl';
+import { AttributionButton } from './mapml/control/AttributionButton';
+import { reloadButton } from './mapml/control/ReloadButton';
+import { scaleBar } from './mapml/control/ScaleBar';
+import { fullscreenButton } from './mapml/control/FullscreenButton';
+import { geolocationButton } from './mapml/control/GeolocationButton';
+import { debugOverlay } from './mapml/layers/DebugOverlay';
+import { crosshair } from './mapml/layers/Crosshair';
+import { featureIndexOverlay } from './mapml/layers/FeatureIndexOverlay';
+
 export class MapViewer extends HTMLElement {
   static get observedAttributes() {
     return [
@@ -107,12 +118,12 @@ export class MapViewer extends HTMLElement {
 
   get extent() {
     let map = this._map,
-      pcrsBounds = M.pixelToPCRSBounds(
+      pcrsBounds = Util.pixelToPCRSBounds(
         map.getPixelBounds(),
         map.getZoom(),
         map.options.projection
       );
-    let formattedExtent = M._convertAndFormatPCRS(
+    let formattedExtent = Util._convertAndFormatPCRS(
       pcrsBounds,
       map.options.crs,
       this.projection
@@ -158,7 +169,7 @@ export class MapViewer extends HTMLElement {
       .then(() => {
         this._initShadowRoot();
 
-        this._controlsList = new M.DOMTokenList(
+        this._controlsList = new DOMTokenList(
           this.getAttribute('controlslist'),
           this,
           'controlslist',
@@ -294,10 +305,10 @@ export class MapViewer extends HTMLElement {
 
       this._createControls();
       this._toggleControls();
-      this._crosshair = M.crosshair().addTo(this._map);
+      this._crosshair = crosshair().addTo(this._map);
 
       if (M.options.featureIndexOverlayOption)
-        this._featureIndexOverlay = M.featureIndexOverlay().addTo(this._map);
+        this._featureIndexOverlay = featureIndexOverlay().addTo(this._map);
 
       this._setUpEvents();
     }
@@ -427,7 +438,7 @@ export class MapViewer extends HTMLElement {
     let mapSize = this._map.getSize().y,
       totalSize = 0;
 
-    this._layerControl = M.layerControl(null, {
+    this._layerControl = layerControl(null, {
       collapsed: true,
       mapEl: this
     }).addTo(this._map);
@@ -442,8 +453,7 @@ export class MapViewer extends HTMLElement {
       scaleValue = { metric: false, imperial: true };
     }
 
-    if (!this._scaleBar)
-      this._scaleBar = M.scaleBar(scaleValue).addTo(this._map);
+    if (!this._scaleBar) this._scaleBar = scaleBar(scaleValue).addTo(this._map);
 
     // Only add controls if there is enough top left vertical space
     if (!this._zoomControl && totalSize + 93 <= mapSize) {
@@ -452,15 +462,15 @@ export class MapViewer extends HTMLElement {
     }
     if (!this._reloadButton && totalSize + 49 <= mapSize) {
       totalSize += 49;
-      this._reloadButton = M.reloadButton().addTo(this._map);
+      this._reloadButton = reloadButton().addTo(this._map);
     }
     if (!this._fullScreenControl && totalSize + 49 <= mapSize) {
       totalSize += 49;
-      this._fullScreenControl = M.fullscreenButton().addTo(this._map);
+      this._fullScreenControl = fullscreenButton().addTo(this._map);
     }
 
     if (!this._geolocationButton) {
-      this._geolocationButton = M.geolocationButton().addTo(this._map);
+      this._geolocationButton = geolocationButton().addTo(this._map);
     }
   }
 
@@ -611,7 +621,7 @@ export class MapViewer extends HTMLElement {
   _dropHandler(event) {
     event.preventDefault();
     let text = event.dataTransfer.getData('text');
-    M._pasteLayer(this, text);
+    Util._pasteLayer(this, text);
   }
   _dragoverHandler(event) {
     event.preventDefault();
@@ -659,7 +669,7 @@ export class MapViewer extends HTMLElement {
     this.addEventListener('keydown', function (e) {
       if (e.keyCode === 86 && e.ctrlKey) {
         navigator.clipboard.readText().then((layer) => {
-          M._pasteLayer(this, layer);
+          Util._pasteLayer(this, layer);
         });
         // Prevents default spacebar event on all of mapml-viewer
       } else if (
@@ -970,7 +980,7 @@ export class MapViewer extends HTMLElement {
       this._debug.remove();
       this._debug = undefined;
     } else {
-      this._debug = M.debugOverlay().addTo(this._map);
+      this._debug = debugOverlay().addTo(this._map);
     }
   }
 
@@ -1425,7 +1435,7 @@ export class MapViewer extends HTMLElement {
     if (options.projection === undefined) {
       options.projection = this.projection;
     }
-    let geojsonLayer = M.geojson2mapml(json, options);
+    let geojsonLayer = Util.geojson2mapml(json, options);
     this.appendChild(geojsonLayer);
     return geojsonLayer;
   }
diff --git a/src/mapml/options.js b/src/mapml/DefaultMapOptions.js
similarity index 100%
rename from src/mapml/options.js
rename to src/mapml/DefaultMapOptions.js
diff --git a/src/mapml/GlobalM.js b/src/mapml/GlobalM.js
new file mode 100644
index 000000000..4876b9d7e
--- /dev/null
+++ b/src/mapml/GlobalM.js
@@ -0,0 +1,714 @@
+import { QueryHandler } from './handlers/QueryHandler';
+import { ContextMenu } from './handlers/ContextMenu';
+import { Util } from './utils/Util';
+import { AnnounceMovement } from './handlers/AnnounceMovement';
+import { FeatureIndex } from './handlers/FeatureIndex';
+import { Options } from './DefaultMapOptions';
+import './handlers/keyboard';
+
+(function (window, document, undefined) {
+  let M = {};
+  window.M = M;
+  M.mime = 'text/mapml';
+
+  let mapOptions = document.head.querySelector('map-options');
+  M.options = Options;
+  if (mapOptions)
+    M.options = Object.assign(M.options, JSON.parse(mapOptions.innerHTML));
+
+  // see https://leafletjs.com/reference-1.5.0.html#crs-l-crs-base
+  // "new classes can't inherit from (L.CRS), and methods can't be added
+  // to (L.CRS.anything) with the include function
+  // so we'll use the options property as a way to integrate needed
+  // properties and methods...
+  M.WGS84 = new L.Proj.CRS(
+    'EPSG:4326',
+    '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ',
+    {
+      origin: [-180, +90],
+      bounds: L.bounds([
+        [-180, -90],
+        [180, 90]
+      ]),
+      resolutions: [
+        0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
+        0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125,
+        0.001373291015625, 0.0006866455078125, 0.0003433227539062,
+        0.0001716613769531, 0.0000858306884766, 0.0000429153442383,
+        0.0000214576721191, 0.0000107288360596, 0.0000053644180298,
+        0.0000026822090149, 0.0000013411045074, 0.0000006705522537,
+        0.0000003352761269
+      ],
+      crs: {
+        tcrs: {
+          horizontal: {
+            name: 'x',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.WGS84.options.bounds.getSize().x /
+                  M.WGS84.options.resolutions[zoom]
+              )
+          },
+          vertical: {
+            name: 'y',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.WGS84.options.bounds.getSize().y /
+                  M.WGS84.options.resolutions[zoom]
+              )
+          },
+          bounds: (zoom) =>
+            L.bounds(
+              [
+                M.WGS84.options.crs.tcrs.horizontal.min,
+                M.WGS84.options.crs.tcrs.vertical.min
+              ],
+              [
+                M.WGS84.options.crs.tcrs.horizontal.max(zoom),
+                M.WGS84.options.crs.tcrs.vertical.max(zoom)
+              ]
+            )
+        },
+        pcrs: {
+          horizontal: {
+            name: 'longitude',
+            get min() {
+              return M.WGS84.options.crs.gcrs.horizontal.min;
+            },
+            get max() {
+              return M.WGS84.options.crs.gcrs.horizontal.max;
+            }
+          },
+          vertical: {
+            name: 'latitude',
+            get min() {
+              return M.WGS84.options.crs.gcrs.vertical.min;
+            },
+            get max() {
+              return M.WGS84.options.crs.gcrs.vertical.max;
+            }
+          },
+          get bounds() {
+            return M.WGS84.options.bounds;
+          }
+        },
+        gcrs: {
+          horizontal: {
+            name: 'longitude',
+            // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
+            min: -180.0,
+            max: 180.0
+          },
+          vertical: {
+            name: 'latitude',
+            // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
+            min: -90.0,
+            max: 90.0
+          },
+          get bounds() {
+            return L.latLngBounds(
+              [
+                M.WGS84.options.crs.gcrs.vertical.min,
+                M.WGS84.options.crs.gcrs.horizontal.min
+              ],
+              [
+                M.WGS84.options.crs.gcrs.vertical.max,
+                M.WGS84.options.crs.gcrs.horizontal.max
+              ]
+            );
+          }
+        },
+        map: {
+          horizontal: {
+            name: 'i',
+            min: 0,
+            max: (map) => map.getSize().x
+          },
+          vertical: {
+            name: 'j',
+            min: 0,
+            max: (map) => map.getSize().y
+          },
+          bounds: (map) => L.bounds(L.point([0, 0]), map.getSize())
+        },
+        tile: {
+          horizontal: {
+            name: 'i',
+            min: 0,
+            max: 256
+          },
+          vertical: {
+            name: 'j',
+            min: 0,
+            max: 256
+          },
+          get bounds() {
+            return L.bounds(
+              [
+                M.WGS84.options.crs.tile.horizontal.min,
+                M.WGS84.options.crs.tile.vertical.min
+              ],
+              [
+                M.WGS84.options.crs.tile.horizontal.max,
+                M.WGS84.options.crs.tile.vertical.max
+              ]
+            );
+          }
+        },
+        tilematrix: {
+          horizontal: {
+            name: 'column',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.WGS84.options.crs.tcrs.horizontal.max(zoom) /
+                  M.WGS84.options.crs.tile.bounds.getSize().x
+              )
+          },
+          vertical: {
+            name: 'row',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.WGS84.options.crs.tcrs.vertical.max(zoom) /
+                  M.WGS84.options.crs.tile.bounds.getSize().y
+              )
+          },
+          bounds: (zoom) =>
+            L.bounds(
+              [
+                M.WGS84.options.crs.tilematrix.horizontal.min,
+                M.WGS84.options.crs.tilematrix.vertical.min
+              ],
+              [
+                M.WGS84.options.crs.tilematrix.horizontal.max(zoom),
+                M.WGS84.options.crs.tilematrix.vertical.max(zoom)
+              ]
+            )
+        }
+      }
+    }
+  );
+  M.CBMTILE = new L.Proj.CRS(
+    'EPSG:3978',
+    '+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs',
+    {
+      origin: [-34655800, 39310000],
+      bounds: L.bounds([
+        [-34655800, -39000000],
+        [10000000, 39310000]
+      ]),
+      resolutions: [
+        38364.660062653464, 22489.62831258996, 13229.193125052918,
+        7937.5158750317505, 4630.2175937685215, 2645.8386250105837,
+        1587.5031750063501, 926.0435187537042, 529.1677250021168,
+        317.50063500127004, 185.20870375074085, 111.12522225044451,
+        66.1459656252646, 38.36466006265346, 22.48962831258996,
+        13.229193125052918, 7.9375158750317505, 4.6302175937685215,
+        2.6458386250105836, 1.5875031750063502, 0.92604351875370428,
+        0.52916772500211673, 0.31750063500127002, 0.18520870375074083,
+        0.11112522225044451, 0.066145965625264591
+      ],
+      crs: {
+        tcrs: {
+          horizontal: {
+            name: 'x',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.CBMTILE.options.bounds.getSize().x /
+                  M.CBMTILE.options.resolutions[zoom]
+              )
+          },
+          vertical: {
+            name: 'y',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.CBMTILE.options.bounds.getSize().y /
+                  M.CBMTILE.options.resolutions[zoom]
+              )
+          },
+          bounds: (zoom) =>
+            L.bounds(
+              [
+                M.CBMTILE.options.crs.tcrs.horizontal.min,
+                M.CBMTILE.options.crs.tcrs.vertical.min
+              ],
+              [
+                M.CBMTILE.options.crs.tcrs.horizontal.max(zoom),
+                M.CBMTILE.options.crs.tcrs.vertical.max(zoom)
+              ]
+            )
+        },
+        pcrs: {
+          horizontal: {
+            name: 'easting',
+            get min() {
+              return M.CBMTILE.options.bounds.min.x;
+            },
+            get max() {
+              return M.CBMTILE.options.bounds.max.x;
+            }
+          },
+          vertical: {
+            name: 'northing',
+            get min() {
+              return M.CBMTILE.options.bounds.min.y;
+            },
+            get max() {
+              return M.CBMTILE.options.bounds.max.y;
+            }
+          },
+          get bounds() {
+            return M.CBMTILE.options.bounds;
+          }
+        },
+        gcrs: {
+          horizontal: {
+            name: 'longitude',
+            // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
+            min: -141.01,
+            max: -47.74
+          },
+          vertical: {
+            name: 'latitude',
+            // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
+            min: 40.04,
+            max: 86.46
+          },
+          get bounds() {
+            return L.latLngBounds(
+              [
+                M.CBMTILE.options.crs.gcrs.vertical.min,
+                M.CBMTILE.options.crs.gcrs.horizontal.min
+              ],
+              [
+                M.CBMTILE.options.crs.gcrs.vertical.max,
+                M.CBMTILE.options.crs.gcrs.horizontal.max
+              ]
+            );
+          }
+        },
+        map: {
+          horizontal: {
+            name: 'i',
+            min: 0,
+            max: (map) => map.getSize().x
+          },
+          vertical: {
+            name: 'j',
+            min: 0,
+            max: (map) => map.getSize().y
+          },
+          bounds: (map) => L.bounds(L.point([0, 0]), map.getSize())
+        },
+        tile: {
+          horizontal: {
+            name: 'i',
+            min: 0,
+            max: 256
+          },
+          vertical: {
+            name: 'j',
+            min: 0,
+            max: 256
+          },
+          get bounds() {
+            return L.bounds(
+              [
+                M.CBMTILE.options.crs.tile.horizontal.min,
+                M.CBMTILE.options.crs.tile.vertical.min
+              ],
+              [
+                M.CBMTILE.options.crs.tile.horizontal.max,
+                M.CBMTILE.options.crs.tile.vertical.max
+              ]
+            );
+          }
+        },
+        tilematrix: {
+          horizontal: {
+            name: 'column',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.CBMTILE.options.crs.tcrs.horizontal.max(zoom) /
+                  M.CBMTILE.options.crs.tile.bounds.getSize().x
+              )
+          },
+          vertical: {
+            name: 'row',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.CBMTILE.options.crs.tcrs.vertical.max(zoom) /
+                  M.CBMTILE.options.crs.tile.bounds.getSize().y
+              )
+          },
+          bounds: (zoom) =>
+            L.bounds(
+              [0, 0],
+              [
+                M.CBMTILE.options.crs.tilematrix.horizontal.max(zoom),
+                M.CBMTILE.options.crs.tilematrix.vertical.max(zoom)
+              ]
+            )
+        }
+      }
+    }
+  );
+  M.APSTILE = new L.Proj.CRS(
+    'EPSG:5936',
+    '+proj=stere +lat_0=90 +lat_ts=50 +lon_0=-150 +k=0.994 +x_0=2000000 +y_0=2000000 +datum=WGS84 +units=m +no_defs',
+    {
+      origin: [-2.8567784109255e7, 3.2567784109255e7],
+      bounds: L.bounds([
+        [-28567784.109254867, -28567784.109254755],
+        [32567784.109255023, 32567784.10925506]
+      ]),
+      resolutions: [
+        238810.813354, 119405.406677, 59702.7033384999, 29851.3516692501,
+        14925.675834625, 7462.83791731252, 3731.41895865639, 1865.70947932806,
+        932.854739664032, 466.427369832148, 233.213684916074, 116.606842458037,
+        58.3034212288862, 29.1517106145754, 14.5758553072877, 7.28792765351156,
+        3.64396382688807, 1.82198191331174, 0.910990956788164, 0.45549547826179
+      ],
+      crs: {
+        tcrs: {
+          horizontal: {
+            name: 'x',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.APSTILE.options.bounds.getSize().x /
+                  M.APSTILE.options.resolutions[zoom]
+              )
+          },
+          vertical: {
+            name: 'y',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.APSTILE.options.bounds.getSize().y /
+                  M.APSTILE.options.resolutions[zoom]
+              )
+          },
+          bounds: (zoom) =>
+            L.bounds(
+              [
+                M.APSTILE.options.crs.tcrs.horizontal.min,
+                M.APSTILE.options.crs.tcrs.vertical.min
+              ],
+              [
+                M.APSTILE.options.crs.tcrs.horizontal.max(zoom),
+                M.APSTILE.options.crs.tcrs.vertical.max(zoom)
+              ]
+            )
+        },
+        pcrs: {
+          horizontal: {
+            name: 'easting',
+            get min() {
+              return M.APSTILE.options.bounds.min.x;
+            },
+            get max() {
+              return M.APSTILE.options.bounds.max.x;
+            }
+          },
+          vertical: {
+            name: 'northing',
+            get min() {
+              return M.APSTILE.options.bounds.min.y;
+            },
+            get max() {
+              return M.APSTILE.options.bounds.max.y;
+            }
+          },
+          get bounds() {
+            return M.APSTILE.options.bounds;
+          }
+        },
+        gcrs: {
+          horizontal: {
+            name: 'longitude',
+            // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
+            min: -180.0,
+            max: 180.0
+          },
+          vertical: {
+            name: 'latitude',
+            // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
+            min: 60.0,
+            max: 90.0
+          },
+          get bounds() {
+            return L.latLngBounds(
+              [
+                M.APSTILE.options.crs.gcrs.vertical.min,
+                M.APSTILE.options.crs.gcrs.horizontal.min
+              ],
+              [
+                M.APSTILE.options.crs.gcrs.vertical.max,
+                M.APSTILE.options.crs.gcrs.horizontal.max
+              ]
+            );
+          }
+        },
+        map: {
+          horizontal: {
+            name: 'i',
+            min: 0,
+            max: (map) => map.getSize().x
+          },
+          vertical: {
+            name: 'j',
+            min: 0,
+            max: (map) => map.getSize().y
+          },
+          bounds: (map) => L.bounds(L.point([0, 0]), map.getSize())
+        },
+        tile: {
+          horizontal: {
+            name: 'i',
+            min: 0,
+            max: 256
+          },
+          vertical: {
+            name: 'j',
+            min: 0,
+            max: 256
+          },
+          get bounds() {
+            return L.bounds(
+              [
+                M.APSTILE.options.crs.tile.horizontal.min,
+                M.APSTILE.options.crs.tile.vertical.min
+              ],
+              [
+                M.APSTILE.options.crs.tile.horizontal.max,
+                M.APSTILE.options.crs.tile.vertical.max
+              ]
+            );
+          }
+        },
+        tilematrix: {
+          horizontal: {
+            name: 'column',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.APSTILE.options.crs.tcrs.horizontal.max(zoom) /
+                  M.APSTILE.options.crs.tile.bounds.getSize().x
+              )
+          },
+          vertical: {
+            name: 'row',
+            min: 0,
+            max: (zoom) =>
+              Math.round(
+                M.APSTILE.options.crs.tcrs.vertical.max(zoom) /
+                  M.APSTILE.options.crs.tile.bounds.getSize().y
+              )
+          },
+          bounds: (zoom) =>
+            L.bounds(
+              [0, 0],
+              [
+                M.APSTILE.options.crs.tilematrix.horizontal.max(zoom),
+                M.APSTILE.options.crs.tilematrix.vertical.max(zoom)
+              ]
+            )
+        }
+      }
+    }
+  );
+  M.OSMTILE = L.CRS.EPSG3857;
+  L.setOptions(M.OSMTILE, {
+    origin: [-20037508.342787, 20037508.342787],
+    bounds: L.bounds([
+      [-20037508.342787, -20037508.342787],
+      [20037508.342787, 20037508.342787]
+    ]),
+    resolutions: [
+      156543.0339, 78271.51695, 39135.758475, 19567.8792375, 9783.93961875,
+      4891.969809375, 2445.9849046875, 1222.9924523438, 611.49622617188,
+      305.74811308594, 152.87405654297, 76.437028271484, 38.218514135742,
+      19.109257067871, 9.5546285339355, 4.7773142669678, 2.3886571334839,
+      1.1943285667419, 0.59716428337097, 0.29858214168549, 0.14929107084274,
+      0.074645535421371, 0.03732276771068573, 0.018661383855342865,
+      0.009330691927671432495
+    ],
+    crs: {
+      tcrs: {
+        horizontal: {
+          name: 'x',
+          min: 0,
+          max: (zoom) =>
+            Math.round(
+              M.OSMTILE.options.bounds.getSize().x /
+                M.OSMTILE.options.resolutions[zoom]
+            )
+        },
+        vertical: {
+          name: 'y',
+          min: 0,
+          max: (zoom) =>
+            Math.round(
+              M.OSMTILE.options.bounds.getSize().y /
+                M.OSMTILE.options.resolutions[zoom]
+            )
+        },
+        bounds: (zoom) =>
+          L.bounds(
+            [
+              M.OSMTILE.options.crs.tcrs.horizontal.min,
+              M.OSMTILE.options.crs.tcrs.vertical.min
+            ],
+            [
+              M.OSMTILE.options.crs.tcrs.horizontal.max(zoom),
+              M.OSMTILE.options.crs.tcrs.vertical.max(zoom)
+            ]
+          )
+      },
+      pcrs: {
+        horizontal: {
+          name: 'easting',
+          get min() {
+            return M.OSMTILE.options.bounds.min.x;
+          },
+          get max() {
+            return M.OSMTILE.options.bounds.max.x;
+          }
+        },
+        vertical: {
+          name: 'northing',
+          get min() {
+            return M.OSMTILE.options.bounds.min.y;
+          },
+          get max() {
+            return M.OSMTILE.options.bounds.max.y;
+          }
+        },
+        get bounds() {
+          return M.OSMTILE.options.bounds;
+        }
+      },
+      gcrs: {
+        horizontal: {
+          name: 'longitude',
+          get min() {
+            return M.OSMTILE.unproject(M.OSMTILE.options.bounds.min).lng;
+          },
+          get max() {
+            return M.OSMTILE.unproject(M.OSMTILE.options.bounds.max).lng;
+          }
+        },
+        vertical: {
+          name: 'latitude',
+          get min() {
+            return M.OSMTILE.unproject(M.OSMTILE.options.bounds.min).lat;
+          },
+          get max() {
+            return M.OSMTILE.unproject(M.OSMTILE.options.bounds.max).lat;
+          }
+        },
+        get bounds() {
+          return L.latLngBounds(
+            [
+              M.OSMTILE.options.crs.gcrs.vertical.min,
+              M.OSMTILE.options.crs.gcrs.horizontal.min
+            ],
+            [
+              M.OSMTILE.options.crs.gcrs.vertical.max,
+              M.OSMTILE.options.crs.gcrs.horizontal.max
+            ]
+          );
+        }
+      },
+      map: {
+        horizontal: {
+          name: 'i',
+          min: 0,
+          max: (map) => map.getSize().x
+        },
+        vertical: {
+          name: 'j',
+          min: 0,
+          max: (map) => map.getSize().y
+        },
+        bounds: (map) => L.bounds(L.point([0, 0]), map.getSize())
+      },
+      tile: {
+        horizontal: {
+          name: 'i',
+          min: 0,
+          max: 256
+        },
+        vertical: {
+          name: 'j',
+          min: 0,
+          max: 256
+        },
+        get bounds() {
+          return L.bounds(
+            [
+              M.OSMTILE.options.crs.tile.horizontal.min,
+              M.OSMTILE.options.crs.tile.vertical.min
+            ],
+            [
+              M.OSMTILE.options.crs.tile.horizontal.max,
+              M.OSMTILE.options.crs.tile.vertical.max
+            ]
+          );
+        }
+      },
+      tilematrix: {
+        horizontal: {
+          name: 'column',
+          min: 0,
+          max: (zoom) =>
+            Math.round(
+              M.OSMTILE.options.crs.tcrs.horizontal.max(zoom) /
+                M.OSMTILE.options.crs.tile.bounds.getSize().x
+            )
+        },
+        vertical: {
+          name: 'row',
+          min: 0,
+          max: (zoom) =>
+            Math.round(
+              M.OSMTILE.options.crs.tcrs.vertical.max(zoom) /
+                M.OSMTILE.options.crs.tile.bounds.getSize().y
+            )
+        },
+        bounds: (zoom) =>
+          L.bounds(
+            [0, 0],
+            [
+              M.OSMTILE.options.crs.tilematrix.horizontal.max(zoom),
+              M.OSMTILE.options.crs.tilematrix.vertical.max(zoom)
+            ]
+          )
+      }
+    }
+  });
+
+  // see https://leafletjs.com/examples/extending/extending-3-controls.html#handlers
+  L.Map.addInitHook('addHandler', 'query', QueryHandler);
+  L.Map.addInitHook('addHandler', 'contextMenu', ContextMenu);
+  L.Map.addInitHook('addHandler', 'announceMovement', AnnounceMovement);
+  L.Map.addInitHook('addHandler', 'featureIndex', FeatureIndex);
+
+  // constants
+  M.TILE_SIZE = 256;
+  M.FALLBACK_PROJECTION = 'OSMTILE';
+  M.FALLBACK_CS = 'TILEMATRIX';
+  M.BLANK_TT_TREF = 'mapmltemplatedtileplaceholder';
+
+  // this is for tests, all other modules import and use Util directly
+  M.Util = Util;
+})(window, document);
+export default M;
diff --git a/src/mapml/control/FullscreenButton.js b/src/mapml/control/FullscreenButton.js
index d78639573..e4f69868d 100644
--- a/src/mapml/control/FullscreenButton.js
+++ b/src/mapml/control/FullscreenButton.js
@@ -1,3 +1,4 @@
+import { Util } from '../utils/Util';
 export var FullscreenButton = L.Control.extend({
   options: {
     position: 'topleft',
@@ -53,7 +54,10 @@ L.Map.include({
   toggleFullscreen: function (options) {
     // the <map> element can't contain a shadow root, so we used a child <div>
     // <mapml-viewer> can contain a shadow root, so return it directly
-    var mapEl = M.getClosest(this.getContainer(), 'mapml-viewer,[is=web-map]');
+    var mapEl = Util.getClosest(
+      this.getContainer(),
+      'mapml-viewer,[is=web-map]'
+    );
     if (this.isFullscreen()) {
       if (options && options.pseudoFullscreen) {
         this._disablePseudoFullscreen(mapEl);
@@ -100,7 +104,7 @@ L.Map.include({
 
   _setFullscreen: function (fullscreen) {
     this._isFullscreen = fullscreen;
-    var container = M.getClosest(
+    var container = Util.getClosest(
       this.getContainer(),
       'mapml-viewer,[is=web-map]'
     );
@@ -113,8 +117,8 @@ L.Map.include({
   },
 
   _onFullscreenChange: function (e) {
-    var fullscreenElement = M.getClosest(this.getContainer(), ':fullscreen'),
-      mapEl = M.getClosest(this.getContainer(), 'mapml-viewer,[is=web-map]');
+    var fullscreenElement = Util.getClosest(this.getContainer(), ':fullscreen'),
+      mapEl = Util.getClosest(this.getContainer(), 'mapml-viewer,[is=web-map]');
     if (fullscreenElement === mapEl && !this._isFullscreen) {
       this._setFullscreen(true);
       this.fire('fullscreenchange');
diff --git a/src/mapml/elementSupport/inputs/locationInput.js b/src/mapml/elementSupport/inputs/locationInput.js
index d35d8ce83..3d0a4a9ff 100644
--- a/src/mapml/elementSupport/inputs/locationInput.js
+++ b/src/mapml/elementSupport/inputs/locationInput.js
@@ -1,3 +1,4 @@
+import { Util } from '../../utils/Util';
 export class LocationInput {
   constructor(name, position, axis, units, min, max, rel, layer) {
     this.name = name;
@@ -5,7 +6,7 @@ export class LocationInput {
     this.axis = axis;
     // if unit/cs not present, find it
     if (!units && axis && !['i', 'j'].includes(axis)) {
-      this.units = M.axisToCS(axis).toLowerCase();
+      this.units = Util.axisToCS(axis).toLowerCase();
     } else {
       this.units = units; // cs
     }
@@ -30,7 +31,7 @@ export class LocationInput {
     }
     // check if axis match the units/cs
     if (this.units) {
-      let axisCS = M.axisToCS(this.axis);
+      let axisCS = Util.axisToCS(this.axis);
       if (
         typeof axisCS === 'string' &&
         axisCS.toUpperCase() !== this.units.toUpperCase()
diff --git a/src/mapml/features/featureRenderer.js b/src/mapml/features/featureRenderer.js
index 2262b7c2b..d2e058820 100644
--- a/src/mapml/features/featureRenderer.js
+++ b/src/mapml/features/featureRenderer.js
@@ -1,3 +1,4 @@
+import { Util } from '../utils/Util';
 /**
  * Returns a new Feature Renderer
  * @param {Object} options - Options for the renderer
@@ -330,9 +331,9 @@ export var FeatureRenderer = L.SVG.extend({
 });
 
 /**
- * Returns new M.FeatureRenderer
+ * Returns new FeatureRenderer
  * @param {Object} options - Options for the renderer
- * @returns {M.FeatureRenderer}
+ * @returns {FeatureRenderer}
  */
 export var featureRenderer = function (options) {
   return new FeatureRenderer(options);
diff --git a/src/mapml/features/geometry.js b/src/mapml/features/geometry.js
index 38d783330..3617155a2 100644
--- a/src/mapml/features/geometry.js
+++ b/src/mapml/features/geometry.js
@@ -1,3 +1,5 @@
+import { Path, path } from './path';
+
 export var Geometry = L.FeatureGroup.extend({
   /**
    * Initialize the feature group
@@ -7,7 +9,7 @@ export var Geometry = L.FeatureGroup.extend({
   initialize: function (layers, options) {
     if (options.wrappers && options.wrappers.length > 0)
       options = Object.assign(
-        M.Path.prototype._convertWrappers(options.wrappers),
+        Path.prototype._convertWrappers(options.wrappers),
         options
       );
 
@@ -26,7 +28,7 @@ export var Geometry = L.FeatureGroup.extend({
     ) {
       L.DomUtil.addClass(this.options.group, 'leaflet-interactive');
       if (this.options.link) {
-        M.Path.prototype.attachLinkHandler.call(
+        Path.prototype.attachLinkHandler.call(
           this,
           this.options.group,
           this.options.link,
@@ -191,7 +193,7 @@ export var Geometry = L.FeatureGroup.extend({
   },
 
   /**
-   * Add a M.Path to the M.Geometry
+   * Add a Path to the Geometry
    * @param layer
    */
   addLayer: function (layer) {
@@ -254,10 +256,10 @@ export var Geometry = L.FeatureGroup.extend({
 });
 
 /**
- * Returns new M.Geometry
+ * Returns new Geometry
  * @param {M.Path[]} layers - Layers belonging to feature group
  * @param {Object} options - Options for the feature group
- * @returns {M.Geometry}
+ * @returns {Geometry}
  */
 export var geometry = function (layers, options) {
   return new Geometry(layers, options);
diff --git a/src/mapml/features/path.js b/src/mapml/features/path.js
index 7240f62bc..a5c8df807 100644
--- a/src/mapml/features/path.js
+++ b/src/mapml/features/path.js
@@ -1,3 +1,4 @@
+import { Util } from '../utils/Util';
 /**
  * M.Path is a extension of L.Path that understands mapml feature markup
  * It converts the markup to the following structure (abstract enough to encompass all feature types) for example:
@@ -79,7 +80,7 @@ export var Path = L.Path.extend({
         nextLayer = nextLayer.nextElementSibling;
       }
       if (onTop && dragStart) {
-        //M._handleLink gets called twice, once in the target phase on the path
+        //Util._handleLink gets called twice, once in the target phase on the path
         //element, then in the bubble phase on the g element
         //Using stopPropagation leaves the mouse in the mousedown state
         if (e.eventPhase === Event.BUBBLING_PHASE) return;
@@ -91,7 +92,7 @@ export var Path = L.Path.extend({
           link.visited = true;
           elem.setAttribute('stroke', '#6c00a2');
           elem.classList.add('map-a-visited');
-          M._handleLink(link, leafletLayer);
+          Util._handleLink(link, leafletLayer);
         }
       }
     };
@@ -105,7 +106,7 @@ export var Path = L.Path.extend({
           link.visited = true;
           elem.setAttribute('stroke', '#6c00a2');
           elem.classList.add('map-a-visited');
-          M._handleLink(link, leafletLayer);
+          Util._handleLink(link, leafletLayer);
         }
       },
       this
@@ -388,8 +389,8 @@ export var Path = L.Path.extend({
       bounds;
     for (let p of pairs) {
       let numPair = [];
-      p.split(/\s+/gim).forEach(M._parseNumber, numPair);
-      let point = M.pointToPCRSPoint(
+      p.split(/\s+/gim).forEach(Util._parseNumber, numPair);
+      let point = Util.pointToPCRSPoint(
         L.point(numPair),
         this.options.zoom,
         this.options.projection,
diff --git a/src/mapml/handlers/AnnounceMovement.js b/src/mapml/handlers/AnnounceMovement.js
index 921a216c3..7dc4207ef 100644
--- a/src/mapml/handlers/AnnounceMovement.js
+++ b/src/mapml/handlers/AnnounceMovement.js
@@ -1,3 +1,4 @@
+import { Util } from '../utils/Util';
 export var AnnounceMovement = L.Handler.extend({
   addHooks: function () {
     this._map.on({
@@ -65,7 +66,7 @@ export var AnnounceMovement = L.Handler.extend({
       return;
     }
     let mapZoom = this._map.getZoom();
-    let mapBounds = M.pixelToPCRSBounds(
+    let mapBounds = Util.pixelToPCRSBounds(
       this._map.getPixelBounds(),
       mapZoom,
       this._map.options.projection
@@ -133,9 +134,9 @@ export var AnnounceMovement = L.Handler.extend({
         if (layers[i]._layer) {
           let extent = layers[i].extent;
           if (bounds && extent) {
-            bounds.extend(M.extentToBounds(extent, 'pcrs'));
+            bounds.extend(Util.extentToBounds(extent, 'pcrs'));
           } else if (extent) {
-            bounds = M.extentToBounds(extent, 'pcrs');
+            bounds = Util.extentToBounds(extent, 'pcrs');
           }
         }
       }
diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js
index 66f8e2733..696c84f97 100644
--- a/src/mapml/handlers/ContextMenu.js
+++ b/src/mapml/handlers/ContextMenu.js
@@ -1,3 +1,4 @@
+import { Util } from '../utils/Util';
 /*
 MIT License related to portions of M.ContextMenu 
 Copyright (c) 2017 adam.ratcliffe@gmail.com
@@ -479,7 +480,7 @@ export var ContextMenu = L.Handler.extend({
           ? this._map.options.mapEl
           : this.options.mapEl;
     navigator.clipboard.readText().then((layer) => {
-      M._pasteLayer(mapEl, layer);
+      Util._pasteLayer(mapEl, layer);
     });
   },
 
diff --git a/src/mapml/handlers/FeatureIndex.js b/src/mapml/handlers/FeatureIndex.js
index ece61a288..fc181a8f2 100644
--- a/src/mapml/handlers/FeatureIndex.js
+++ b/src/mapml/handlers/FeatureIndex.js
@@ -1,10 +1,11 @@
+import { Util } from '../utils/Util';
 export var FeatureIndex = L.Handler.extend({
   initialize: function (map) {
     L.Handler.prototype.initialize.call(this, map);
     this.inBoundFeatures = [];
     this.outBoundFeatures = [];
     this.currentIndex = 0;
-    this._mapPCRSBounds = M.pixelToPCRSBounds(
+    this._mapPCRSBounds = Util.pixelToPCRSBounds(
       map.getPixelBounds(),
       map.getZoom(),
       map.options.projection
@@ -105,7 +106,7 @@ export var FeatureIndex = L.Handler.extend({
    */
   _updateMapBounds: function (e) {
     // TODO: map's PCRS bounds is used in other parts of the viewer, can be moved out to the map object directly
-    this._mapPCRSBounds = M.pixelToPCRSBounds(
+    this._mapPCRSBounds = Util.pixelToPCRSBounds(
       this._map.getPixelBounds(),
       this._map.getZoom(),
       this._map.options.projection
diff --git a/src/mapml/handlers/QueryHandler.js b/src/mapml/handlers/QueryHandler.js
index aa9cdc2ca..eba7f049a 100644
--- a/src/mapml/handlers/QueryHandler.js
+++ b/src/mapml/handlers/QueryHandler.js
@@ -1,3 +1,6 @@
+import { featureLayer } from '../layers/FeatureLayer';
+import { featureRenderer } from '../features/featureRenderer';
+
 export var QueryHandler = L.Handler.extend({
   addHooks: function () {
     // get a reference to the actual <map> element, so we can
@@ -312,10 +315,10 @@ export var QueryHandler = L.Handler.extend({
 
     function displayFeaturesPopup(features, loc) {
       if (features.length === 0) return;
-      let f = M.featureLayer(features, {
+      let f = featureLayer(features, {
         // pass the vector layer a renderer of its own, otherwise leaflet
         // puts everything into the overlayPane
-        renderer: M.featureRenderer(),
+        renderer: featureRenderer(),
         // pass the vector layer the container for the parent into which
         // it will append its own container for rendering into
         pane: container,
diff --git a/src/mapml/index-web-map.js b/src/mapml/index-web-map.js
new file mode 100644
index 000000000..3e3c2cf25
--- /dev/null
+++ b/src/mapml/index-web-map.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2015-2024 Canada Centre for Mapping and Earth Observation,
+ * Earth Sciences Sector, Natural Resources Canada.
+ *
+ * License
+ *
+ * By obtaining and/or copying this work, you (the licensee) agree that you have
+ * read, understood, and will comply with the following terms and conditions.
+ *
+ * Permission to copy, modify, and distribute this work, with or without
+ * modification, for any purpose and without fee or royalty is hereby granted,
+ * provided that you include the following on ALL copies of the work or portions
+ * thereof, including modifications:
+ *
+ * The full text of this NOTICE in a location viewable to users of the
+ * redistributed or derivative work.
+ *
+ * Any pre-existing intellectual property disclaimers, notices, or terms and
+ * conditions. If none exist, the W3C Software and Document Short Notice should
+ * be included.
+ *
+ * Notice of any changes or modifications, through a copyright statement on the
+ * new code or document such as "This software or document includes material
+ * copied from or derived from [title and URI of the W3C document].
+ * Copyright © [YEAR] W3C® (MIT, ERCIM, Keio, Beihang)."
+ *
+ * Disclaimers
+ *
+ * THIS WORK IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS MAKE NO REPRESENTATIONS
+ * OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO, WARRANTIES OF
+ * MERCHANTABILITY OR FITNESS FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF THE
+ * SOFTWARE OR DOCUMENT WILL NOT INFRINGE ANY THIRD PARTY PATENTS, COPYRIGHTS,
+ * TRADEMARKS OR OTHER RIGHTS.
+ * COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR
+ * CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE SOFTWARE OR DOCUMENT.
+ *
+ * The name and trademarks of copyright holders may NOT be used in advertising or
+ * publicity pertaining to the work without specific, written prior permission.
+ * Title to copyright in this work will at all times remain with copyright holders.
+ */
+/* global L, Node */
+import '../../dist/leaflet-src.js';
+import '../../dist/proj4-src.js';
+import '../../dist/proj4leaflet.js';
+import '../../dist/L.Control.Locate.js';
+import './GlobalM.js';
+import { WebMap } from '../web-map';
diff --git a/src/mapml/index.js b/src/mapml/index.js
index fbd37c4b8..37b5178b3 100644
--- a/src/mapml/index.js
+++ b/src/mapml/index.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015-2016 Canada Centre for Mapping and Earth Observation,
+ * Copyright 2015-2024 Canada Centre for Mapping and Earth Observation,
  * Earth Sciences Sector, Natural Resources Canada.
  *
  * License
@@ -38,902 +38,10 @@
  * publicity pertaining to the work without specific, written prior permission.
  * Title to copyright in this work will at all times remain with copyright holders.
  */
-import { StaticTileLayer, staticTileLayer } from './layers/StaticTileLayer';
-import { LayerControl, layerControl } from './control/LayerControl';
-import { FeatureLayer, featureLayer } from './layers/FeatureLayer';
-import {
-  TemplatedTileLayer,
-  templatedTileLayer
-} from './layers/TemplatedTileLayer';
-import { ExtentLayer, extentLayer } from './layers/ExtentLayer';
-import {
-  TemplatedFeaturesLayer,
-  templatedFeaturesLayer
-} from './layers/TemplatedFeaturesLayer';
-import {
-  TemplatedImageLayer,
-  templatedImageLayer
-} from './layers/TemplatedImageLayer';
-import * as protomapsL from '../../node_modules/protomaps-leaflet/dist/esm/index.js';
-import {
-  TemplatedPMTilesLayer,
-  templatedPMTilesLayer
-} from './layers/TemplatedPMTilesLayer';
-import { ImageLayer, imageLayer } from './layers/ImageLayer';
-import { MapMLLayer, mapMLLayer } from './layers/MapMLLayer';
-import { DebugOverlay, debugOverlay } from './layers/DebugOverlay';
-import { QueryHandler } from './handlers/QueryHandler';
-import { ContextMenu } from './handlers/ContextMenu';
-import { Util } from './utils/Util';
-import {
-  AttributionButton,
-  attributionButton
-} from './control/AttributionButton';
-import { ReloadButton, reloadButton } from './control/ReloadButton';
-import { ScaleBar, scaleBar } from './control/ScaleBar';
-import { FullscreenButton, fullscreenButton } from './control/FullscreenButton';
-import { geolocationButton } from './control/GeolocationButton';
-import { Crosshair, crosshair } from './layers/Crosshair';
-import { Path, path } from './features/path';
-import { FeatureRenderer, featureRenderer } from './features/featureRenderer';
-import { Geometry, geometry } from './features/geometry';
-import { AnnounceMovement } from './handlers/AnnounceMovement';
-import { FeatureIndex } from './handlers/FeatureIndex';
-import { Options } from './options';
-import './handlers/keyboard';
-import {
-  featureIndexOverlay,
-  FeatureIndexOverlay
-} from './layers/FeatureIndexOverlay';
-// element support
-import { createLayerControlExtentHTML } from './elementSupport/extents/createLayerControlForExtent';
-import { createLayerControlHTML } from './elementSupport/layers/createLayerControlForLayer';
-import { ZoomInput } from './elementSupport/inputs/zoomInput';
-import { HiddenInput } from './elementSupport/inputs/hiddenInput';
-import { WidthInput } from './elementSupport/inputs/widthInput';
-import { HeightInput } from './elementSupport/inputs/heightInput';
-import { LocationInput } from './elementSupport/inputs/locationInput';
-
-import { DOMTokenList } from './utils/DOMTokenList';
-
 /* global L, Node */
-(function (window, document, undefined) {
-  var M = {};
-  window.M = M;
-
-  (function () {
-    M.detectImagePath = function (container) {
-      // this relies on the CSS style leaflet-default-icon-path containing a
-      // relative url() that leads to a valid icon file.  Since that depends on
-      // how all of this stuff is deployed (i.e. custom element or as leaflet-plugin)
-      // also, because we're using 'shady DOM' api, the container must be
-      // a shady dom container, because the custom element tags it with added
-      // style-scope ... and related classes.
-      var el = L.DomUtil.create('div', 'leaflet-default-icon-path', container);
-      var path =
-        L.DomUtil.getStyle(el, 'background-image') ||
-        L.DomUtil.getStyle(el, 'backgroundImage'); // IE8
-
-      container.removeChild(el);
-
-      if (path === null || path.indexOf('url') !== 0) {
-        path = '';
-      } else {
-        path = path
-          .replace(/^url\(["']?/, '')
-          .replace(/marker-icon\.png["']?\)$/, '');
-      }
-
-      return path;
-    };
-    M.mime = 'text/mapml';
-
-    let mapOptions = window.document.head.querySelector('map-options');
-    M.options = Options;
-    if (mapOptions)
-      M.options = Object.assign(M.options, JSON.parse(mapOptions.innerHTML));
-
-    // see https://leafletjs.com/reference-1.5.0.html#crs-l-crs-base
-    // "new classes can't inherit from (L.CRS), and methods can't be added
-    // to (L.CRS.anything) with the include function
-    // so we'll use the options property as a way to integrate needed
-    // properties and methods...
-    M.WGS84 = new L.Proj.CRS(
-      'EPSG:4326',
-      '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ',
-      {
-        origin: [-180, +90],
-        bounds: L.bounds([
-          [-180, -90],
-          [180, 90]
-        ]),
-        resolutions: [
-          0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
-          0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125,
-          0.001373291015625, 0.0006866455078125, 0.0003433227539062,
-          0.0001716613769531, 0.0000858306884766, 0.0000429153442383,
-          0.0000214576721191, 0.0000107288360596, 0.0000053644180298,
-          0.0000026822090149, 0.0000013411045074, 0.0000006705522537,
-          0.0000003352761269
-        ],
-        crs: {
-          tcrs: {
-            horizontal: {
-              name: 'x',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.WGS84.options.bounds.getSize().x /
-                    M.WGS84.options.resolutions[zoom]
-                )
-            },
-            vertical: {
-              name: 'y',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.WGS84.options.bounds.getSize().y /
-                    M.WGS84.options.resolutions[zoom]
-                )
-            },
-            bounds: (zoom) =>
-              L.bounds(
-                [
-                  M.WGS84.options.crs.tcrs.horizontal.min,
-                  M.WGS84.options.crs.tcrs.vertical.min
-                ],
-                [
-                  M.WGS84.options.crs.tcrs.horizontal.max(zoom),
-                  M.WGS84.options.crs.tcrs.vertical.max(zoom)
-                ]
-              )
-          },
-          pcrs: {
-            horizontal: {
-              name: 'longitude',
-              get min() {
-                return M.WGS84.options.crs.gcrs.horizontal.min;
-              },
-              get max() {
-                return M.WGS84.options.crs.gcrs.horizontal.max;
-              }
-            },
-            vertical: {
-              name: 'latitude',
-              get min() {
-                return M.WGS84.options.crs.gcrs.vertical.min;
-              },
-              get max() {
-                return M.WGS84.options.crs.gcrs.vertical.max;
-              }
-            },
-            get bounds() {
-              return M.WGS84.options.bounds;
-            }
-          },
-          gcrs: {
-            horizontal: {
-              name: 'longitude',
-              // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
-              min: -180.0,
-              max: 180.0
-            },
-            vertical: {
-              name: 'latitude',
-              // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
-              min: -90.0,
-              max: 90.0
-            },
-            get bounds() {
-              return L.latLngBounds(
-                [
-                  M.WGS84.options.crs.gcrs.vertical.min,
-                  M.WGS84.options.crs.gcrs.horizontal.min
-                ],
-                [
-                  M.WGS84.options.crs.gcrs.vertical.max,
-                  M.WGS84.options.crs.gcrs.horizontal.max
-                ]
-              );
-            }
-          },
-          map: {
-            horizontal: {
-              name: 'i',
-              min: 0,
-              max: (map) => map.getSize().x
-            },
-            vertical: {
-              name: 'j',
-              min: 0,
-              max: (map) => map.getSize().y
-            },
-            bounds: (map) => L.bounds(L.point([0, 0]), map.getSize())
-          },
-          tile: {
-            horizontal: {
-              name: 'i',
-              min: 0,
-              max: 256
-            },
-            vertical: {
-              name: 'j',
-              min: 0,
-              max: 256
-            },
-            get bounds() {
-              return L.bounds(
-                [
-                  M.WGS84.options.crs.tile.horizontal.min,
-                  M.WGS84.options.crs.tile.vertical.min
-                ],
-                [
-                  M.WGS84.options.crs.tile.horizontal.max,
-                  M.WGS84.options.crs.tile.vertical.max
-                ]
-              );
-            }
-          },
-          tilematrix: {
-            horizontal: {
-              name: 'column',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.WGS84.options.crs.tcrs.horizontal.max(zoom) /
-                    M.WGS84.options.crs.tile.bounds.getSize().x
-                )
-            },
-            vertical: {
-              name: 'row',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.WGS84.options.crs.tcrs.vertical.max(zoom) /
-                    M.WGS84.options.crs.tile.bounds.getSize().y
-                )
-            },
-            bounds: (zoom) =>
-              L.bounds(
-                [
-                  M.WGS84.options.crs.tilematrix.horizontal.min,
-                  M.WGS84.options.crs.tilematrix.vertical.min
-                ],
-                [
-                  M.WGS84.options.crs.tilematrix.horizontal.max(zoom),
-                  M.WGS84.options.crs.tilematrix.vertical.max(zoom)
-                ]
-              )
-          }
-        }
-      }
-    );
-    M.CBMTILE = new L.Proj.CRS(
-      'EPSG:3978',
-      '+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs',
-      {
-        origin: [-34655800, 39310000],
-        bounds: L.bounds([
-          [-34655800, -39000000],
-          [10000000, 39310000]
-        ]),
-        resolutions: [
-          38364.660062653464, 22489.62831258996, 13229.193125052918,
-          7937.5158750317505, 4630.2175937685215, 2645.8386250105837,
-          1587.5031750063501, 926.0435187537042, 529.1677250021168,
-          317.50063500127004, 185.20870375074085, 111.12522225044451,
-          66.1459656252646, 38.36466006265346, 22.48962831258996,
-          13.229193125052918, 7.9375158750317505, 4.6302175937685215,
-          2.6458386250105836, 1.5875031750063502, 0.92604351875370428,
-          0.52916772500211673, 0.31750063500127002, 0.18520870375074083,
-          0.11112522225044451, 0.066145965625264591
-        ],
-        crs: {
-          tcrs: {
-            horizontal: {
-              name: 'x',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.CBMTILE.options.bounds.getSize().x /
-                    M.CBMTILE.options.resolutions[zoom]
-                )
-            },
-            vertical: {
-              name: 'y',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.CBMTILE.options.bounds.getSize().y /
-                    M.CBMTILE.options.resolutions[zoom]
-                )
-            },
-            bounds: (zoom) =>
-              L.bounds(
-                [
-                  M.CBMTILE.options.crs.tcrs.horizontal.min,
-                  M.CBMTILE.options.crs.tcrs.vertical.min
-                ],
-                [
-                  M.CBMTILE.options.crs.tcrs.horizontal.max(zoom),
-                  M.CBMTILE.options.crs.tcrs.vertical.max(zoom)
-                ]
-              )
-          },
-          pcrs: {
-            horizontal: {
-              name: 'easting',
-              get min() {
-                return M.CBMTILE.options.bounds.min.x;
-              },
-              get max() {
-                return M.CBMTILE.options.bounds.max.x;
-              }
-            },
-            vertical: {
-              name: 'northing',
-              get min() {
-                return M.CBMTILE.options.bounds.min.y;
-              },
-              get max() {
-                return M.CBMTILE.options.bounds.max.y;
-              }
-            },
-            get bounds() {
-              return M.CBMTILE.options.bounds;
-            }
-          },
-          gcrs: {
-            horizontal: {
-              name: 'longitude',
-              // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
-              min: -141.01,
-              max: -47.74
-            },
-            vertical: {
-              name: 'latitude',
-              // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
-              min: 40.04,
-              max: 86.46
-            },
-            get bounds() {
-              return L.latLngBounds(
-                [
-                  M.CBMTILE.options.crs.gcrs.vertical.min,
-                  M.CBMTILE.options.crs.gcrs.horizontal.min
-                ],
-                [
-                  M.CBMTILE.options.crs.gcrs.vertical.max,
-                  M.CBMTILE.options.crs.gcrs.horizontal.max
-                ]
-              );
-            }
-          },
-          map: {
-            horizontal: {
-              name: 'i',
-              min: 0,
-              max: (map) => map.getSize().x
-            },
-            vertical: {
-              name: 'j',
-              min: 0,
-              max: (map) => map.getSize().y
-            },
-            bounds: (map) => L.bounds(L.point([0, 0]), map.getSize())
-          },
-          tile: {
-            horizontal: {
-              name: 'i',
-              min: 0,
-              max: 256
-            },
-            vertical: {
-              name: 'j',
-              min: 0,
-              max: 256
-            },
-            get bounds() {
-              return L.bounds(
-                [
-                  M.CBMTILE.options.crs.tile.horizontal.min,
-                  M.CBMTILE.options.crs.tile.vertical.min
-                ],
-                [
-                  M.CBMTILE.options.crs.tile.horizontal.max,
-                  M.CBMTILE.options.crs.tile.vertical.max
-                ]
-              );
-            }
-          },
-          tilematrix: {
-            horizontal: {
-              name: 'column',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.CBMTILE.options.crs.tcrs.horizontal.max(zoom) /
-                    M.CBMTILE.options.crs.tile.bounds.getSize().x
-                )
-            },
-            vertical: {
-              name: 'row',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.CBMTILE.options.crs.tcrs.vertical.max(zoom) /
-                    M.CBMTILE.options.crs.tile.bounds.getSize().y
-                )
-            },
-            bounds: (zoom) =>
-              L.bounds(
-                [0, 0],
-                [
-                  M.CBMTILE.options.crs.tilematrix.horizontal.max(zoom),
-                  M.CBMTILE.options.crs.tilematrix.vertical.max(zoom)
-                ]
-              )
-          }
-        }
-      }
-    );
-    M.APSTILE = new L.Proj.CRS(
-      'EPSG:5936',
-      '+proj=stere +lat_0=90 +lat_ts=50 +lon_0=-150 +k=0.994 +x_0=2000000 +y_0=2000000 +datum=WGS84 +units=m +no_defs',
-      {
-        origin: [-2.8567784109255e7, 3.2567784109255e7],
-        bounds: L.bounds([
-          [-28567784.109254867, -28567784.109254755],
-          [32567784.109255023, 32567784.10925506]
-        ]),
-        resolutions: [
-          238810.813354, 119405.406677, 59702.7033384999, 29851.3516692501,
-          14925.675834625, 7462.83791731252, 3731.41895865639, 1865.70947932806,
-          932.854739664032, 466.427369832148, 233.213684916074,
-          116.606842458037, 58.3034212288862, 29.1517106145754,
-          14.5758553072877, 7.28792765351156, 3.64396382688807,
-          1.82198191331174, 0.910990956788164, 0.45549547826179
-        ],
-        crs: {
-          tcrs: {
-            horizontal: {
-              name: 'x',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.APSTILE.options.bounds.getSize().x /
-                    M.APSTILE.options.resolutions[zoom]
-                )
-            },
-            vertical: {
-              name: 'y',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.APSTILE.options.bounds.getSize().y /
-                    M.APSTILE.options.resolutions[zoom]
-                )
-            },
-            bounds: (zoom) =>
-              L.bounds(
-                [
-                  M.APSTILE.options.crs.tcrs.horizontal.min,
-                  M.APSTILE.options.crs.tcrs.vertical.min
-                ],
-                [
-                  M.APSTILE.options.crs.tcrs.horizontal.max(zoom),
-                  M.APSTILE.options.crs.tcrs.vertical.max(zoom)
-                ]
-              )
-          },
-          pcrs: {
-            horizontal: {
-              name: 'easting',
-              get min() {
-                return M.APSTILE.options.bounds.min.x;
-              },
-              get max() {
-                return M.APSTILE.options.bounds.max.x;
-              }
-            },
-            vertical: {
-              name: 'northing',
-              get min() {
-                return M.APSTILE.options.bounds.min.y;
-              },
-              get max() {
-                return M.APSTILE.options.bounds.max.y;
-              }
-            },
-            get bounds() {
-              return M.APSTILE.options.bounds;
-            }
-          },
-          gcrs: {
-            horizontal: {
-              name: 'longitude',
-              // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
-              min: -180.0,
-              max: 180.0
-            },
-            vertical: {
-              name: 'latitude',
-              // set min/max axis values from EPSG registry area of use, retrieved 2019-07-25
-              min: 60.0,
-              max: 90.0
-            },
-            get bounds() {
-              return L.latLngBounds(
-                [
-                  M.APSTILE.options.crs.gcrs.vertical.min,
-                  M.APSTILE.options.crs.gcrs.horizontal.min
-                ],
-                [
-                  M.APSTILE.options.crs.gcrs.vertical.max,
-                  M.APSTILE.options.crs.gcrs.horizontal.max
-                ]
-              );
-            }
-          },
-          map: {
-            horizontal: {
-              name: 'i',
-              min: 0,
-              max: (map) => map.getSize().x
-            },
-            vertical: {
-              name: 'j',
-              min: 0,
-              max: (map) => map.getSize().y
-            },
-            bounds: (map) => L.bounds(L.point([0, 0]), map.getSize())
-          },
-          tile: {
-            horizontal: {
-              name: 'i',
-              min: 0,
-              max: 256
-            },
-            vertical: {
-              name: 'j',
-              min: 0,
-              max: 256
-            },
-            get bounds() {
-              return L.bounds(
-                [
-                  M.APSTILE.options.crs.tile.horizontal.min,
-                  M.APSTILE.options.crs.tile.vertical.min
-                ],
-                [
-                  M.APSTILE.options.crs.tile.horizontal.max,
-                  M.APSTILE.options.crs.tile.vertical.max
-                ]
-              );
-            }
-          },
-          tilematrix: {
-            horizontal: {
-              name: 'column',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.APSTILE.options.crs.tcrs.horizontal.max(zoom) /
-                    M.APSTILE.options.crs.tile.bounds.getSize().x
-                )
-            },
-            vertical: {
-              name: 'row',
-              min: 0,
-              max: (zoom) =>
-                Math.round(
-                  M.APSTILE.options.crs.tcrs.vertical.max(zoom) /
-                    M.APSTILE.options.crs.tile.bounds.getSize().y
-                )
-            },
-            bounds: (zoom) =>
-              L.bounds(
-                [0, 0],
-                [
-                  M.APSTILE.options.crs.tilematrix.horizontal.max(zoom),
-                  M.APSTILE.options.crs.tilematrix.vertical.max(zoom)
-                ]
-              )
-          }
-        }
-      }
-    );
-    M.OSMTILE = L.CRS.EPSG3857;
-    L.setOptions(M.OSMTILE, {
-      origin: [-20037508.342787, 20037508.342787],
-      bounds: L.bounds([
-        [-20037508.342787, -20037508.342787],
-        [20037508.342787, 20037508.342787]
-      ]),
-      resolutions: [
-        156543.0339, 78271.51695, 39135.758475, 19567.8792375, 9783.93961875,
-        4891.969809375, 2445.9849046875, 1222.9924523438, 611.49622617188,
-        305.74811308594, 152.87405654297, 76.437028271484, 38.218514135742,
-        19.109257067871, 9.5546285339355, 4.7773142669678, 2.3886571334839,
-        1.1943285667419, 0.59716428337097, 0.29858214168549, 0.14929107084274,
-        0.074645535421371, 0.03732276771068573, 0.018661383855342865,
-        0.009330691927671432495
-      ],
-      crs: {
-        tcrs: {
-          horizontal: {
-            name: 'x',
-            min: 0,
-            max: (zoom) =>
-              Math.round(
-                M.OSMTILE.options.bounds.getSize().x /
-                  M.OSMTILE.options.resolutions[zoom]
-              )
-          },
-          vertical: {
-            name: 'y',
-            min: 0,
-            max: (zoom) =>
-              Math.round(
-                M.OSMTILE.options.bounds.getSize().y /
-                  M.OSMTILE.options.resolutions[zoom]
-              )
-          },
-          bounds: (zoom) =>
-            L.bounds(
-              [
-                M.OSMTILE.options.crs.tcrs.horizontal.min,
-                M.OSMTILE.options.crs.tcrs.vertical.min
-              ],
-              [
-                M.OSMTILE.options.crs.tcrs.horizontal.max(zoom),
-                M.OSMTILE.options.crs.tcrs.vertical.max(zoom)
-              ]
-            )
-        },
-        pcrs: {
-          horizontal: {
-            name: 'easting',
-            get min() {
-              return M.OSMTILE.options.bounds.min.x;
-            },
-            get max() {
-              return M.OSMTILE.options.bounds.max.x;
-            }
-          },
-          vertical: {
-            name: 'northing',
-            get min() {
-              return M.OSMTILE.options.bounds.min.y;
-            },
-            get max() {
-              return M.OSMTILE.options.bounds.max.y;
-            }
-          },
-          get bounds() {
-            return M.OSMTILE.options.bounds;
-          }
-        },
-        gcrs: {
-          horizontal: {
-            name: 'longitude',
-            get min() {
-              return M.OSMTILE.unproject(M.OSMTILE.options.bounds.min).lng;
-            },
-            get max() {
-              return M.OSMTILE.unproject(M.OSMTILE.options.bounds.max).lng;
-            }
-          },
-          vertical: {
-            name: 'latitude',
-            get min() {
-              return M.OSMTILE.unproject(M.OSMTILE.options.bounds.min).lat;
-            },
-            get max() {
-              return M.OSMTILE.unproject(M.OSMTILE.options.bounds.max).lat;
-            }
-          },
-          get bounds() {
-            return L.latLngBounds(
-              [
-                M.OSMTILE.options.crs.gcrs.vertical.min,
-                M.OSMTILE.options.crs.gcrs.horizontal.min
-              ],
-              [
-                M.OSMTILE.options.crs.gcrs.vertical.max,
-                M.OSMTILE.options.crs.gcrs.horizontal.max
-              ]
-            );
-          }
-        },
-        map: {
-          horizontal: {
-            name: 'i',
-            min: 0,
-            max: (map) => map.getSize().x
-          },
-          vertical: {
-            name: 'j',
-            min: 0,
-            max: (map) => map.getSize().y
-          },
-          bounds: (map) => L.bounds(L.point([0, 0]), map.getSize())
-        },
-        tile: {
-          horizontal: {
-            name: 'i',
-            min: 0,
-            max: 256
-          },
-          vertical: {
-            name: 'j',
-            min: 0,
-            max: 256
-          },
-          get bounds() {
-            return L.bounds(
-              [
-                M.OSMTILE.options.crs.tile.horizontal.min,
-                M.OSMTILE.options.crs.tile.vertical.min
-              ],
-              [
-                M.OSMTILE.options.crs.tile.horizontal.max,
-                M.OSMTILE.options.crs.tile.vertical.max
-              ]
-            );
-          }
-        },
-        tilematrix: {
-          horizontal: {
-            name: 'column',
-            min: 0,
-            max: (zoom) =>
-              Math.round(
-                M.OSMTILE.options.crs.tcrs.horizontal.max(zoom) /
-                  M.OSMTILE.options.crs.tile.bounds.getSize().x
-              )
-          },
-          vertical: {
-            name: 'row',
-            min: 0,
-            max: (zoom) =>
-              Math.round(
-                M.OSMTILE.options.crs.tcrs.vertical.max(zoom) /
-                  M.OSMTILE.options.crs.tile.bounds.getSize().y
-              )
-          },
-          bounds: (zoom) =>
-            L.bounds(
-              [0, 0],
-              [
-                M.OSMTILE.options.crs.tilematrix.horizontal.max(zoom),
-                M.OSMTILE.options.crs.tilematrix.vertical.max(zoom)
-              ]
-            )
-        }
-      }
-    });
-  })();
-
-  M._handleLink = Util._handleLink;
-  M.convertPCRSBounds = Util.convertPCRSBounds;
-  M.axisToXY = Util.axisToXY;
-  M.csToAxes = Util.csToAxes;
-  M._convertAndFormatPCRS = Util._convertAndFormatPCRS;
-  M.extentToBounds = Util.extentToBounds;
-  M.axisToCS = Util.axisToCS;
-  M._parseNumber = Util._parseNumber;
-  M._splitCoordinate = Util._splitCoordinate;
-  M.boundsToPCRSBounds = Util.boundsToPCRSBounds;
-  M.pixelToPCRSBounds = Util.pixelToPCRSBounds;
-  M._metaContentToObject = Util._metaContentToObject;
-  M._coordsToArray = Util._coordsToArray;
-  M.pointToPCRSPoint = Util.pointToPCRSPoint;
-  M.pixelToPCRSPoint = Util.pixelToPCRSPoint;
-  M._gcrsToTileMatrix = Util._gcrsToTileMatrix;
-  M._pasteLayer = Util._pasteLayer;
-  M._properties2Table = Util._properties2Table;
-  M._updateExtent = Util._updateExtent;
-  M.geojson2mapml = Util.geojson2mapml;
-  M._breakArray = Util._breakArray;
-  M._table2properties = Util._table2properties;
-  M._geometry2geojson = Util._geometry2geojson;
-  M._pcrsToGcrs = Util._pcrsToGcrs;
-  M.mapml2geojson = Util.mapml2geojson;
-  M.getMaxZoom = Util.getMaxZoom;
-  M.getBoundsFromMeta = Util.getBoundsFromMeta;
-  M.getZoomBoundsFromMeta = Util.getZoomBoundsFromMeta;
-  M.getZoomBounds = Util.getZoomBounds;
-  M.getNativeVariables = Util.getNativeVariables;
-  M.getClosest = Util.getClosest;
-
-  M.QueryHandler = QueryHandler;
-  M.ContextMenu = ContextMenu;
-  M.AnnounceMovement = AnnounceMovement;
-  M.FeatureIndex = FeatureIndex;
-
-  // see https://leafletjs.com/examples/extending/extending-3-controls.html#handlers
-  L.Map.addInitHook('addHandler', 'query', M.QueryHandler);
-  L.Map.addInitHook('addHandler', 'contextMenu', M.ContextMenu);
-  L.Map.addInitHook('addHandler', 'announceMovement', M.AnnounceMovement);
-  L.Map.addInitHook('addHandler', 'featureIndex', M.FeatureIndex);
-
-  M.MapMLLayer = MapMLLayer;
-  M.mapMLLayer = mapMLLayer;
-
-  M.ImageLayer = ImageLayer;
-  M.imageLayer = imageLayer;
-
-  M.TemplatedImageLayer = TemplatedImageLayer;
-  M.templatedImageLayer = templatedImageLayer;
-
-  M.TemplatedFeaturesLayer = TemplatedFeaturesLayer;
-  M.templatedFeaturesLayer = templatedFeaturesLayer;
-
-  M.ExtentLayer = ExtentLayer;
-  M.extentLayer = extentLayer;
-
-  M.TemplatedTileLayer = TemplatedTileLayer;
-  M.templatedTileLayer = templatedTileLayer;
-
-  M.FeatureLayer = FeatureLayer;
-  M.featureLayer = featureLayer;
-
-  M.LayerControl = LayerControl;
-  M.layerControl = layerControl;
-
-  M.AttributionButton = AttributionButton;
-  M.attributionButton = attributionButton;
-
-  M.ReloadButton = ReloadButton;
-  M.reloadButton = reloadButton;
-
-  M.ScaleBar = ScaleBar;
-  M.scaleBar = scaleBar;
-
-  M.FullscreenButton = FullscreenButton;
-  M.fullscreenButton = fullscreenButton;
-
-  M.geolocationButton = geolocationButton;
-
-  M.StaticTileLayer = StaticTileLayer;
-  M.staticTileLayer = staticTileLayer;
-
-  M.DebugOverlay = DebugOverlay;
-  M.debugOverlay = debugOverlay;
-
-  M.Crosshair = Crosshair;
-  M.crosshair = crosshair;
-
-  M.FeatureIndexOverlay = FeatureIndexOverlay;
-  M.featureIndexOverlay = featureIndexOverlay;
-
-  M.Path = Path;
-  M.path = path;
-
-  M.FeatureRenderer = FeatureRenderer;
-  M.featureRenderer = featureRenderer;
-
-  M.Geometry = Geometry;
-  M.geometry = geometry;
-
-  // element support
-  M._createLayerControlExtentHTML = createLayerControlExtentHTML;
-  M._createLayerControlHTML = createLayerControlHTML;
-  M.ZoomInput = ZoomInput;
-  M.HiddenInput = HiddenInput;
-  M.WidthInput = WidthInput;
-  M.HeightInput = HeightInput;
-  M.LocationInput = LocationInput;
-
-  // constants
-  M.TILE_SIZE = 256;
-  M.FALLBACK_PROJECTION = 'OSMTILE';
-  M.FALLBACK_CS = 'TILEMATRIX';
-  M.BLANK_TT_TREF = 'mapmltemplatedtileplaceholder';
-
-  M.DOMTokenList = DOMTokenList;
-  M.protomapsL = protomapsL;
-  M.templatedPMTilesLayer = templatedPMTilesLayer;
-  M.TemplatedPMTilesLayer = TemplatedPMTilesLayer;
-})(window, document);
+import '../../dist/leaflet-src.js';
+import '../../dist/proj4-src.js';
+import '../../dist/proj4leaflet.js';
+import '../../dist/L.Control.Locate.js';
+import './GlobalM.js';
+import { MapViewer } from '../mapml-viewer';
diff --git a/src/mapml/layers/FeatureIndexOverlay.js b/src/mapml/layers/FeatureIndexOverlay.js
index 677cd39e7..1fe22a5b3 100644
--- a/src/mapml/layers/FeatureIndexOverlay.js
+++ b/src/mapml/layers/FeatureIndexOverlay.js
@@ -1,3 +1,4 @@
+import { Util } from '../utils/Util';
 export var FeatureIndexOverlay = L.Layer.extend({
   onAdd: function (map) {
     let svgInnerHTML = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 100 100"><path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M0 0h100v100H0z" color="#000" overflow="visible"/></svg>`;
@@ -51,7 +52,7 @@ export var FeatureIndexOverlay = L.Layer.extend({
     let minPoint = L.point(center.x - w, center.y + h);
     let maxPoint = L.point(center.x + w, center.y - h);
     let b = L.bounds(minPoint, maxPoint);
-    return M.pixelToPCRSBounds(
+    return Util.pixelToPCRSBounds(
       b,
       this._map.getZoom(),
       this._map.options.projection
diff --git a/src/mapml/layers/FeatureLayer.js b/src/mapml/layers/FeatureLayer.js
index 219ea18dc..af5909f02 100644
--- a/src/mapml/layers/FeatureLayer.js
+++ b/src/mapml/layers/FeatureLayer.js
@@ -1,3 +1,7 @@
+import { Util } from '../utils/Util';
+import { path } from '../features/path';
+import { geometry } from '../features/geometry';
+
 export var FeatureLayer = L.FeatureGroup.extend({
   /*
    * M.MapML turns any MapML feature data into a Leaflet layer. Based on L.GeoJSON.
@@ -94,7 +98,7 @@ export var FeatureLayer = L.FeatureGroup.extend({
         this._layers &&
         layerBounds &&
         layerBounds.overlaps(
-          M.pixelToPCRSBounds(
+          Util.pixelToPCRSBounds(
             map.getPixelBounds(),
             mapZoom,
             map.options.projection
@@ -227,7 +231,7 @@ export var FeatureLayer = L.FeatureGroup.extend({
   /**
    * Remove the geomtry rendering (an svg g/ M.Geomtry) from the L.FeatureGroup
    * _layers array, so that it's not visible on the map, but still contributes
-   * to the bounds and zoom limits of the M.FeatureLayer.
+   * to the bounds and zoom limits of the FeatureLayer.
    *
    * @param {type} featureToRemove
    * @returns {undefined}
@@ -371,14 +375,14 @@ export var FeatureLayer = L.FeatureGroup.extend({
    * Render a <map-feature> as a Leaflet layer that can be added to a map or
    * LayerGroup as required.  Kind of a "factory" method.
    *
-   * Uses this.options, so if you need to, you can construct an M.featureLayer
+   * Uses this.options, so if you need to, you can construct a FeatureLayer
    * with options set as required
    *
    * @param feature - a <map-feature> element
    * @param {String} fallbackCS - "gcrs" | "pcrs"
    * @param {String} tileZoom - the zoom of the map at which the coordinates will exist
    *
-   * @returns M.Geometry, which is an L.FeatureGroup
+   * @returns Geometry, which is an L.FeatureGroup
    * @public
    */
   createGeometry: function (feature, fallbackCS, tileZoom) {
@@ -416,26 +420,26 @@ export var FeatureLayer = L.FeatureGroup.extend({
     // options.layerBounds and options.zoomBounds are set by TemplatedTileLayer._createFeatures
     // each geometry needs bounds so that it can be a good community member of this._layers
     if (this._staticFeature || this.options.query) {
-      options.layerBounds = M.extentToBounds(feature.extent, 'PCRS');
+      options.layerBounds = Util.extentToBounds(feature.extent, 'PCRS');
       options.zoomBounds = feature.extent.zoom;
     }
-    let geometry = this._geometryToLayer(feature, options, cs, +zoom, title);
-    if (geometry && Object.keys(geometry._layers).length !== 0) {
+    let geom = this._geometryToLayer(feature, options, cs, +zoom, title);
+    if (geom && Object.keys(geom._layers).length !== 0) {
       // if the layer is being used as a query handler output, it will have
       // a color option set.  Otherwise, copy classes from the feature
-      if (!geometry.options.color && feature.hasAttribute('class')) {
-        geometry.options.className = feature.getAttribute('class');
+      if (!geom.options.color && feature.hasAttribute('class')) {
+        geom.options.className = feature.getAttribute('class');
       }
-      geometry.defaultOptions = geometry.options;
-      this.resetStyle(geometry);
+      geom.defaultOptions = geom.options;
+      this.resetStyle(geom);
 
       if (options.onEachFeature) {
-        geometry.bindTooltip(title, { interactive: true, sticky: true });
+        geom.bindTooltip(title, { interactive: true, sticky: true });
       }
       if (feature.tagName.toUpperCase() === 'MAP-FEATURE') {
-        feature._groupEl = geometry.options.group;
+        feature._groupEl = geom.options.group;
       }
-      return geometry;
+      return geom;
     }
   },
 
@@ -471,18 +475,18 @@ export var FeatureLayer = L.FeatureGroup.extend({
     }
   },
   _geometryToLayer: function (feature, vectorOptions, cs, zoom, title) {
-    let geometry = feature.getElementsByTagName('map-geometry')[0],
+    let geom = feature.getElementsByTagName('map-geometry')[0],
       group = [],
       groupOptions = {},
       svgGroup = L.SVG.create('g'),
       copyOptions = Object.assign({}, vectorOptions);
     svgGroup._featureEl = feature; // rendered <g> has a reference to map-feature
-    if (geometry) {
-      for (let geo of geometry.querySelectorAll(
+    if (geom) {
+      for (let geo of geom.querySelectorAll(
         'map-polygon, map-linestring, map-multilinestring, map-point, map-multipoint'
       )) {
         group.push(
-          M.path(
+          path(
             geo,
             Object.assign(copyOptions, {
               nativeCS: cs,
@@ -509,13 +513,13 @@ export var FeatureLayer = L.FeatureGroup.extend({
           zoomBounds: vectorOptions.zoomBounds
         },
         collections =
-          geometry.querySelector('map-multipolygon') ||
-          geometry.querySelector('map-geometrycollection');
+          geom.querySelector('map-multipolygon') ||
+          geom.querySelector('map-geometrycollection');
       if (collections)
         groupOptions.wrappers = this._getGeometryParents(
           collections.parentElement
         );
-      return M.geometry(group, groupOptions);
+      return geometry(group, groupOptions);
     }
   },
 
diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
index b606d9c7b..336e116f0 100644
--- a/src/mapml/layers/MapMLLayer.js
+++ b/src/mapml/layers/MapMLLayer.js
@@ -1,3 +1,8 @@
+import { Util } from '../utils/Util';
+import { featureLayer } from './FeatureLayer';
+import { staticTileLayer } from './StaticTileLayer';
+import { featureRenderer } from '../features/featureRenderer';
+
 export var MapMLLayer = L.LayerGroup.extend({
   options: {
     zIndex: 0,
@@ -94,18 +99,18 @@ export var MapMLLayer = L.LayerGroup.extend({
       this._layerEl.shadowRoot.querySelector(
         ':host > map-meta[name=extent][content]'
       )
-        ? M.getBoundsFromMeta(this._layerEl.shadowRoot)
+        ? Util.getBoundsFromMeta(this._layerEl.shadowRoot)
         : this._layerEl.querySelector(':scope > map-meta[name=extent][content]')
-        ? M.getBoundsFromMeta(this._layerEl)
+        ? Util.getBoundsFromMeta(this._layerEl)
         : undefined;
     zoomBounds =
       this._layerEl.src &&
       this._layerEl.shadowRoot.querySelector(
         ':host > map-meta[name=zoom][content]'
       )
-        ? M.getZoomBoundsFromMeta(this._layerEl.shadowRoot)
+        ? Util.getZoomBoundsFromMeta(this._layerEl.shadowRoot)
         : this._layerEl.querySelector(':scope > map-meta[name=zoom][content]')
-        ? M.getZoomBoundsFromMeta(this._layerEl)
+        ? Util.getZoomBoundsFromMeta(this._layerEl)
         : undefined;
     const mapExtents = this._layerEl.src
       ? this._layerEl.shadowRoot.querySelectorAll('map-extent')
@@ -277,11 +282,11 @@ export var MapMLLayer = L.LayerGroup.extend({
     // and that of the map, if there is a linked alternate text/mapml
     // resource that matches the map's projection
     function processFeatures() {
-      let native = M.getNativeVariables(layer._content);
-      layer._mapmlvectors = M.featureLayer(null, {
+      let native = Util.getNativeVariables(layer._content);
+      layer._mapmlvectors = featureLayer(null, {
         // pass the vector layer a renderer of its own, otherwise leaflet
         // puts everything into the overlayPane
-        renderer: M.featureRenderer(),
+        renderer: featureRenderer(),
         // pass the vector layer the container for the parent into which
         // it will append its own container for rendering into
         pane: layer._container,
@@ -322,7 +327,7 @@ export var MapMLLayer = L.LayerGroup.extend({
           tiles.appendChild(document.importNode(newTiles[nt], true));
         }
         layer._mapmlTileContainer.appendChild(tiles);
-        layer._staticTileLayer = M.staticTileLayer({
+        layer._staticTileLayer = staticTileLayer({
           pane: layer._container,
           _leafletLayer: layer,
           projection: layer.options.projection,
diff --git a/src/mapml/layers/StaticTileLayer.js b/src/mapml/layers/StaticTileLayer.js
index b9dc539c2..cb693a143 100644
--- a/src/mapml/layers/StaticTileLayer.js
+++ b/src/mapml/layers/StaticTileLayer.js
@@ -1,3 +1,4 @@
+import { Util } from '../utils/Util';
 export var StaticTileLayer = L.GridLayer.extend({
   initialize: function (options) {
     L.setOptions(this, options);
@@ -47,7 +48,7 @@ export var StaticTileLayer = L.GridLayer.extend({
       mapZoom >= this.zoomBounds.minZoom &&
       this._bounds[zoomLevel] &&
       this._bounds[zoomLevel].overlaps(
-        M.pixelToPCRSBounds(
+        Util.pixelToPCRSBounds(
           this._map.getPixelBounds(),
           this._map.getZoom(),
           this._map.options.projection
@@ -112,7 +113,7 @@ export var StaticTileLayer = L.GridLayer.extend({
     // won't be needed
     for (let pixelBounds in layerBounds) {
       let zoom = +pixelBounds;
-      layerBounds[pixelBounds] = M.pixelToPCRSBounds(
+      layerBounds[pixelBounds] = Util.pixelToPCRSBounds(
         layerBounds[pixelBounds],
         zoom,
         projection
@@ -124,7 +125,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
-    let meta = M._metaContentToObject(
+    let meta = Util._metaContentToObject(
         this.options._leafletLayer._layerEl
           .querySelector('map-meta[name=zoom]')
           .getAttribute('content')
diff --git a/src/mapml/layers/TemplatedFeaturesLayer.js b/src/mapml/layers/TemplatedFeaturesLayer.js
index 3ca9a8019..f309a94dc 100644
--- a/src/mapml/layers/TemplatedFeaturesLayer.js
+++ b/src/mapml/layers/TemplatedFeaturesLayer.js
@@ -1,3 +1,7 @@
+import { Util } from '../utils/Util';
+import { featureLayer } from '../layers/FeatureLayer';
+import { featureRenderer } from '../features/featureRenderer';
+
 export var TemplatedFeaturesLayer = L.Layer.extend({
   // this and M.ImageLayer could be merged or inherit from a common parent
   initialize: function (template, options) {
@@ -19,7 +23,7 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
   isVisible: function () {
     let map = this._linkEl.getMapEl()._map;
     let mapZoom = map.getZoom();
-    let mapBounds = M.pixelToPCRSBounds(
+    let mapBounds = Util.pixelToPCRSBounds(
       map.getPixelBounds(),
       mapZoom,
       map.options.projection
@@ -44,10 +48,10 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
     var opacity = this.options.opacity || 1,
       container = this._container;
     if (!this._features) {
-      this._features = M.featureLayer(null, {
+      this._features = featureLayer(null, {
         // pass the vector layer a renderer of its own, otherwise leaflet
         // puts everything into the overlayPane
-        renderer: M.featureRenderer(),
+        renderer: featureRenderer(),
         // pass the vector layer the container for the parent into which
         // it will append its own container for rendering into
         pane: container,
@@ -215,7 +219,7 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
         map.addLayer(featureLayer);
         //Fires event for feature index overlay
         map.fire('templatedfeatureslayeradd');
-        M.TemplatedFeaturesLayer.prototype._updateTabIndex(context);
+        TemplatedFeaturesLayer.prototype._updateTabIndex(context);
       })
       .catch(function (error) {
         console.log(error);
diff --git a/src/mapml/layers/TemplatedImageLayer.js b/src/mapml/layers/TemplatedImageLayer.js
index 38e3efe6a..9d713857b 100644
--- a/src/mapml/layers/TemplatedImageLayer.js
+++ b/src/mapml/layers/TemplatedImageLayer.js
@@ -1,3 +1,6 @@
+import { Util } from '../utils/Util';
+import { ImageLayer, imageLayer } from './ImageLayer';
+
 export var TemplatedImageLayer = L.Layer.extend({
   initialize: function (template, options) {
     this._template = template;
@@ -34,7 +37,7 @@ export var TemplatedImageLayer = L.Layer.extend({
   isVisible: function () {
     let map = this._linkEl.getMapEl()._map;
     let mapZoom = map.getZoom();
-    let mapBounds = M.pixelToPCRSBounds(
+    let mapBounds = Util.pixelToPCRSBounds(
       map.getPixelBounds(),
       mapZoom,
       map.options.projection
@@ -57,7 +60,7 @@ export var TemplatedImageLayer = L.Layer.extend({
     let overlayToRemove = this._imageOverlay;
     let src = this.getImageUrl(bounds, zoom);
     let size = map.getSize();
-    this._imageOverlay = M.imageLayer(src, loc, size, 0, this._container);
+    this._imageOverlay = imageLayer(src, loc, size, 0, this._container);
     this._imageOverlay._step = this._template.step;
     this._imageOverlay.addTo(map);
     if (overlayToRemove) {
diff --git a/src/mapml/layers/TemplatedPMTilesLayer.js b/src/mapml/layers/TemplatedPMTilesLayer.js
index f7863d4c3..2784a73e2 100644
--- a/src/mapml/layers/TemplatedPMTilesLayer.js
+++ b/src/mapml/layers/TemplatedPMTilesLayer.js
@@ -1,3 +1,5 @@
+import { Util } from '../utils/Util';
+import * as protomapsL from '../../../node_modules/protomaps-leaflet/dist/esm/index.js';
 /* global L */
 
 export var TemplatedPMTilesLayer = L.Layer.extend({
@@ -85,7 +87,7 @@ export var TemplatedPMTilesLayer = L.Layer.extend({
     this._map = map;
     this.options.pane.appendChild(this._container);
     this.setZIndex(this.options.zIndex);
-    this._pmtilesLayer = M.protomapsL
+    this._pmtilesLayer = protomapsL
       .leafletLayer(this._pmtilesOptions)
       .addTo(map);
   },
@@ -97,7 +99,7 @@ export var TemplatedPMTilesLayer = L.Layer.extend({
     if (this._template.projection !== 'OSMTILE') return false;
     let map = this._linkEl.getMapEl()._map;
     let mapZoom = map.getZoom();
-    let mapBounds = M.pixelToPCRSBounds(
+    let mapBounds = Util.pixelToPCRSBounds(
       map.getPixelBounds(),
       mapZoom,
       map.options.projection
diff --git a/src/mapml/layers/TemplatedTileLayer.js b/src/mapml/layers/TemplatedTileLayer.js
index 1434144d5..ccc4eeb0d 100644
--- a/src/mapml/layers/TemplatedTileLayer.js
+++ b/src/mapml/layers/TemplatedTileLayer.js
@@ -1,3 +1,7 @@
+import { Util } from '../utils/Util';
+import { featureLayer } from '../layers/FeatureLayer';
+import { FeatureRenderer } from '../features/featureRenderer';
+
 export var TemplatedTileLayer = L.TileLayer.extend({
   // a TemplateTileLayer is similar to a L.TileLayer except its templates are
   // defined by the <map-extent><template/></map-extent>
@@ -61,7 +65,7 @@ export var TemplatedTileLayer = L.TileLayer.extend({
   isVisible: function () {
     let map = this._linkEl.getMapEl()._map;
     let mapZoom = map.getZoom();
-    let mapBounds = M.pixelToPCRSBounds(
+    let mapBounds = Util.pixelToPCRSBounds(
       map.getPixelBounds(),
       mapZoom,
       map.options.projection
@@ -249,7 +253,7 @@ export var TemplatedTileLayer = L.TileLayer.extend({
       xOffset = coords.x * tileSize,
       yOffset = coords.y * tileSize;
 
-    let tileFeatures = M.featureLayer(null, {
+    let tileFeatures = featureLayer(null, {
       projection: this._map.options.projection,
       tiles: true,
       layerBounds: this.extentBounds,
@@ -257,7 +261,7 @@ export var TemplatedTileLayer = L.TileLayer.extend({
       interactive: false,
       mapEl: this._linkEl.getMapEl()
     });
-    let fallback = M.getNativeVariables(markup);
+    let fallback = Util.getNativeVariables(markup);
     let features = markup.querySelectorAll('map-feature:has(> map-geometry)');
     for (let i = 0; i < features.length; i++) {
       let feature = tileFeatures.createGeometry(
@@ -267,10 +271,10 @@ export var TemplatedTileLayer = L.TileLayer.extend({
       );
       for (let featureID in feature._layers) {
         let layer = feature._layers[featureID];
-        M.FeatureRenderer.prototype._initPath(layer, false);
+        FeatureRenderer.prototype._initPath(layer, false);
         layer._project(this._map, L.point([xOffset, yOffset]), coords.z);
-        M.FeatureRenderer.prototype._addPath(layer, g, false);
-        M.FeatureRenderer.prototype._updateFeature(layer);
+        FeatureRenderer.prototype._addPath(layer, g, false);
+        FeatureRenderer.prototype._updateFeature(layer);
       }
     }
     svg.setAttribute('width', tileSize.toString());
@@ -549,11 +553,11 @@ export var TemplatedTileLayer = L.TileLayer.extend({
         template.pcrs.northing = '';
       }
 
-      template.pcrs.bounds = M.boundsToPCRSBounds(
+      template.pcrs.bounds = Util.boundsToPCRSBounds(
         L.bounds(L.point([col.min, row.min]), L.point([col.max, row.max])),
         template.zoom.initialValue,
         this.options.crs,
-        M.axisToCS('column')
+        Util.axisToCS('column')
       );
 
       template.tilematrix = {};
diff --git a/src/mapml/utils/Util.js b/src/mapml/utils/Util.js
index e7e9f35c9..8ee8109e0 100644
--- a/src/mapml/utils/Util.js
+++ b/src/mapml/utils/Util.js
@@ -1,4 +1,4 @@
-export var Util = {
+export const Util = {
   // _convertAndFormatPCRS returns the converted CRS and formatted pcrsBounds in gcrs, pcrs, tcrs, and tilematrix. Used for setting extent for the map and layer (map.extent, layer.extent).
   // _convertAndFormatPCRS: L.Bounds, _map, projection -> {...}
   _convertAndFormatPCRS: function (pcrsBounds, crs, projection) {
@@ -246,7 +246,7 @@ export var Util = {
     let tileSize = projection.options.crs.tile.bounds.max.x;
     switch (cs.toUpperCase()) {
       case 'TILEMATRIX':
-        return M.pixelToPCRSPoint(
+        return Util.pixelToPCRSPoint(
           L.point(point.x * tileSize, point.y * tileSize),
           zoom,
           projection
@@ -254,7 +254,7 @@ export var Util = {
       case 'PCRS':
         return point;
       case 'TCRS' || 'TILE':
-        return M.pixelToPCRSPoint(point, zoom, projection);
+        return Util.pixelToPCRSPoint(point, zoom, projection);
       case 'GCRS':
         return projection.project(L.latLng(point.y, point.x));
       default:
@@ -292,8 +292,8 @@ export var Util = {
       return undefined;
     projection = typeof projection === 'string' ? M[projection] : projection;
     return L.bounds(
-      M.pointToPCRSPoint(bounds.min, zoom, projection, cs),
-      M.pointToPCRSPoint(bounds.max, zoom, projection, cs)
+      Util.pointToPCRSPoint(bounds.min, zoom, projection, cs),
+      Util.pointToPCRSPoint(bounds.max, zoom, projection, cs)
     );
   },
 
@@ -311,8 +311,8 @@ export var Util = {
       return undefined;
     projection = typeof projection === 'string' ? M[projection] : projection;
     return L.bounds(
-      M.pixelToPCRSPoint(bounds.min, zoom, projection),
-      M.pixelToPCRSPoint(bounds.max, zoom, projection)
+      Util.pixelToPCRSPoint(bounds.min, zoom, projection),
+      Util.pixelToPCRSPoint(bounds.max, zoom, projection)
     );
   },
 
@@ -349,7 +349,7 @@ export var Util = {
   // _splitCoordinate splits string coordinates to an array as floating point numbers
   _splitCoordinate: function (element, index, array) {
     var a = [];
-    element.split(/\s+/gim).forEach(M._parseNumber, a);
+    element.split(/\s+/gim).forEach(Util._parseNumber, a);
     this.push(a);
   },
 
@@ -452,7 +452,7 @@ export var Util = {
       pseudo = mapml instanceof ShadowRoot ? ':host' : ':scope',
       projection =
         (mapml.querySelector(pseudo + ' > map-meta[name=projection]') &&
-          M._metaContentToObject(
+          Util._metaContentToObject(
             mapml
               .querySelector(pseudo + ' > map-meta[name=projection]')
               .getAttribute('content')
@@ -461,7 +461,7 @@ export var Util = {
     try {
       let meta =
         mapml.querySelector(pseudo + ' > map-meta[name=extent]') &&
-        M._metaContentToObject(
+        Util._metaContentToObject(
           mapml
             .querySelector(pseudo + ' > map-meta[name=extent]')
             .getAttribute('content')
@@ -472,7 +472,7 @@ export var Util = {
       let metaKeys = Object.keys(meta);
       for (let i = 0; i < metaKeys.length; i++) {
         if (!metaKeys[i].includes('zoom')) {
-          cs = M.axisToCS(metaKeys[i].split('-')[2]);
+          cs = Util.axisToCS(metaKeys[i].split('-')[2]);
           break;
         }
       }
@@ -489,8 +489,8 @@ export var Util = {
         throw new Error(
           'map-meta[name=extent] zoom= parameter not provided for tcrs,tile or tilematrix bounds'
         );
-      let axes = M.csToAxes(cs);
-      return M.boundsToPCRSBounds(
+      let axes = Util.csToAxes(cs);
+      return Util.boundsToPCRSBounds(
         L.bounds(
           L.point(+meta[`top-left-${axes[0]}`], +meta[`top-left-${axes[1]}`]),
           L.point(
@@ -504,7 +504,7 @@ export var Util = {
       );
     } catch (error) {
       //if error then by default set the layer to osm and bounds to the entire map view
-      return M.boundsToPCRSBounds(
+      return Util.boundsToPCRSBounds(
         M[projection].options.crs.tilematrix.bounds(0),
         0,
         projection,
@@ -523,7 +523,7 @@ export var Util = {
     if (!mapml) return null;
     let pseudo = mapml instanceof ShadowRoot ? ':host' : ':scope';
 
-    let meta = M._metaContentToObject(
+    let meta = Util._metaContentToObject(
       mapml
         .querySelector(pseudo + '> map-meta[name=zoom]')
         .getAttribute('content')
@@ -563,10 +563,10 @@ export var Util = {
       nMin = Math.min(nMin, lZoom);
     }
     try {
-      projection = M._metaContentToObject(
+      projection = Util._metaContentToObject(
         mapml.querySelector('map-meta[name=projection]').getAttribute('content')
       ).content;
-      meta = M._metaContentToObject(
+      meta = Util._metaContentToObject(
         mapml.querySelector('map-meta[name=zoom]').getAttribute('content')
       );
     } catch (error) {
@@ -602,14 +602,14 @@ export var Util = {
       nativeZoom =
         (mapmlEl.querySelector &&
           mapmlEl.querySelector('map-meta[name=zoom]') &&
-          +M._metaContentToObject(
+          +Util._metaContentToObject(
             mapmlEl.querySelector('map-meta[name=zoom]').getAttribute('content')
           ).value) ||
         0;
       nativeCS =
         (mapmlEl.querySelector &&
           mapmlEl.querySelector('map-meta[name=cs]') &&
-          M._metaContentToObject(
+          Util._metaContentToObject(
             mapmlEl.querySelector('map-meta[name=cs]').getAttribute('content')
           ).content) ||
         'GCRS';
@@ -618,14 +618,14 @@ export var Util = {
       nativeZoom =
         (mapml.querySelector &&
           mapml.querySelector('map-meta[name=zoom]') &&
-          +M._metaContentToObject(
+          +Util._metaContentToObject(
             mapml.querySelector('map-meta[name=zoom]').getAttribute('content')
           ).value) ||
         0;
       nativeCS =
         (mapml.querySelector &&
           mapml.querySelector('map-meta[name=cs]') &&
-          M._metaContentToObject(
+          Util._metaContentToObject(
             mapml.querySelector('map-meta[name=cs]').getAttribute('content')
           ).content) ||
         'GCRS';
@@ -872,7 +872,7 @@ export var Util = {
       let features = json.features;
       //console.log("Features length - " + features.length);
       for (let l = 0; l < features.length; l++) {
-        M.geojson2mapml(features[l], options, layer, bboxExtent);
+        Util.geojson2mapml(features[l], options, layer, bboxExtent);
       }
     } else if (jsonType === 'FEATURE') {
       let clone_feature = feature.cloneNode(true);
@@ -946,7 +946,7 @@ export var Util = {
         p = options.properties;
       } else {
         // If no properties function, string or HTMLElement is passed
-        p = M._properties2Table(json.properties);
+        p = Util._properties2Table(json.properties);
       }
 
       if (p) {
@@ -954,7 +954,7 @@ export var Util = {
       }
 
       // Setting map-geometry
-      let g = M.geojson2mapml(json.geometry, options, layer, bboxExtent);
+      let g = Util.geojson2mapml(json.geometry, options, layer, bboxExtent);
       if (typeof options.geometryFunction === 'function') {
         curr_feature
           .querySelector('map-geometry')
@@ -969,7 +969,7 @@ export var Util = {
       //console.log("Geometry Type - " + jsonType);
       switch (jsonType) {
         case 'POINT':
-          bboxExtent = M._updateExtent(
+          bboxExtent = Util._updateExtent(
             bboxExtent,
             json.coordinates[0],
             json.coordinates[1]
@@ -998,7 +998,7 @@ export var Util = {
           out = '';
 
           for (let x = 0; x < json.coordinates.length; x++) {
-            bboxExtent = M._updateExtent(
+            bboxExtent = Util._updateExtent(
               bboxExtent,
               json.coordinates[x][0],
               json.coordinates[x][1]
@@ -1023,7 +1023,7 @@ export var Util = {
 
             // Going over coordinates for the polygon
             for (let x = 0; x < json.coordinates[y].length; x++) {
-              bboxExtent = M._updateExtent(
+              bboxExtent = Util._updateExtent(
                 bboxExtent,
                 json.coordinates[y][x][0],
                 json.coordinates[y][x][1]
@@ -1051,7 +1051,7 @@ export var Util = {
           clone_multipoint = clone_multipoint.querySelector('map-multipoint');
 
           for (let i = 0; i < json.coordinates.length; i++) {
-            bboxExtent = M._updateExtent(
+            bboxExtent = Util._updateExtent(
               bboxExtent,
               json.coordinates[i][0],
               json.coordinates[i][1]
@@ -1073,7 +1073,7 @@ export var Util = {
             let clone_coords = coords.cloneNode(true);
             clone_coords = clone_coords.querySelector('map-coordinates');
             for (let y = 0; y < json.coordinates[i].length; y++) {
-              bboxExtent = M._updateExtent(
+              bboxExtent = Util._updateExtent(
                 bboxExtent,
                 json.coordinates[i][y][0],
                 json.coordinates[i][y][1]
@@ -1107,7 +1107,7 @@ export var Util = {
 
               // Going over coordinates for the polygon
               for (let x = 0; x < json.coordinates[i][y].length; x++) {
-                bboxExtent = M._updateExtent(
+                bboxExtent = Util._updateExtent(
                   bboxExtent,
                   json.coordinates[i][y][x][0],
                   json.coordinates[i][y][x][1]
@@ -1133,7 +1133,7 @@ export var Util = {
           g = g.querySelector('map-geometrycollection');
           //console.log(json.geometries);
           for (let i = 0; i < json.geometries.length; i++) {
-            let fg = M.geojson2mapml(
+            let fg = Util.geojson2mapml(
               json.geometries[i],
               options,
               layer,
@@ -1233,9 +1233,9 @@ export var Util = {
       case 'MAP-LINESTRING':
         j.type = 'LineString';
         coord = el.querySelector('map-coordinates').innerHTML.split(/[<>\ ]/g);
-        coord = M._breakArray(coord);
+        coord = Util._breakArray(coord);
         if (transform) {
-          coord = M._pcrsToGcrs(coord, source, dest);
+          coord = Util._pcrsToGcrs(coord, source, dest);
         }
         j.coordinates = coord;
         break;
@@ -1245,9 +1245,9 @@ export var Util = {
         let x = 0;
         el.querySelectorAll('map-coordinates').forEach((coord) => {
           coord = coord.innerHTML.split(/[<>\ ]/g);
-          coord = M._breakArray(coord);
+          coord = Util._breakArray(coord);
           if (transform) {
-            coord = M._pcrsToGcrs(coord, source, dest);
+            coord = Util._pcrsToGcrs(coord, source, dest);
           }
           j.coordinates[x] = coord;
           x++;
@@ -1255,11 +1255,11 @@ export var Util = {
         break;
       case 'MAP-MULTIPOINT':
         j.type = 'MultiPoint';
-        coord = M._breakArray(
+        coord = Util._breakArray(
           el.querySelector('map-coordinates').innerHTML.split(/[<>\ ]/g)
         );
         if (transform) {
-          coord = M._pcrsToGcrs(coord, source, dest);
+          coord = Util._pcrsToGcrs(coord, source, dest);
         }
         j.coordinates = coord;
         break;
@@ -1269,9 +1269,9 @@ export var Util = {
         let i = 0;
         el.querySelectorAll('map-coordinates').forEach((coord) => {
           coord = coord.innerHTML.split(/[<>\ ]/g);
-          coord = M._breakArray(coord);
+          coord = Util._breakArray(coord);
           if (transform) {
-            coord = M._pcrsToGcrs(coord, source, dest);
+            coord = Util._pcrsToGcrs(coord, source, dest);
           }
           j.coordinates[i] = coord;
           i++;
@@ -1286,9 +1286,9 @@ export var Util = {
           j.coordinates.push([]);
           poly.querySelectorAll('map-coordinates').forEach((coord) => {
             coord = coord.innerHTML.split(/[<>\ ]/g);
-            coord = M._breakArray(coord);
+            coord = Util._breakArray(coord);
             if (transform) {
-              coord = M._pcrsToGcrs(coord, source, dest);
+              coord = Util._pcrsToGcrs(coord, source, dest);
             }
             j.coordinates[p].push([]);
             j.coordinates[p][y] = coord;
@@ -1395,7 +1395,7 @@ export var Util = {
             .querySelector('map-properties')
             .querySelector('table')
             .cloneNode(true),
-          properties = M._table2properties(table);
+          properties = Util._table2properties(table);
         json.features[num].properties = properties;
       } else {
         // when no table present, strip any possible html tags to only get text
@@ -1418,7 +1418,7 @@ export var Util = {
 
       // Adding Geometry
       if (geom.nodeName.toUpperCase() !== 'MAP-GEOMETRYCOLLECTION') {
-        json.features[num].geometry = M._geometry2geojson(
+        json.features[num].geometry = Util._geometry2geojson(
           geom,
           source,
           dest,
@@ -1438,11 +1438,11 @@ export var Util = {
               e.replaceWith(...e.children)
             );
             Array.from(g.children).forEach((i) => {
-              i = M._geometry2geojson(i, source, dest, options.transform);
+              i = Util._geometry2geojson(i, source, dest, options.transform);
               json.features[num].geometry.geometries.push(i);
             });
           } else {
-            g = M._geometry2geojson(g, source, dest, options.transform);
+            g = Util._geometry2geojson(g, source, dest, options.transform);
             json.features[num].geometry.geometries.push(g);
           }
         });
@@ -1471,12 +1471,12 @@ export var Util = {
       mapTlNew = mapCenterTCRS.subtract(mapHalf).round(),
       mapBrNew = mapCenterTCRS.add(mapHalf).round();
 
-    let mapTlPCRSNew = M.pixelToPCRSPoint(
+    let mapTlPCRSNew = Util.pixelToPCRSPoint(
         mapTlNew,
         newZoom,
         map.options.projection
       ),
-      mapBrPCRSNew = M.pixelToPCRSPoint(
+      mapBrPCRSNew = Util.pixelToPCRSPoint(
         mapBrNew,
         newZoom,
         map.options.projection
@@ -1498,12 +1498,12 @@ export var Util = {
 
       mapTlNew = mapCenterTCRS.subtract(mapHalf).round();
       mapBrNew = mapCenterTCRS.add(mapHalf).round();
-      mapTlPCRSNew = M.pixelToPCRSPoint(
+      mapTlPCRSNew = Util.pixelToPCRSPoint(
         mapTlNew,
         newZoom,
         map.options.projection
       );
-      mapBrPCRSNew = M.pixelToPCRSPoint(
+      mapBrPCRSNew = Util.pixelToPCRSPoint(
         mapBrNew,
         newZoom,
         map.options.projection
@@ -1525,17 +1525,17 @@ export var Util = {
       return null;
     }
     if (node instanceof ShadowRoot) {
-      return M.getClosest(node.host, selector);
+      return Util.getClosest(node.host, selector);
     }
 
     if (node instanceof HTMLElement) {
       if (node.matches(selector)) {
         return node;
       } else {
-        return M.getClosest(node.parentNode, selector);
+        return Util.getClosest(node.parentNode, selector);
       }
     }
 
-    return M.getClosest(node.parentNode, selector);
+    return Util.getClosest(node.parentNode, selector);
   }
 };
diff --git a/src/pmtilesRules.js b/src/pmtilesRules.js
index 21221cebd..d12fad607 100644
--- a/src/pmtilesRules.js
+++ b/src/pmtilesRules.js
@@ -2,7 +2,7 @@
 
 /* 
  * The following imports from protomaps-leaflet are available on the 
- * M.protomapsL global variable e.g. M.protomapsL.CenteredSymbolizer :
+ * protomapsL global variable e.g. protomapsL.CenteredSymbolizer :
 
   CenteredSymbolizer,
   CenteredTextSymbolizer,
@@ -111,28 +111,28 @@ pmtilesRules.set(
       PAINT_RULES: [
         {
           dataLayer: 'streams',
-          symbolizer: new M.protomapsL.LineSymbolizer({
+          symbolizer: new protomapsL.LineSymbolizer({
             color: 'steelblue',
             width: 2
           })
         },
         {
           dataLayer: 'roads',
-          symbolizer: new M.protomapsL.LineSymbolizer({
+          symbolizer: new protomapsL.LineSymbolizer({
             color: 'maroon',
             width: 2
           })
         },
         {
           dataLayer: 'restricted',
-          symbolizer: new M.protomapsL.PolygonSymbolizer({
+          symbolizer: new protomapsL.PolygonSymbolizer({
             fill: 'red',
             opacity: 0.5
           })
         },
         {
           dataLayer: 'restricted',
-          symbolizer: new M.protomapsL.LineSymbolizer({
+          symbolizer: new protomapsL.LineSymbolizer({
             color: 'red',
             width: 2
           })
@@ -155,7 +155,7 @@ pmtilesRules.set(
       LABEL_RULES: [
         {
           dataLayer: 'archsites',
-          symbolizer: new M.protomapsL.CenteredTextSymbolizer({
+          symbolizer: new protomapsL.CenteredTextSymbolizer({
             labelProps: ['str1'],
             fill: 'white',
             width: 2,
diff --git a/src/web-map.js b/src/web-map.js
index 5903add52..c134cc6d1 100644
--- a/src/web-map.js
+++ b/src/web-map.js
@@ -1,5 +1,6 @@
-import './leaflet.js'; // bundled with proj4, proj4leaflet, modularized
-import './mapml.js';
+import { Util } from './mapml/utils/Util';
+import { DOMTokenList } from './mapml/utils/DOMTokenList';
+
 import { MapLayer } from './layer.js';
 import { MapArea } from './map-area.js';
 import { MapCaption } from './map-caption.js';
@@ -10,6 +11,16 @@ import { MapSelect } from './map-select.js';
 import { MapLink } from './map-link.js';
 import { MapStyle } from './map-style.js';
 
+import { layerControl } from './mapml/control/LayerControl';
+import { AttributionButton } from './mapml/control/AttributionButton';
+import { reloadButton } from './mapml/control/ReloadButton';
+import { scaleBar } from './mapml/control/ScaleBar';
+import { fullscreenButton } from './mapml/control/FullscreenButton';
+import { geolocationButton } from './mapml/control/GeolocationButton';
+import { debugOverlay } from './mapml/layers/DebugOverlay';
+import { crosshair } from './mapml/layers/Crosshair';
+import { featureIndexOverlay } from './mapml/layers/FeatureIndexOverlay';
+
 export class WebMap extends HTMLMapElement {
   static get observedAttributes() {
     return [
@@ -111,12 +122,12 @@ export class WebMap extends HTMLMapElement {
 
   get extent() {
     let map = this._map,
-      pcrsBounds = M.pixelToPCRSBounds(
+      pcrsBounds = Util.pixelToPCRSBounds(
         map.getPixelBounds(),
         map.getZoom(),
         map.options.projection
       );
-    let formattedExtent = M._convertAndFormatPCRS(
+    let formattedExtent = Util._convertAndFormatPCRS(
       pcrsBounds,
       map.options.crs,
       this.projection
@@ -162,7 +173,7 @@ export class WebMap extends HTMLMapElement {
       .then(() => {
         this._initShadowRoot();
 
-        this._controlsList = new M.DOMTokenList(
+        this._controlsList = new DOMTokenList(
           this.getAttribute('controlslist'),
           this,
           'controlslist',
@@ -310,10 +321,10 @@ export class WebMap extends HTMLMapElement {
 
       this._createControls();
       this._toggleControls();
-      this._crosshair = M.crosshair().addTo(this._map);
+      this._crosshair = crosshair().addTo(this._map);
 
       if (M.options.featureIndexOverlayOption)
-        this._featureIndexOverlay = M.featureIndexOverlay().addTo(this._map);
+        this._featureIndexOverlay = featureIndexOverlay().addTo(this._map);
 
       if (this.hasAttribute('name')) {
         var name = this.getAttribute('name');
@@ -482,7 +493,7 @@ export class WebMap extends HTMLMapElement {
     let mapSize = this._map.getSize().y,
       totalSize = 0;
 
-    this._layerControl = M.layerControl(null, {
+    this._layerControl = layerControl(null, {
       collapsed: true,
       mapEl: this
     }).addTo(this._map);
@@ -497,8 +508,7 @@ export class WebMap extends HTMLMapElement {
       scaleValue = { metric: false, imperial: true };
     }
 
-    if (!this._scaleBar)
-      this._scaleBar = M.scaleBar(scaleValue).addTo(this._map);
+    if (!this._scaleBar) this._scaleBar = scaleBar(scaleValue).addTo(this._map);
 
     // Only add controls if there is enough top left vertical space
     if (!this._zoomControl && totalSize + 93 <= mapSize) {
@@ -507,15 +517,15 @@ export class WebMap extends HTMLMapElement {
     }
     if (!this._reloadButton && totalSize + 49 <= mapSize) {
       totalSize += 49;
-      this._reloadButton = M.reloadButton().addTo(this._map);
+      this._reloadButton = reloadButton().addTo(this._map);
     }
     if (!this._fullScreenControl && totalSize + 49 <= mapSize) {
       totalSize += 49;
-      this._fullScreenControl = M.fullscreenButton().addTo(this._map);
+      this._fullScreenControl = fullscreenButton().addTo(this._map);
     }
 
     if (!this._geolocationButton) {
-      this._geolocationButton = M.geolocationButton().addTo(this._map);
+      this._geolocationButton = geolocationButton().addTo(this._map);
     }
   }
 
@@ -666,7 +676,7 @@ export class WebMap extends HTMLMapElement {
   _dropHandler(event) {
     event.preventDefault();
     let text = event.dataTransfer.getData('text');
-    M._pasteLayer(this, text);
+    Util._pasteLayer(this, text);
   }
   _dragoverHandler(event) {
     event.preventDefault();
@@ -715,7 +725,7 @@ export class WebMap extends HTMLMapElement {
     this.addEventListener('keydown', function (e) {
       if (e.keyCode === 86 && e.ctrlKey) {
         navigator.clipboard.readText().then((layer) => {
-          M._pasteLayer(this, layer);
+          Util._pasteLayer(this, layer);
         });
         // Prevents default spacebar event on all of web-map
       } else if (
@@ -1026,7 +1036,7 @@ export class WebMap extends HTMLMapElement {
       this._debug.remove();
       this._debug = undefined;
     } else {
-      this._debug = M.debugOverlay().addTo(this._map);
+      this._debug = debugOverlay().addTo(this._map);
     }
   }
 
@@ -1481,7 +1491,7 @@ export class WebMap extends HTMLMapElement {
     if (options.projection === undefined) {
       options.projection = this.projection;
     }
-    let geojsonLayer = M.geojson2mapml(json, options);
+    let geojsonLayer = Util.geojson2mapml(json, options);
     this.appendChild(geojsonLayer);
     return geojsonLayer;
   }
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 e2dcbee6a..9d81476e3 100644
--- a/test/e2e/elements/map-feature/map-feature-extent.test.js
+++ b/test/e2e/elements/map-feature/map-feature-extent.test.js
@@ -67,7 +67,7 @@ test.describe('map-feature extent functionality and API', () => {
     // get bounds of map-meta
     const meta = await page.getByTestId('meta-ext1');
     const metaExtent = await meta.evaluate((m) => {
-      let content = M._metaContentToObject(m.getAttribute('content'));
+      let content = M.Util._metaContentToObject(m.getAttribute('content'));
       return {
         xmin: +content['top-left-easting'],
         ymin: +content['bottom-right-northing'],
@@ -114,7 +114,7 @@ test.describe('map-feature extent functionality and API', () => {
     // get bounds of map-meta
     const meta = await page.getByTestId('meta-ext1');
     const metaExtent = await meta.evaluate((m) => {
-      let content = M._metaContentToObject(m.getAttribute('content'));
+      let content = M.Util._metaContentToObject(m.getAttribute('content'));
       return {
         xmin: +content['top-left-easting'],
         ymin: +content['bottom-right-northing'],
@@ -194,7 +194,7 @@ test.describe('map-feature extent functionality and API', () => {
     // get zoom bounds of map-meta
     const meta = await page.getByTestId('meta-zoom1');
     const metaZoomBounds = await meta.evaluate((m) => {
-      let content = M._metaContentToObject(m.getAttribute('content'));
+      let content = M.Util._metaContentToObject(m.getAttribute('content'));
       return {
         zmin: +content['min'],
         zmax: +content['max']
diff --git a/test/e2e/elements/map-link/map-link.test.js b/test/e2e/elements/map-link/map-link.test.js
index c76d03d45..f01160ef8 100644
--- a/test/e2e/elements/map-link/map-link.test.js
+++ b/test/e2e/elements/map-link/map-link.test.js
@@ -73,8 +73,8 @@ test.describe('map-link extent tests', () => {
         .evaluate((meta) => {
           let content = meta.getAttribute('content');
           return {
-            minZoom: +M._metaContentToObject(content)['min'],
-            maxZoom: +M._metaContentToObject(content)['max']
+            minZoom: +M.Util._metaContentToObject(content)['min'],
+            maxZoom: +M.Util._metaContentToObject(content)['max']
           };
         });
       expect(link1ZoomBounds.minZoom).toEqual(zoomFromMetaLink1.minZoom);
@@ -121,8 +121,8 @@ test.describe('map-link extent tests', () => {
         .evaluate((meta) => {
           let content = meta.getAttribute('content');
           return {
-            minZoom: +M._metaContentToObject(content)['min'],
-            maxZoom: +M._metaContentToObject(content)['max']
+            minZoom: +M.Util._metaContentToObject(content)['min'],
+            maxZoom: +M.Util._metaContentToObject(content)['max']
           };
         });
       const mapInputNativeZoomBounds = await page
@@ -161,10 +161,12 @@ test.describe('map-link extent tests', () => {
         .evaluate((meta) => {
           let content = meta.getAttribute('content');
           return {
-            xmin: +M._metaContentToObject(content)['top-left-easting'],
-            ymin: +M._metaContentToObject(content)['bottom-right-northing'],
-            xmax: +M._metaContentToObject(content)['bottom-right-easting'],
-            ymax: +M._metaContentToObject(content)['top-left-northing']
+            xmin: +M.Util._metaContentToObject(content)['top-left-easting'],
+            ymin: +M.Util._metaContentToObject(content)[
+              'bottom-right-northing'
+            ],
+            xmax: +M.Util._metaContentToObject(content)['bottom-right-easting'],
+            ymax: +M.Util._metaContentToObject(content)['top-left-northing']
           };
         });
       expect(link3Bounds.xmin).toEqual(mapMetaBounds.xmin);
diff --git a/test/e2e/elements/map/map-in-shadow-root.test.js b/test/e2e/elements/map/map-in-shadow-root.test.js
index 0c0b113fe..694c0e107 100644
--- a/test/e2e/elements/map/map-in-shadow-root.test.js
+++ b/test/e2e/elements/map/map-in-shadow-root.test.js
@@ -23,7 +23,7 @@ test.describe('Playwright map[is=web-map] fullscreen tests', () => {
     await fullscreenButton.click();
 
     let fullscreenElement = await map1.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     // the first mapml-viewer should be returned by document.fullscreen
     expect(fullscreenElement).toEqual('map1');
@@ -36,7 +36,7 @@ test.describe('Playwright map[is=web-map] fullscreen tests', () => {
     // do the same with second map / element
     await fullscreenButton2.click();
     fullscreenElement = await map2.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     expect(fullscreenElement).toEqual('map2');
     try {
@@ -49,7 +49,7 @@ test.describe('Playwright map[is=web-map] fullscreen tests', () => {
     }
     // fullscreen element should not have changed
     fullscreenElement = await map2.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     expect(fullscreenElement).toEqual('map2');
     await fullscreenButton2.click(); // exit fullscreen
@@ -61,7 +61,7 @@ test.describe('Playwright map[is=web-map] fullscreen tests', () => {
     await page.keyboard.press('Shift+F10');
     await page.keyboard.press('F');
     let fullscreenElement = await map2.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     expect(fullscreenElement).toEqual('map2');
     await map2.click();
@@ -105,7 +105,7 @@ test.describe('Playwright map[is=web-map] fullscreen tests', () => {
     await page.keyboard.press('Shift+F10');
     await page.keyboard.press('F');
     let fullscreenElement = await map3.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     expect(fullscreenElement).toEqual('map3');
     await map3.click();
diff --git a/test/e2e/elements/mapml-viewer/mapml-viewer-in-shadow-root.test.js b/test/e2e/elements/mapml-viewer/mapml-viewer-in-shadow-root.test.js
index 8474dcf2c..2b22fc710 100644
--- a/test/e2e/elements/mapml-viewer/mapml-viewer-in-shadow-root.test.js
+++ b/test/e2e/elements/mapml-viewer/mapml-viewer-in-shadow-root.test.js
@@ -23,7 +23,7 @@ test.describe('Playwright mapml-viewer fullscreen tests', () => {
     await fullscreenButton.click();
 
     let fullscreenElement = await map1.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     // the first mapml-viewer should be returned by document.fullscreen
     expect(fullscreenElement).toEqual('map1');
@@ -36,7 +36,7 @@ test.describe('Playwright mapml-viewer fullscreen tests', () => {
     // do the same with second map / element
     await fullscreenButton2.click();
     fullscreenElement = await map2.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     expect(fullscreenElement).toEqual('map2');
     try {
@@ -49,7 +49,7 @@ test.describe('Playwright mapml-viewer fullscreen tests', () => {
     }
     // fullscreen element should not have changed
     fullscreenElement = await map2.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     expect(fullscreenElement).toEqual('map2');
     await fullscreenButton2.click(); // exit fullscreen
@@ -61,7 +61,7 @@ test.describe('Playwright mapml-viewer fullscreen tests', () => {
     await page.keyboard.press('Shift+F10');
     await page.keyboard.press('F');
     let fullscreenElement = await map2.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     expect(fullscreenElement).toEqual('map2');
     await map2.click();
@@ -105,7 +105,7 @@ test.describe('Playwright mapml-viewer fullscreen tests', () => {
     await page.keyboard.press('Shift+F10');
     await page.keyboard.press('F');
     let fullscreenElement = await map3.evaluate(
-      (m) => M.getClosest(m._map.getContainer(), ':fullscreen').id
+      (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
     expect(fullscreenElement).toEqual('map3');
     await map3.click();
diff --git a/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.test.js b/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.test.js
index 3c1dd0c2e..b64a7d1f2 100644
--- a/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.test.js
+++ b/test/e2e/elements/mapml-viewer/mapml-viewer-unknown-projection.test.js
@@ -18,11 +18,11 @@ test.describe('Playwright mapml-viewer issue-980 test', () => {
 
   test('mapml-viewer projection set to unknown prj errors to console', async () => {
     let message;
-    page.on('pageerror', exception  => message = exception.message);
+    page.on('pageerror', (exception) => (message = exception.message));
     const viewer = page.getByTestId('testviewer');
     await viewer.evaluate((v) => (v.projection = 'unknown'));
     // update the projection attribute on the viewer
-    await page.waitForTimeout(5000);
-    expect(message).toBe("Undefined projection: unknown");
+    await page.waitForTimeout(6000);
+    expect(message).toBe('Undefined projection: unknown');
   });
 });