Update index.html, add package.json to refer to mapml-viewer, not web…

…-map (#145)
Maps4HTML · Aug 18, 2020 · d9d6bbb · d9d6bbb
1 parent 0eef08c
commit d9d6bbb
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -3,60 +3,59 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>index.html</title>
-    <script type="module" src="web-map.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). */
-      map[is="web-map"]:defined {
-        /* Responsive map. */
-        max-width: 100%;
+    <title>index-map.html</title>
+    <script type="module" src="dist/mapml-viewer.js"></script>
+     <style> 
+       html, 
+       body { 
+         height: 100%; 
+       } 
+       * { 
+         margin: 0; 
+         padding: 0; 
+       } 
 
-        /* Full viewport. */
-        width: 100%;
-        height: 100%;
+       /* 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; */ 
+       } 
 
-        /* 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>
+       /* Pre-style to avoid FOUC of inline layer- and fallback content. */ 
+       mapml-viewer: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. */ 
+         mapml-viewer:not(:defined) > :not(layer-) { 
+           display: initial; 
+         } 
+       </style> 
+     </noscript> 
   </head>
   <body>
-    <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
+    <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->
-    </map>
+    </mapml-viewer>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "web-map-custom-element",
+  "version": "0.8.0",
+  "description": "web-map customized built-in HTML <map> or custom <mapml-viewer>",
+  "keywords": [
+    "web-components",
+    "web",
+    "maps",
+    "map",
+    "web-map",
+    "geo-map",
+    "map layer"
+  ],
+  "main": "mapml-viewer.js",
+  "module": "mapml-viewer.js",
+  "author": "Maps for HTML Community Group",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/Maps4HTML/Web-Map-Custom-Element.git"
+  },
+  "website": "http://maps4html.github.io/Web-Map-Custom-Element/",
+  "bugs": {
+    "url": "https://github.com/Maps4HTML/Web-Map-Custom-Element/issues"
+  },
+  "license": "W3C",
+  "contributors": [
+    {
+      "name": "Maps for HTML community",
+      "email": "[email protected]",
+      "url": "https://github.com/Maps4HTML/Web-Map-Custom-Element/graphs/contributors"
+    }
+  ],
+  "scripts": {
+    "test": "jest --detectOpenHandles --verbose --noStackTrace",
+    "test:watch": "jest --detectOpenHandles --watch"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@runette/leaflet-fullscreen": "1.0.4",
+    "express": "^4.17.1",
+    "grunt": "^1.1.0",
+    "grunt-contrib-clean": "^2.0.0",
+    "grunt-contrib-concat": "~1.0.0",
+    "grunt-contrib-copy": "~1.0.0",
+    "grunt-contrib-jshint": "~2.0.0",
+    "grunt-contrib-uglify-es": "~3.3.0",
+    "grunt-contrib-watch": "~1.1.0",
+    "grunt-html": "~9.3.0",
+    "grunt-rollup": "^11.3.0",
+    "jest": "^26.1.0",
+    "jest-playwright-preset": "^0.1.3",
+    "leaflet": "~1.6.0",
+    "path": "^0.12.7",
+    "playwright": "^1.2.1",
+    "proj4": "2.6.0",
+    "proj4leaflet": "1.0.1",
+    "rollup": "^2.23.1"
+  }
+}