Changes for microservices interest group demonstration 2021-12-17 (Ma…

…ps4HTML#90) * Prepare for geoogratis-is-down demo * Prepare for geoogratis-is-down demo - 2/n * Prepare for geoogratis-is-down demo - 3/n
prushforth · Dec 17, 2021 · f19ea51 · f19ea51
1 parent 9ee8a35
commit f19ea51
Show file tree

Hide file tree

Showing 35 changed files with 60,501 additions and 0 deletions.
diff --git a/multiple-extents/dist/images/layers-2x.png b/multiple-extents/dist/images/layers-2x.png
diff --git a/multiple-extents/dist/images/layers.png b/multiple-extents/dist/images/layers.png
diff --git a/multiple-extents/dist/images/marker-icon-2x.png b/multiple-extents/dist/images/marker-icon-2x.png
diff --git a/multiple-extents/dist/images/marker-icon.png b/multiple-extents/dist/images/marker-icon.png
diff --git a/multiple-extents/dist/images/marker-shadow.png b/multiple-extents/dist/images/marker-shadow.png
diff --git a/multiple-extents/dist/index.html b/multiple-extents/dist/index.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>index-map.html</title>
+    <script type="module" src="dist/mapml-viewer.js"></script>
+     <style> 
+       html, 
+       body { 
+         height: 100%; 
+       } 
+       * { 
+         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). */ 
+       mapml-viewer:defined { 
+         /* Responsive map. */ 
+          max-width: 100%;  
+
+         /* Full viewport. */ 
+          width: 100%;  
+          height: 100%;  
+
+         /* Remove default (native-like) border. */ 
+         border: none;
+
+         vertical-align: middle;
+       } 
+
+       /* Pre-style to avoid FOUC of inline layer- and fallback content. */ 
+       mapml-viewer:not(:defined) > * { 
+         display: none; 
+       } 
+
+       /* Pre-style to avoid Layout Shift. */
+       mapml-viewer:not(:defined) {
+         display: inline-block;
+         contain: size;
+         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; 
+       } 
+     </style> 
+     <noscript> 
+       <style> 
+         /* Ensure fallback content (children of the map element) is displayed if 
+         custom/built-in elements is supported but javascript is disabled. */ 
+         mapml-viewer:not(:defined) > :not(layer-) { 
+           display: initial; 
+         } 
+
+         /* "Reset" the properties used to pre-style (to avoid Layout Shift) if
+         custom/built-in elements is supported but javascript is disabled. */
+         mapml-viewer:not(:defined) {
+           display: initial;
+           contain: initial;
+           contain-intrinsic-size: initial;
+         }
+       </style> 
+     </noscript> 
+  </head>
+  <body>
+    <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
+      <layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
+    </mapml-viewer>
+  </body>
+</html>