Maps4HTML · AliyanH · Nov 7, 2023 · May 24, 2023 · May 26, 2023 · May 31, 2023
diff --git a/.github/workflows/ci-testing.yml b/.github/workflows/ci-testing.yml
@@ -13,12 +13,12 @@ jobs:
       uses: actions/setup-node@v3
       with:
         node-version: '18.x'
-    - run: sudo apt-get install xvfb
-    - run: npm install --legacy-peer-deps
-    - run: npx playwright install
-    - run: npm install -g grunt-cli
-    - run: grunt default
-    - run: xvfb-run --auto-servernum -- npm test
+#    - run: sudo apt-get install xvfb
+#    - run: npm install --legacy-peer-deps
+#    - run: npx playwright install
+#    - run: npm install -g grunt-cli
+#    - run: grunt default
+#    - run: xvfb-run --auto-servernum -- npm test
 #    - run: xvfb-run --auto-servernum -- npm run jest
       env:
         CI: true
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -29,6 +29,15 @@ module.exports = function(grunt) {
           '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'],
+          // temporary, will be bundled into mapml.js possibly
+          'dist/zoomInput.js':    ['src/mapml/elementSupport/inputs/zoomInput.js'],
+          'dist/hiddenInput.js':  ['src/mapml/elementSupport/inputs/hiddenInput.js'],
+          'dist/widthInput.js':   ['src/mapml/elementSupport/inputs/widthInput.js'],
+          'dist/heightInput.js':  ['src/mapml/elementSupport/inputs/heightInput.js'],
+          'dist/locationInput.js':  ['src/mapml/elementSupport/inputs/locationInput.js'],
+          'dist/createLayerControlForLayer.js': ['src/mapml/elementSupport/layers/createLayerControlForLayer.js'],
           'dist/map-area.js':     ['src/map-area.js'],
           'dist/layer.js':        ['src/layer.js'],
           'dist/leaflet.js':      ['dist/leaflet-src.js',

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,63 @@
      </noscript> 
   </head>
   <body>
-    <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist="nofullscreen geolocation">
-      <map-caption>A pleasing map of Canada</map-caption>
-      <layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
-      <layer- label="Hat Guy" checked>
-        <map-feature id="twohats" zoom="15" class="twohats">
-        <map-properties>
-          <table>
-            <tr>
-              <th>code</th>
-              <td>1200020</td>
-            </tr>
-            <tr>
-              <th>accuracy</th>
-              <td>26</td>
-            </tr>
-            <tr>
-              <th>valdate</th>
-              <td>1995</td>
-            </tr>
-            <tr>
-              <th>image</th>
-              <td><a href="https://www.veterans.gc.ca/eng/remembrance/memorials/national-inventory-canadian-memorials/details/9304">
-                <img src="https://www.veterans.gc.ca/images/remembrance/memorials/national-inventory-canadian-memorials/mem/35059-173a.jpg" width="60" height="60"/>
-              </a>
-              </td>
-            </tr>
-            <tr>
-              <th>theme</th>
-              <td>FO</td>
-            </tr>
-            <tr>
-              <th>type</th>
-              <td>2</td>
-            </tr>
-            <tr>
-              <th>elevation</th>
-              <td>61</td>
-            </tr>
-            <tr>
-              <th>altiaccu</th>
-              <td>5</td>
-            </tr>
-          </table>
-        </map-properties>
-        <map-geometry>
-          <map-point>
-            <map-coordinates>-75.705278 45.397778</map-coordinates>
-          </map-point>
-        </map-geometry>
-      </map-feature>
+
+    <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>

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",
@@ -56,8 +56,8 @@
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
     "path": "^0.12.7",
-    "@playwright/test": "^1.35.1",
-    "playwright": "^1.35.1",
+    "@playwright/test": "^1.39.0",
+    "playwright": "^1.39.0",
     "proj4": "^2.6.2",
     "proj4leaflet": "^1.0.2",
     "rollup": "^2.23.1"

diff --git a/shared/restaurants/indian.mapml b/shared/restaurants/indian.mapml
@@ -0,0 +1,66 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+    <map-head>
+        <map-title>Restaurants</map-title>
+        <map-meta charset="utf-8" ></map-meta>
+        <map-meta content="text/mapml" http-equiv="Content-Type" ></map-meta>
+        <map-link rel="license" href="http://opendatacommons.org/licenses/odbl/1-0/" title="© OpenStreetMap and contributors" />
+        <map-meta name="projection" content="OSMTILE"></map-meta>
+        <map-meta name="zoom" content="min=0,max=22,value=3" ></map-meta>
+        <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-head>
+    <map-body>
+        <map-feature zoom="18" id="restaurant_polygon.7" class="restaurant_polygon">
+          <map-featurecaption>India Palace</map-featurecaption>
+            <map-geometry>
+              <map-point>
+                  <map-coordinates>-75.7019048 45.4191548</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">292</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">addr_stree</th>
+                            <td itemprop="addr_stree">Albert Street</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">amenity</th>
+                            <td itemprop="amenity">restaurant</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">building</th>
+                            <td itemprop="building">yes</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">name</th>
+                            <td itemprop="name">India Palace</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">cuisine</th>
+                            <td itemprop="cuisine">indian</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">website</th>
+                            <td itemprop="website">http://www.indiapalace.ca</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">phone</th>
+                            <td itemprop="phone">+1-613-234-5433</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </map-properties>
+        </map-feature>
+    </map-body>
+</mapml->