Maps4HTML · AliyanH · Nov 7, 2023 · May 24, 2023 · May 26, 2023 · May 31, 2023
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -25,10 +25,11 @@ module.exports = function(grunt) {
           'dist/mapml.js':        ['<%= rollup.main.dest %>'],
           'dist/web-map.js':      ['src/web-map.js'],
           'dist/mapml-viewer.js': ['src/mapml-viewer.js'],
-          'dist/DOMTokenList.js': ['src/mapml/utils/DOMTokenList.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-link.js':    ['src/map-link.js'],
           'dist/map-area.js':     ['src/map-area.js'],
           'dist/layer.js':        ['src/layer.js'],
           'dist/leaflet.js':      ['dist/leaflet-src.js',
@@ -159,7 +160,7 @@ module.exports = function(grunt) {
           {
             expand: true,
             src: ['dist/*'],
-            dest: '../web-map-doc'
+            dest: '../web-map-doc/static'
           }
         ]
       }

diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@
          /* Responsive map. */ 
           max-width: 100%;  
 
-         /* Full viewport. */ 
+         /* Full viewport. */
           width: 100%;  
           height: 100%;  
 
@@ -72,56 +72,64 @@
      </noscript> 
   </head>
   <body>
-<mapml-viewer projection="OSMTILE" zoom="10" lon="-75.7" lat="45.4" controls="">
-  <layer- label="OpenStreetMap" src="https://maps4html.org/web-map-doc/demo/data/osm.mapml" checked=""></layer->
-
-  <layer- label="Polygon" checked>
-    <map-meta name="projection" content="OSMTILE"></map-meta>
-    <map-meta name="zoom" content="min=10,max=11"></map-meta>
-    <map-feature zoom="10">
-      <map-featurecaption>Click me!</map-featurecaption>
-      <!-- Setting the geometry coordinates to gcrs, as the default is pcrs -->
-      <map-geometry>
-        <map-a href="#15, -75.699, 45.420">
-          <map-polygon class="polygon">
-            <map-coordinates>-75.8242035 45.3526278 -75.6793213 45.4572409 -75.5680847 45.4692806 -75.6092834 45.4215881 -75.5756378 45.3810901 -75.7946777 45.3120804</map-coordinates>
-          </map-polygon>
-        </map-a>
-      </map-geometry>
-      <map-properties></map-properties>
-    </map-feature>
-  </layer->
-
- <layer- label="Points" checked>
-    <map-meta name="projection" content="OSMTILE"></map-meta>
-    <map-meta name="zoom" content="min=14,max=24"></map-meta>
-    <map-feature>
-      <map-featurecaption>Point 1</map-featurecaption>
-      <map-geometry>
-        <map-point class="point">
-          <map-coordinates>-75.6978285 45.4202251</map-coordinates>
-        </map-point>
-      </map-geometry>
-      <map-properties></map-properties>
-    </map-feature>
-    <map-feature>
-      <map-featurecaption>Point 2</map-featurecaption>
-      <map-geometry>
-        <map-point class="point">
-          <map-coordinates>-75.7002854 45.4199465</map-coordinates>
-        </map-point>
-      </map-geometry>
-      <map-properties></map-properties>
-    </map-feature>
-    <map-feature>
-      <map-featurecaption>point 3</map-featurecaption>
-      <map-geometry>
-        <map-point class="point">
-          <map-coordinates>-75.6984723 45.4179207</map-coordinates>
-        </map-point>
-      </map-geometry>
-      <map-properties></map-properties>
-    </map-feature>
-  </layer->
-</mapml-viewer>  </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-extent data-testid="osm-extent" units="OSMTILE" label="foo" 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- data-testid="rest-layer" id="restaurant" label="Mexican restaurants" src="../shared/restaurants/mexican.mapml" checked>-->
+<!--        <map-meta name="cs" content="gcrs" ></map-meta>
+        <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
+        <map-feature zoom="18" id="restaurant_polygon.2" class="restaurant_polygon">
+          <map-featurecaption>Banditos</map-featurecaption>
+            <map-geometry>
+              <map-point>
+                  <map-coordinates>-75.689609 45.405803</map-coordinates>
+              </map-point>
+            </map-geometry>
+            <map-properties>
+                <table>
+                    <thead>
+                        <tr>
+                            <th role="columnheader" scope="col">Property name</th>
+                            <th role="columnheader" scope="col">Property value</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th scope="row">addr_house</th>
+                            <td itemprop="addr_house">683</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">addr_stree</th>
+                            <td itemprop="addr_stree">Bank Street</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">amenity</th>
+                            <td itemprop="amenity">restaurant</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">building</th>
+                            <td itemprop="building">commercial</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">name</th>
+                            <td itemprop="name">Banditos</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">cuisine</th>
+                            <td itemprop="cuisine">mexican</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </map-properties>
+        </map-feature>-->
+      </layer->
+    </mapml-viewer>
+  </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@maps4html/web-map-custom-element",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "web-map customized built-in HTML <map> or custom <mapml-viewer>",
   "keywords": [
     "mapml-viewer",
@@ -32,10 +32,11 @@
     }
   ],
   "scripts": {
-    "test": "npx playwright test --retries=3",
+    "test": "npx playwright test --retries=3 --workers=1",
     "jest": "jest --verbose --noStackTrace"
   },
   "devDependencies": {
+    "@playwright/test": "^1.39.0",
     "diff": "^5.1.0",
     "express": "^4.17.1",
     "grunt": "^1.4.0",
@@ -56,8 +57,7 @@
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
     "path": "^0.12.7",
-    "@playwright/test": "^1.35.1",
-    "playwright": "^1.35.1",
+    "playwright": "^1.39.0",
     "proj4": "^2.6.2",
     "proj4leaflet": "^1.0.2",
     "rollup": "^2.23.1"