Merge branch 'Maps4HTML:main' into main

prushforth · Oct 27, 2024 · 7a99e04 · 7a99e04
2 parents e5ab1a3 + 37d69c1
commit 7a99e04
Show file tree

Hide file tree

Showing 258 changed files with 4,556 additions and 2,299 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,5 +1,6 @@
 module.exports = function(grunt) {
   const Diff = require('diff');
+  const nodeResolve = require('@rollup/plugin-node-resolve');
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     cssmin: {
@@ -22,22 +23,7 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          'dist/mapml.js':        ['<%= rollup.main.dest %>'],
-          'dist/web-map.js':      ['src/web-map.js'],
-          'dist/mapml-viewer.js': ['src/mapml-viewer.js'],
-          'dist/map-caption.js':  ['src/map-caption.js'],
-          'dist/map-feature.js':  ['src/map-feature.js'],
-          'dist/map-extent.js':   ['src/map-extent.js'],
-          'dist/map-input.js':    ['src/map-input.js'],
-          'dist/map-select.js':    ['src/map-select.js'],
-          'dist/map-link.js':    ['src/map-link.js'],
-          'dist/map-style.js':    ['src/map-style.js'],
-          'dist/map-area.js':     ['src/map-area.js'],
-          'dist/layer.js':        ['src/layer.js'],
-          'dist/leaflet.js':      ['dist/leaflet-src.js',
-                                   'dist/proj4-src.js',
-                                   'dist/proj4leaflet.js',
-                                   'dist/L.Control.Locate.js']
+          'dist/mapml.js':        ['<%= rollup.main.dest %>']
         } 
       }
     },
@@ -94,6 +80,13 @@ module.exports = function(grunt) {
             src: ['index.html'],
             dest: 'dist/'
           },
+          {
+            expand: true,
+            flatten: true,
+            filter: 'isFile',
+            src: ['src/pmtilesRules.js'],
+            dest: 'dist/'
+          },
           {
             expand: true,
             cwd: 'node_modules/leaflet.locatecontrol/src/',
@@ -116,8 +109,8 @@ module.exports = function(grunt) {
               return Diff.applyPatch(content, patch);
             } else if (srcpath.includes('index.html')) {
               console.log('MODIFYING: ', srcpath);
-              var pathToModuleRE =  /dist\/mapml-viewer\.js/gi;
-              return content.replace(pathToModuleRE,"./mapml-viewer.js");
+              var pathToModuleRE =  /dist\/mapml\.js/gi;
+              return content.replace(pathToModuleRE,"./mapml.js");
             } else {
               return content;
             }
@@ -179,7 +172,7 @@ module.exports = function(grunt) {
     },
     clean: {
       dist: ['dist'],
-      tidyup: ['dist/leaflet-src.js','dist/proj4-src.js','dist/proj4leaflet.js','dist/L.Control.Locate.js'],
+      tidyup: ['dist/leaflet-src.js','dist/proj4-src.js','dist/proj4leaflet.js','dist/L.Control.Locate.js','dist/mapmlviewer.js'],
       experiments: {
         options: {force: true},
         src: ['../experiments/dist']
@@ -199,10 +192,12 @@ module.exports = function(grunt) {
     },
     rollup: {
       options: {
-        format: 'iife'
+        format: 'es',
+        plugins: [nodeResolve()],
+        external: './pmtilesRules.js'
       },
       main: {
-        dest: 'dist/mapml.js',
+        dest: 'dist/mapmlviewer.js',
         src: 'src/mapml/index.js' // Only one source file is permitted
       }
     },

diff --git a/README.md b/README.md
@@ -18,26 +18,26 @@ See [instructions](https://maps4html.org/web-map-doc/docs/installation#install-t
 ## Usage
 
 You create a map with one or more layers via the &lt;mapml-viewer> HTML tag. Add
-layers via the &lt;layer-> tag with content OR a src attribute pointing to a 
+layers via the &lt;map-layer> tag with content OR a src attribute pointing to a 
 MapML document (must be served as either `text/mapml` or `application/xml` content
 type):
 
 ```html
 <mapml-viewer projection="OSMTILE" zoom="0" lat="0.0" lon="0.0" controls>
-  <layer- label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></layer->
+  <map-layer label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></map-layer>
 </mapml-viewer>
 ```
 OR inline content
 ```html
 <mapml-viewer projection="OSMTILE" lat="10" lon="0" zoom="1" controls>
-  <layer- label="OpenStreetMap" checked>
+  <map-layer label="OpenStreetMap" checked>
     <map-extent units="OSMTILE">
       <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->
+  </map-layer>
 </mapml-viewer>
 ```
 

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <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>
+    <script type="module" src="dist/mapml.js"></script>
      <style> 
        html, 
        body { 
@@ -25,15 +25,15 @@
 
          /* Full viewport. */
           width: 100%;  
-          height: 100%;  
+          height: 50%;  
 
          /* Remove default (native-like) border. */ 
          border: none;
 
          vertical-align: middle;
        } 
 
-       /* Pre-style to avoid FOUC of inline layer- and fallback content. */ 
+       /* Pre-style to avoid FOUC of inline map-layer and fallback content. */ 
        mapml-viewer:not(:defined) > * { 
          display: none; 
        } 
@@ -45,19 +45,50 @@
          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 map-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. */
+      map-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-) { 
+         mapml-viewer:not(:defined) > :not(map-layer) { 
            display: initial; 
          } 
 
@@ -68,21 +99,75 @@
            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>
   <body>
 
     <mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
-      <layer- data-testid="osm-layer" label="OpenStreetMap" checked >
+      <map-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->
+      </map-layer>
+      <map-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>
+      </map-layer>
     </mapml-viewer>
+    <map is="web-map" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
+      <map-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>
+      </map-layer>
+      <map-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>
+      </map-layer>
+    </map>
   </body>
 </html>