Maps4HTML · prushforth · Sep 23, 2024 · Sep 23, 2024
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -104,13 +104,15 @@ 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
     );
     expect(fullscreenElement).toEqual('map3');
     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();
   });