diff --git a/Gruntfile.js b/Gruntfile.js
index 4c40f6bf1..cc282a581 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -23,8 +23,7 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          'dist/mapml-viewer.js':        ['<%= rollup.main.dest %>'],
-          'dist/web-map.js':             ['<%= rollup.webmap.dest %>']
+          'dist/mapml-viewer.js':        ['<%= rollup.main.dest %>']
         } 
       }
     },
@@ -200,10 +199,6 @@ module.exports = function(grunt) {
       main: {
         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/index.html b/index.html
index 96ea53c63..1b253e79e 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
           
          /* Full viewport. */
           width: 100%;  
-          height: 100%;  
+          height: 50%;  
           
          /* Remove default (native-like) border. */ 
          border: none;
@@ -45,13 +45,44 @@
          contain-intrinsic-size: 304px 154px;
        }
        
-       /* Ensure inline layer content is hidden if custom/built-in elements isn't 
-       supported, or if javascript is disabled. This needs to be defined separately 
-       from the above, because the `:not(:defined)` selector invalidates the entire 
-       declaration in browsers that do not support it. */ 
-       layer- { 
-         display: none; 
-       } 
+      /* Specifying the `:defined` selector is recommended to style the map
+      element, such that styles don't apply when fallback content is in use
+      (e.g. when scripting is disabled or when custom/built-in elements isn't
+      supported in the browser). */
+      map[is="web-map"]:defined {
+      /* Responsive map. */ 
+          max-width: 100%;  
+          
+         /* Full viewport. */ 
+          width: 100%;  
+          height: 50%;  
+          
+         /* Remove default (native-like) border. */ 
+         border: none;
+         
+         vertical-align: middle;
+      }
+
+      /* Pre-style to avoid Layout Shift. */
+      map[is="web-map"]:not(:defined) {
+        display: inline-block;
+        contain: size;
+        contain-intrinsic-size: 304px 154px;
+      }
+
+      /* Pre-style to avoid FOUC of inline layer- and fallback content. */
+      map[is="web-map"]:not(:defined) + img[usemap],
+      map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) {
+        display: none;
+      }
+
+      /* Ensure inline layer content is hidden if custom/built-in elements isn't
+      supported, or if javascript is disabled. This needs to be defined separately
+      from the above, because the `:not(:defined)` selector invalidates the entire
+      declaration in browsers that do not support it. */
+      layer- {
+        display: none;
+      }
      </style> 
      <noscript> 
        <style> 
@@ -68,6 +99,19 @@
            contain: initial;
            contain-intrinsic-size: initial;
          }
+        /* Ensure client-side image map fallbacks are displayed if custom/built-in
+        elements is supported but javascript is disabled. */
+        map[is="web-map"]:not(:defined) + img[usemap] {
+          display: initial;
+        }
+
+        /* "Reset" the properties used to pre-style (to avoid Layout Shift) if
+        custom/built-in elements is supported but javascript is disabled. */
+        map[is="web-map"]:not(:defined) {
+          display: initial;
+          contain: initial;
+          contain-intrinsic-size: initial;
+        }
        </style> 
      </noscript> 
   </head>
@@ -84,20 +128,46 @@
         </map-extent>
       </layer->
       <layer- label="Restaurants" checked="">
-           <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
-            <map-extent units="OSMTILE" checked="">
-              <map-select id="restaurants" name="cusine">
-                  <map-option value="restaurants" selected="selected">All cuisines</map-option>
-                  <map-option value="african">African</map-option>
-                  <map-option value="asian">Asian</map-option>
-                  <map-option value="cajun">Cajun</map-option>
-                  <map-option value="indian">Indian</map-option>
-                  <map-option value="italian">Italian</map-option>
-                  <map-option value="mexican">Mexican</map-option>
-              </map-select>
-              <map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
-            </map-extent>
-          </layer->
+        <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
+        <map-extent units="OSMTILE" checked="">
+           <map-select id="restaurants" name="cusine">
+               <map-option value="restaurants" selected="selected">All cuisines</map-option>
+               <map-option value="african">African</map-option>
+               <map-option value="asian">Asian</map-option>
+               <map-option value="cajun">Cajun</map-option>
+               <map-option value="indian">Indian</map-option>
+               <map-option value="italian">Italian</map-option>
+               <map-option value="mexican">Mexican</map-option>
+           </map-select>
+           <map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
+        </map-extent>
+      </layer->
     </mapml-viewer>
+    <map is="web-map" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
+      <layer- data-testid="osm-layer" label="OpenStreetMap" checked >
+        <map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
+        <map-extent units="OSMTILE" checked="checked">
+          <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
+          <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
+          <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
+          <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
+        </map-extent>
+      </layer->
+      <layer- label="Restaurants" checked="">
+        <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
+        <map-extent units="OSMTILE" checked="">
+           <map-select id="restaurants" name="cusine">
+               <map-option value="restaurants" selected="selected">All cuisines</map-option>
+               <map-option value="african">African</map-option>
+               <map-option value="asian">Asian</map-option>
+               <map-option value="cajun">Cajun</map-option>
+               <map-option value="indian">Indian</map-option>
+               <map-option value="italian">Italian</map-option>
+               <map-option value="mexican">Mexican</map-option>
+           </map-select>
+           <map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
+        </map-extent>
+      </layer->
+    </map>
   </body>
 </html>
diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
index 0bf56e4d2..2486d8b16 100644
--- a/src/mapml-viewer.js
+++ b/src/mapml-viewer.js
@@ -9,6 +9,8 @@ import { MapInput } from './map-input.js';
 import { MapSelect } from './map-select.js';
 import { MapLink } from './map-link.js';
 import { MapStyle } from './map-style.js';
+import { WebMap } from './web-map';
+import { MapArea } from './map-area.js';
 
 import { layerControl } from './mapml/control/LayerControl';
 import { AttributionButton } from './mapml/control/AttributionButton';
@@ -1440,8 +1442,15 @@ export class MapViewer extends HTMLElement {
     return geojsonLayer;
   }
 }
-// need to provide options { extends: ... }  for custom built-in elements
 window.customElements.define('mapml-viewer', MapViewer);
+try {
+  window.customElements.define('web-map', WebMap, { extends: 'map' });
+  window.customElements.define('map-area', MapArea, { extends: 'area' });
+} catch (error) {
+  console.log(
+    'Exception occurred while defining custom built-in elements:\n' + error
+  );
+}
 window.customElements.define('layer-', MapLayer);
 window.customElements.define('map-caption', MapCaption);
 window.customElements.define('map-feature', MapFeature);
diff --git a/src/web-map.js b/src/web-map.js
index c134cc6d1..e24109fa1 100644
--- a/src/web-map.js
+++ b/src/web-map.js
@@ -1,16 +1,6 @@
 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';
-import { MapFeature } from './map-feature.js';
-import { MapExtent } from './map-extent.js';
-import { MapInput } from './map-input.js';
-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';
@@ -1517,14 +1507,3 @@ export class WebMap extends HTMLMapElement {
     }
   }
 }
-// need to provide options { extends: ... }  for custom built-in elements
-window.customElements.define('web-map', WebMap, { extends: 'map' });
-window.customElements.define('layer-', MapLayer);
-window.customElements.define('map-area', MapArea, { extends: 'area' });
-window.customElements.define('map-caption', MapCaption);
-window.customElements.define('map-feature', MapFeature);
-window.customElements.define('map-extent', MapExtent);
-window.customElements.define('map-input', MapInput);
-window.customElements.define('map-select', MapSelect);
-window.customElements.define('map-link', MapLink);
-window.customElements.define('map-style', MapStyle);
diff --git a/test/e2e/api/domApi-web-map.html b/test/e2e/api/domApi-web-map.html
index 524d48db5..55a7e89ae 100644
--- a/test/e2e/api/domApi-web-map.html
+++ b/test/e2e/api/domApi-web-map.html
@@ -3,7 +3,7 @@
   <head>
     <title>DOM API Test page</title>
     <meta charset="UTF-8">
-    <script type="module" src="web-map.js"></script>
+    <script type="module" src="mapml-viewer.js"></script>
   </head>
   <body>
   </body>
diff --git a/test/e2e/core/axisInferring.html b/test/e2e/core/axisInferring.html
index ef19b925b..da6c793d6 100644
--- a/test/e2e/core/axisInferring.html
+++ b/test/e2e/core/axisInferring.html
@@ -5,7 +5,7 @@
     <title>Inferring Axes</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script type="module" src="web-map.js"></script>
+    <script type="module" src="mapml-viewer.js"></script>
     <style>
     [is=web-map] {
       width: 100%;
diff --git a/test/e2e/core/drag.html b/test/e2e/core/drag.html
index f3dbdf3f8..d6c551b56 100644
--- a/test/e2e/core/drag.html
+++ b/test/e2e/core/drag.html
@@ -4,7 +4,7 @@
 <head>
 	<title>Drag Test</title>
 	<meta charset="UTF-8" >
-	<script type="module" src="web-map.js"></script>
+	<script type="module" src="mapml-viewer.js"></script>
 	<style>
 		html {
 			height: 100%;
diff --git a/test/e2e/core/dragDropMap.html b/test/e2e/core/dragDropMap.html
index 99d68f0e7..cf6816451 100644
--- a/test/e2e/core/dragDropMap.html
+++ b/test/e2e/core/dragDropMap.html
@@ -5,7 +5,7 @@
 <head>
   <title>Drag and Drop Layers</title>
   <meta charset="UTF-8">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
         height: 100%;
diff --git a/test/e2e/core/featureLinks.html b/test/e2e/core/featureLinks.html
index 7b010c633..662ef5f3a 100644
--- a/test/e2e/core/featureLinks.html
+++ b/test/e2e/core/featureLinks.html
@@ -5,7 +5,7 @@
   <title>Feature Link Test</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
       [is=web-map] {
           width: 100%;
diff --git a/test/e2e/core/fullscreenControlWebMap.html b/test/e2e/core/fullscreenControlWebMap.html
index e88621deb..6e0fad584 100644
--- a/test/e2e/core/fullscreenControlWebMap.html
+++ b/test/e2e/core/fullscreenControlWebMap.html
@@ -4,7 +4,7 @@
 <head>
   <title>Fullscreen Control Test - web-map.js</title>
   <meta charset="UTF-8">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
       height: 100%
diff --git a/test/e2e/core/linkTypes.html b/test/e2e/core/linkTypes.html
index 7b010c633..662ef5f3a 100644
--- a/test/e2e/core/linkTypes.html
+++ b/test/e2e/core/linkTypes.html
@@ -5,7 +5,7 @@
   <title>Feature Link Test</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
       [is=web-map] {
           width: 100%;
diff --git a/test/e2e/core/mapElement.html b/test/e2e/core/mapElement.html
index 98b8dcd9d..268fb80a1 100644
--- a/test/e2e/core/mapElement.html
+++ b/test/e2e/core/mapElement.html
@@ -4,7 +4,7 @@
 <head>
   <title>Basic Map</title>
   <meta charset="UTF-8">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
       height: 100%
diff --git a/test/e2e/core/mapFeature.html b/test/e2e/core/mapFeature.html
index 5e4d42c16..2b74de9dd 100644
--- a/test/e2e/core/mapFeature.html
+++ b/test/e2e/core/mapFeature.html
@@ -5,7 +5,7 @@
   <title>HTMLFeatureElement Test!</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
       [is=web-map] {
           width: 100%;
diff --git a/test/e2e/core/mismatchedLayerWithMap.test.js b/test/e2e/core/mismatchedLayerWithMap.test.js
index 7ff96878a..4816fc9ba 100644
--- a/test/e2e/core/mismatchedLayerWithMap.test.js
+++ b/test/e2e/core/mismatchedLayerWithMap.test.js
@@ -22,7 +22,7 @@ test.describe('Playwright Mismatched Layers Test', () => {
             <head>
                 <title>index-map.html</title>
                 <meta charset="UTF-8">
-                <script type="module" src="web-map.js"></script>
+                <script type="module" src="mapml-viewer.js"></script>
                 <style>
                 html {height: 100%} body,map {height: inherit} * {margin: 0;padding: 0;}
                 </style>
diff --git a/test/e2e/core/missingMetaParameters.html b/test/e2e/core/missingMetaParameters.html
index 89bf1bead..d35e72ac4 100644
--- a/test/e2e/core/missingMetaParameters.html
+++ b/test/e2e/core/missingMetaParameters.html
@@ -5,7 +5,7 @@
   <title>Missing Meta Parameters Test</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     [is=web-map] {
       width: 100%;
diff --git a/test/e2e/core/projectionChange.html b/test/e2e/core/projectionChange.html
index 61b83daa5..93b8a75de 100644
--- a/test/e2e/core/projectionChange.html
+++ b/test/e2e/core/projectionChange.html
@@ -5,7 +5,7 @@
   <title>Change Projection Test</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
       [is=web-map] {
           width: 100%;
diff --git a/test/e2e/core/styleParsing.html b/test/e2e/core/styleParsing.html
index a33ec678e..c197d1ea6 100644
--- a/test/e2e/core/styleParsing.html
+++ b/test/e2e/core/styleParsing.html
@@ -5,7 +5,7 @@
   <title>Style Parsing Test</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     [is=web-map] {
       width: 100%;
diff --git a/test/e2e/core/zoomChangeProjection.html b/test/e2e/core/zoomChangeProjection.html
index d9c70f430..61dc7f7cc 100644
--- a/test/e2e/core/zoomChangeProjection.html
+++ b/test/e2e/core/zoomChangeProjection.html
@@ -3,7 +3,7 @@
 <head>
   <title>Zoom Projection Change Test</title>
   <meta charset="UTF-8">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
       html {height: 100%} body,map {height: inherit} * {margin: 0;padding: 0;}
   </style>
diff --git a/test/e2e/elements/map-extent/map-extent-api-web-map.html b/test/e2e/elements/map-extent/map-extent-api-web-map.html
index cb6b8c026..758eb16d7 100644
--- a/test/e2e/elements/map-extent/map-extent-api-web-map.html
+++ b/test/e2e/elements/map-extent/map-extent-api-web-map.html
@@ -4,7 +4,7 @@
 <head>
   <title>Basic Map</title>
   <meta charset="UTF-8">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
       height: 100%
diff --git a/test/e2e/elements/map/map-in-shadow-root.html b/test/e2e/elements/map/map-in-shadow-root.html
index 83c7d116e..90f756dbd 100644
--- a/test/e2e/elements/map/map-in-shadow-root.html
+++ b/test/e2e/elements/map/map-in-shadow-root.html
@@ -3,7 +3,7 @@
   <head>
     <title>map[is=web-map] in shadow root test</title>
     <meta charset="UTF-8">
-    <script type="module" src="../web-map.js"></script>
+    <script type="module" src="../mapml-viewer.js"></script>
     <style>
       html {
         height: 100%
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 694c0e107..7e520ec50 100644
--- a/test/e2e/elements/map/map-in-shadow-root.test.js
+++ b/test/e2e/elements/map/map-in-shadow-root.test.js
@@ -104,6 +104,7 @@ test.describe('Playwright map[is=web-map] fullscreen tests', () => {
     await map3.click();
     await page.keyboard.press('Shift+F10');
     await page.keyboard.press('F');
+    await page.waitForTimeout(200);
     let fullscreenElement = await map3.evaluate(
       (m) => M.Util.getClosest(m._map.getContainer(), ':fullscreen').id
     );
@@ -111,6 +112,7 @@ test.describe('Playwright map[is=web-map] fullscreen tests', () => {
     await map3.click();
     await page.keyboard.press('Shift+F10');
     await page.keyboard.press('F'); // exit fullscreen
+    await page.waitForTimeout(200);
     fullscreenElement = await page.evaluate(`document.fullscreenElement`);
     expect(fullscreenElement).toBeFalsy();
   });
diff --git a/test/e2e/geojson/geojson2mapml.test.js b/test/e2e/geojson/geojson2mapml.test.js
index 96db82200..e95f9519b 100644
--- a/test/e2e/geojson/geojson2mapml.test.js
+++ b/test/e2e/geojson/geojson2mapml.test.js
@@ -158,15 +158,20 @@ test.describe('GeoJSON API - geojson2mapml', () => {
       );
     expect(out).toEqual(exp);
   });
-  test('M.geojson2mapml public API method exists and works', async ()=>{
+  test('M.geojson2mapml public API method exists and works', async () => {
     const viewer = page.getByTestId('map');
-    await viewer.evaluate((v)=>{
-      let l = M.geojson2mapml(point, {label: 'M.geojson2mapml public API method works'});
+    await viewer.evaluate((v) => {
+      let l = M.geojson2mapml(point, {
+        label: 'M.geojson2mapml public API method works'
+      });
       v.appendChild(l);
-      l.setAttribute('data-testid','test-layer');
+      l.setAttribute('data-testid', 'test-layer');
     });
     const layer = page.getByTestId('test-layer');
     await expect(layer).not.toHaveAttribute('disabled');
-    await expect(layer).toHaveAttribute('label','M.geojson2mapml public API method works');
+    await expect(layer).toHaveAttribute(
+      'label',
+      'M.geojson2mapml public API method works'
+    );
   });
 });
diff --git a/test/e2e/layers/featureLayer.html b/test/e2e/layers/featureLayer.html
index b3e1bf21e..d2d83d211 100644
--- a/test/e2e/layers/featureLayer.html
+++ b/test/e2e/layers/featureLayer.html
@@ -5,7 +5,7 @@
   <title>Static Features Test</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     map:defined {
         
diff --git a/test/e2e/layers/staticTileLayer.html b/test/e2e/layers/staticTileLayer.html
index 7d9fb6f6e..6c5e96fca 100644
--- a/test/e2e/layers/staticTileLayer.html
+++ b/test/e2e/layers/staticTileLayer.html
@@ -4,7 +4,7 @@
 <head>
   <title>Static Tile Test</title>
   <meta charset="UTF-8">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
       height: 100%
diff --git a/test/e2e/layers/step/templatedFeaturesLayerStep.html b/test/e2e/layers/step/templatedFeaturesLayerStep.html
index 9425d6e47..95e07af74 100644
--- a/test/e2e/layers/step/templatedFeaturesLayerStep.html
+++ b/test/e2e/layers/step/templatedFeaturesLayerStep.html
@@ -5,7 +5,7 @@
   <title>Templated Features Test</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="../web-map.js"></script>
+  <script type="module" src="../mapml-viewer.js"></script>
   <style>
     [is=web-map] {
       width: 100%;
diff --git a/test/e2e/layers/templatedFeatures.html b/test/e2e/layers/templatedFeatures.html
index 6013cc4cc..b0811ae80 100644
--- a/test/e2e/layers/templatedFeatures.html
+++ b/test/e2e/layers/templatedFeatures.html
@@ -5,7 +5,7 @@
   <title>Templated Features Test</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     [is=web-map] {
       width: 100%;
diff --git a/test/e2e/layers/templatedImageLayer.html b/test/e2e/layers/templatedImageLayer.html
index 659012df3..c344670b1 100644
--- a/test/e2e/layers/templatedImageLayer.html
+++ b/test/e2e/layers/templatedImageLayer.html
@@ -4,7 +4,7 @@
 <head>
   <title>Templated Image Test</title>
   <meta charset="utf-8" >
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
       height: 100%
diff --git a/test/e2e/layers/templatedTileLayer.html b/test/e2e/layers/templatedTileLayer.html
index 4eb650291..fdb1c12d1 100644
--- a/test/e2e/layers/templatedTileLayer.html
+++ b/test/e2e/layers/templatedTileLayer.html
@@ -4,7 +4,7 @@
 <head>
   <title>Templated Tile Test</title>
   <meta charset="UTF-8">
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
       height: 100%
diff --git a/test/e2e/web-map/map.html b/test/e2e/web-map/map.html
index bbba33611..25f497d3a 100644
--- a/test/e2e/web-map/map.html
+++ b/test/e2e/web-map/map.html
@@ -9,7 +9,7 @@
     options.innerHTML = '{"announceMovement":true}';
     document.head.appendChild(options);
   </script>
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
       height: 100%
diff --git a/test/e2e/web-map/mapCaption.html b/test/e2e/web-map/mapCaption.html
index 901ca8fb8..0ed6c1f6e 100644
--- a/test/e2e/web-map/mapCaption.html
+++ b/test/e2e/web-map/mapCaption.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8">
 
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
       height: 100%
diff --git a/test/e2e/web-map/mapControls.html b/test/e2e/web-map/mapControls.html
index 06ef6e66d..c972b4656 100644
--- a/test/e2e/web-map/mapControls.html
+++ b/test/e2e/web-map/mapControls.html
@@ -5,7 +5,7 @@
   <title>Basic web-map</title>
   <meta charset="UTF-8">
 
-  <script type="module" src="web-map.js"></script>
+  <script type="module" src="mapml-viewer.js"></script>
   <style>
     html {
       height: 100%
diff --git a/test/e2e/web-map/mapCssNoDomination.html b/test/e2e/web-map/mapCssNoDomination.html
index 6c4822d80..2dc8c605a 100644
--- a/test/e2e/web-map/mapCssNoDomination.html
+++ b/test/e2e/web-map/mapCssNoDomination.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
-    <script type="module" src="web-map.js"></script>
+    <script type="module" src="mapml-viewer.js"></script>
     <style>
       html,
       body {
diff --git a/test/e2e/web-map/mapHeightAndWidthAttributes.html b/test/e2e/web-map/mapHeightAndWidthAttributes.html
index fb55c1e89..e8353aa68 100644
--- a/test/e2e/web-map/mapHeightAndWidthAttributes.html
+++ b/test/e2e/web-map/mapHeightAndWidthAttributes.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
-    <script type="module" src="web-map.js"></script>
+    <script type="module" src="mapml-viewer.js"></script>
     <style>
       html,
       body {
diff --git a/test/e2e/web-map/mapNoWidthAndHeight.html b/test/e2e/web-map/mapNoWidthAndHeight.html
index e0c60aa7e..541b31d2c 100644
--- a/test/e2e/web-map/mapNoWidthAndHeight.html
+++ b/test/e2e/web-map/mapNoWidthAndHeight.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
-    <script type="module" src="web-map.js"></script>
+    <script type="module" src="mapml-viewer.js"></script>
     <style>
       html,
       body {
diff --git a/test/e2e/web-map/mapStatic.html b/test/e2e/web-map/mapStatic.html
index 4000b4b99..155ef3df1 100644
--- a/test/e2e/web-map/mapStatic.html
+++ b/test/e2e/web-map/mapStatic.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
-    <script type="module" src="web-map.js"></script>
+    <script type="module" src="mapml-viewer.js"></script>
     <style>
       html,
       body {
diff --git a/test/e2e/web-map/mapWindowSizeChange.html b/test/e2e/web-map/mapWindowSizeChange.html
index 81d102cda..d6143dd62 100644
--- a/test/e2e/web-map/mapWindowSizeChange.html
+++ b/test/e2e/web-map/mapWindowSizeChange.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
-    <script type="module" src="web-map.js"></script>
+    <script type="module" src="mapml-viewer.js"></script>
     <style>
       html,
       body {
diff --git a/test/e2e/web-map/web-map.html b/test/e2e/web-map/web-map.html
index 193946a33..ea16799e1 100644
--- a/test/e2e/web-map/web-map.html
+++ b/test/e2e/web-map/web-map.html
@@ -9,7 +9,7 @@
         options.innerHTML = '{"announceMovement":true}';
         document.head.appendChild(options);
     </script>
-    <script type="module" src="web-map.js"></script>
+    <script type="module" src="mapml-viewer.js"></script>
     <style>
         html {
             height: 100%
diff --git a/web-map-index.html b/web-map-index.html
index 08348d35c..89b7585ae 100644
--- a/web-map-index.html
+++ b/web-map-index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>index-web-map.html</title>
-    <script type="module" src="dist/web-map.js"></script>
+    <script type="module" src="./mapml-viewer.js"></script>
     <style>
       html,
       body {
@@ -73,8 +73,31 @@
     </noscript>
   </head>
   <body>
-    <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist="nofullscreen geolocation">
-      <layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
+    <map is="web-map" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
+      <layer- data-testid="osm-layer" label="OpenStreetMap" checked >
+        <map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
+        <map-extent units="OSMTILE" checked="checked">
+          <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
+          <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
+          <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
+          <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
+        </map-extent>
+      </layer->
+      <layer- label="Restaurants" checked="">
+        <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
+        <map-extent units="OSMTILE" checked="">
+           <map-select id="restaurants" name="cusine">
+               <map-option value="restaurants" selected="selected">All cuisines</map-option>
+               <map-option value="african">African</map-option>
+               <map-option value="asian">Asian</map-option>
+               <map-option value="cajun">Cajun</map-option>
+               <map-option value="indian">Indian</map-option>
+               <map-option value="italian">Italian</map-option>
+               <map-option value="mexican">Mexican</map-option>
+           </map-select>
+           <map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
+        </map-extent>
+      </layer->
     </map>
   </body>
 </html>
\ No newline at end of file