Add native appearance to map element(s) (#108)

* Add native appearance to map element(s) - Add default size of 300x150px to the map element(s) - Restore default UA outline styles for accessible sequential navigation - Enable author controlled background-color on the map element(s) - Pre-style to mitigate FOUC * Address feedback
Maps4HTML · Jul 13, 2020 · 5f4ebde · 5f4ebde
1 parent 592dc2a
commit 5f4ebde
Show file tree

Hide file tree

Showing 9 changed files with 258 additions and 47 deletions.
diff --git a/index-map-area.html b/index-map-area.html
@@ -6,27 +6,62 @@
     <title>index-map-area.html</title>
     <script type="module" src="dist/web-map.js"></script>
     <style>
-      html {
+      html,
+      body {
         height: 100%;
       }
-      body,
-      map {
-        height: inherit;
-      }
       * {
         margin: 0;
         padding: 0;
       }
+
+      /* 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: 100%; */
+
+        /* Remove default (native-like) border. */
+        /* border: none; */
+      }
+
+      /* 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(.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>
+        /* 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;
+        }
+      </style>
+    </noscript>
   </head>
   <body>
-    <img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area">
-    <map name="dowslake" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" controls hidden>
+    <map name="dowslake" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" controls>
       <layer- id="osm" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" checked></layer->
       <area is="map-area" id="doughnut" alt="Circle" href="https://example.com/circle/" coords="250,250,25" shape="circle" style="fill: white; stroke: aqua; stroke-width: 5px; fill-opacity: 0;">
       <area is="map-area" id="hole" coords="250,250,7" shape="circle" style="fill: blue; stroke: none; fill-opacity: 0.3;">
       <area is="map-area" id="rect" href="https://example.com/rectangle/" alt="Rectangle" coords="345,290,415,320" shape="rect" style="fill: greenyellow; stroke: blue; stroke-width: 3px; fill-opacity: 0.4;">
       <area is="map-area" id="poly" href="https://example.com/polygon/" alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly" style="fill: pink; stroke: blue; stroke-width: 3px; fill-opacity: 0.4;">
     </map>
+    <img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area">
   </body>
 </html>
diff --git a/index-mm-mapp.html b/index-mm-mapp.html
@@ -6,18 +6,52 @@
     <title>index-mm-mapp.html</title>
     <script type="module" src="dist/mm-mapp.js"></script>
     <style>
-      html {
+      html,
+      body {
         height: 100%;
       }
       * {
-        margin: 0px;
-        padding: 0px;
+        margin: 0;
+        padding: 0;
       }
-      body,
-      mm-mapp {
-        height: inherit;
+
+      /* 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). */
+      mm-mapp:defined {
+        /* Responsive map. */
+        /* max-width: 100%; */
+
+        /* Full viewport. */
+        /* width: 100%; */
+        /* height: 100%; */
+
+        /* Remove default (native-like) border. */
+        /* border: none; */
+      }
+
+      /* Pre-style to avoid FOUC of inline layer- and fallback content. */
+      mm-mapp:not(:defined) > * {
+        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>
+        /* Ensure fallback content (children of the map element) is displayed if
+        custom/built-in elements is supported but javascript is disabled. */
+        mm-mapp:not(:defined) > :not(layer-) {
+          display: initial;
+        }
+      </style>
+    </noscript>
   </head>
   <body>
     <mm-mapp projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist="nofullscreen">

diff --git a/index-web-map.html b/index-web-map.html
@@ -6,18 +6,53 @@
     <title>index-web-map.html</title>
     <script type="module" src="dist/web-map.js"></script>
     <style>
-      html {
+      html,
+      body {
         height: 100%;
       }
-      body,
-      map {
-        height: inherit;
-      }
       * {
         margin: 0;
         padding: 0;
       }
+
+      /* 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: 100%; */
+
+        /* Remove default (native-like) border. */
+        /* border: none; */
+      }
+
+      /* 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(.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>
+        /* 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;
+        }
+      </style>
+    </noscript>
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>

diff --git a/index.html b/index.html
@@ -6,18 +6,53 @@
     <title>index-map.html</title>
     <script type="module" src="dist/web-map.js"></script>
     <style>
-      html {
+      html,
+      body {
         height: 100%;
       }
-      body,
-      map {
-        height: inherit;
-      }
       * {
         margin: 0;
         padding: 0;
       }
+
+      /* 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: 100%; */
+
+        /* Remove default (native-like) border. */
+        /* border: none; */
+      }
+
+      /* 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(.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>
+        /* 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;
+        }
+      </style>
+    </noscript>
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>

diff --git a/src/layer.js b/src/layer.js
@@ -91,10 +91,6 @@ export class MapLayer extends HTMLElement {
     }
   }
   connectedCallback() {
-    // this avoids displaying inline mapml content, such as features and inputs
-    // but does not avoid FOUC. 
-    // To avoid FOUC, use <layer- style="display: none"...>...</layer->
-    this.style = "display: none";
     this._ready();
     // if the map has been attached, set this layer up wrt Leaflet map
     if (this.parentNode._map) {

diff --git a/src/mapml.css b/src/mapml.css
@@ -1,3 +1,11 @@
+.leaflet-container {
+  /* Override the `background-color` set by leaflet.css, enables inheritance from
+     the map or <body> element (same as iframes) to give the author more control. */
+  background-color: transparent;
+  max-height: 100%;
+  max-width: 100%;
+}
+
 /* this is required by tiles which are actually divs with multiple images in them */
 .leaflet-tile img {
         position: absolute;
@@ -42,3 +50,31 @@
 .leaflet-control-layers label {
     display: inline;
 }
+
+.leaflet-control-layers.leaflet-control {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+/* Disable dragging of controls. */
+.leaflet-control a {
+  -webkit-user-drag: none;
+}
+
+/* Hide unintended highlighting of controls from clicking the map display in
+   quick succession. This is a workaround for `user-select: contain`, since it has
+   virtually no browser support: https://www.chromestatus.com/feature/5730263904550912. */
+.leaflet-control a::selection,
+.leaflet-popup-close-button::selection,
+.leaflet-control-attribution::selection {
+  background-color: transparent;
+}
+
+/* Restore the default focus outline of UA stylesheets,
+   which Leaflet unfortunately removes (https://github.com/Leaflet/Leaflet/issues/6986). */
+.leaflet-container :focus {
+  outline-color: -webkit-focus-ring-color!important;
+  outline-style: auto!important;
+  outline-width: thin!important;
+  outline: revert!important;
+}
diff --git a/src/mapml.js b/src/mapml.js
@@ -1228,7 +1228,7 @@ M.MapMLLayer = L.Layer.extend({
         }
         label.appendChild(input);
         label.appendChild(name);
-        opacityControlSummaryLabel.innerText = 'opacity';
+        opacityControlSummaryLabel.innerText = 'Opacity';
         opacity.id = "o" + L.stamp(opacity);
         opacityControlSummaryLabel.setAttribute('for', opacity.id);
         opacityControlSummary.appendChild(opacityControlSummaryLabel);

diff --git a/src/mm-mapp.js b/src/mm-mapp.js
@@ -72,22 +72,40 @@ export class MmMapp extends HTMLElement {
   constructor() {
     // Always call super first in constructor
     super();
-    // SUPER IMPORTANT TO SET THIS UP FIRST SO THAT LEAFLET ISN'T WORKING WITH
-    // A HEIGHT=0 BOX BY DEFAULT.
-    this.style.display = "block";
+
     let tmpl = document.createElement('template');
     tmpl.innerHTML =
     `<link rel="stylesheet" href="${new URL("leaflet.css", import.meta.url).href}">` +
     `<link rel="stylesheet" href="${new URL("leaflet.fullscreen.css", import.meta.url).href}">` +
     `<link rel="stylesheet" href="${new URL("mapml.css", import.meta.url).href}">`;
+
     let shadowRoot = this.attachShadow({mode: 'open'});
     this._container = document.createElement('div');
-    // you have to include this otherwise you have to use quirks mode,
-    // (by omitting the doctype), which is bad.
-    this._container.style.height = "100%";
+
+    // Set default styles for the map element.
+    let mapDefaultCSS = document.createElement('style');
+    mapDefaultCSS.innerHTML =
+    `:host {` +
+    `contain: content;` + // Contain layout and paint calculations within the map element.
+    `display: inline-block;` + // This together with dimension properties is required so that Leaflet isn't working with a height=0 box by default.
+    `overflow: hidden;` + // Make the map element behave and look more like a native element.
+    `height: 150px;` + // Provide a "default object size" (https://github.com/Maps4HTML/HTML-Map-Element/issues/31).
+    `width: 300px;` +
+    `border-width: 2px;` +
+    `border-style: inset;` +
+    `}`;
+
+    // Hide all (light DOM) children of the map element.
+    let hideElementsCSS = document.createElement('style');
+    hideElementsCSS.innerHTML =
+    `mm-mapp > * {` +
+    `display: none!important;` +
+    `}`;
+
+    shadowRoot.appendChild(mapDefaultCSS);
     shadowRoot.appendChild(tmpl.content.cloneNode(true));
     shadowRoot.appendChild(this._container);
-
+    this.appendChild(hideElementsCSS);
   }
   connectedCallback() {
     if (this.isConnected) {
@@ -112,7 +130,7 @@ export class MmMapp extends HTMLElement {
       }
 
       if (!this.height || this.height !== h) {
-        this._container.style.height = h;
+        this._container.style.height = hpx;
         this.height = h;
       } else {
         this._container.style.height = this.height+"px";
@@ -136,7 +154,7 @@ export class MmMapp extends HTMLElement {
         });
 
         // the attribution control is not optional
-        this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps4HTML Community Group">Maps4HTML</a> | <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
+        this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps4HTML Community Group">Maps4HTML</a> | <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
 
         // optionally add controls to the map
         if (this.controls) {