matchMedia API, media attribute experiments

change-projection/zoomin-zoomout/asdi-changeProjection.mapml

@@ -4,8 +4,6 @@
         <map-title>Arctic SDI for Canada</map-title>
         <map-meta content="text/mapml" http-equiv="Content-Type" ></map-meta>
         <map-link rel="license" title="&amp;copy; Arctic Council" href="https://catalogue.arctic-sdi.org/geonetwork/srv/eng/catalog.search#/map-metadata/8b4f2b34-2d0d-4744-ae0f-d7989b9f7a02/formatters/xsl-view?root=div&amp;view=advanced"></map-link>
-        <map-link rel="zoomin" href="atlas-changeProjection.mapml" type="text/mapml" />
-        <map-meta name="projection" content="EPSG3573"></map-meta>
         <map-meta name="cs" content="pcrs"></map-meta>
         <map-style>
           .asdi-countries {
@@ -15,7 +13,7 @@
     </map-head>
     <map-body>
         <map-extent units="EPSG3573" checked="checked" hidden="hidden">
-          <map-input type="zoom" name="TileMatrix" min="0" max="3" value="0"/>
+          <map-input type="zoom" name="TileMatrix" min="0" max="12" value="0"/>
           <map-input type="location" name="TileCol" axis="column" units="tilematrix" min="0" max="1"/>
           <map-input type="location" name="TileRow" axis="row" units="tilematrix" min="0" max="1"/>
           <map-link rel="tile" tref="https://basemap.arctic-sdi.org/mapcache/wmts/1.0.0/arctic_cascading/default/3573/{TileMatrix}/{TileRow}/{TileCol}.png"/>

change-projection/zoomin-zoomout/atlas-changeProjection.mapml

@@ -5,8 +5,6 @@
         <map-meta content="text/mapml" http-equiv="Content-Type" ></map-meta>
         <map-link rel="license" title="Canadian Federal Geospatial Platform" href="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN/MapServer/"></map-link>
         <map-meta name="projection" content="ATLAS_POLAR_MAP"></map-meta>
-        <map-link rel="zoomin" href="/experiments/linking/features/canada.mapml" type="text/mapml" />
-        <map-link rel="zoomout" href="asdi-changeProjection.mapml" type="text/mapml" />
     </map-head>        
     <map-body>
       <!-- 
@@ -18,7 +16,7 @@
            and therefore candidates for standardization in / by browsers.
       -->
       <map-extent units="ATLAS_POLAR_MAP" checked="checked" hidden="hidden">
-        <map-input type="zoom" name="z" min="4" max="5" value="6" />
+        <map-input type="zoom" name="z" min="0" max="6" value="6" />
         <map-input type="location" name="x" axis="column" units="tilematrix" min="116" max="186" />
         <map-input type="location" name="y" axis="row" units="tilematrix" min="125" max="184" />
         <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN/MapServer/tile/{z}/{y}/{x}/" />

change-projection/zoomin-zoomout/cbmt-changeProjection.mapml

@@ -3,12 +3,10 @@
     <map-title>Canada Base Map - Transportation (CBMT)</map-title>
     <map-meta http-equiv="Content-Type" content="text/mapml;projection=CBMTILE"></map-meta>
     <map-meta charset="utf-8"></map-meta>
-    <map-link rel="zoomin" href="osm-changeProjection.mapml" type="text/mapml"/> 
-    <map-link rel="zoomout" href="/experiments/linking/features/canada.mapml" type="text/mapml"/> 
   </map-head>
   <map-body>
     <map-extent units="CBMTILE"  checked="checked" hidden="hidden">
-      <map-input name="z" type="zoom" min="6" max="8"/>
+      <map-input name="z" type="zoom" min="0" max="22" />
       <map-input name="y" type="location" units="tilematrix" axis="row"/>
       <map-input name="x" type="location" units="tilematrix" axis="column"/>
       <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" />

change-projection/zoomin-zoomout/mapml-viewer/index.html

@@ -6,49 +6,30 @@
     <title>Change projection at z=9</title>
     <script type="module" src="../../../dist/mapml.js"></script>
     <link rel="stylesheet" href="../../../global.css">
-    <script type="module">
-      let customProjectionDefinition = `{
-            "projection": "EPSG3573", 
-            "proj4string" : "+proj=laea +lat_0=90 +lon_0=-100 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs", 
-            "origin" : [-4889334.802955,4889334.802955], 
-            "resolutions" : [38197.92815,19098.96407,9549.482037,4774.741019,2387.370509,1193.685255,596.8426273,298.4213137,149.2106568,74.60532841,37.30266421],  
-            "bounds" : [[-4594983,4507258],[4655569,-4562485]],  
-            "tilesize" : 256 
-        }`;
-      let map = document.querySelector("mapml-viewer");
-      let cProjection = map.defineCustomProjection(customProjectionDefinition);    
-    </script>
-    <script type="module">
-      let customProjectionDefinition = `{
-            "projection": "ATLAS_POLAR_MAP",
-            "proj4string" : "+proj=aeqd +lat_0=90 +lon_0=-90 +x_0=0 +y_0=0 +ellps=sphere +units=m +no_defs +type=crs",
-            "code" : "ATLAS_POLAR_MAP",
-            "origin" : [-20015200,20015200],
-            "resolutions" :  [33073,16536.5,8268.246,4134.123,2067.061,1033.531,516.765],
-            "bounds" : [[4979939,-4846977],[-5139071,3980038]],
-            "tilesize" : 256
-        }`;
-      let map = document.querySelector("mapml-viewer");
-      let cProjection = map.defineCustomProjection(customProjectionDefinition);
-    </script>
-    <script type="module">
-    /* EPSG:3005 */
-      let customProjectionDefinition = `{
-            "projection": "BCTILE",
-            "proj4string" : "+proj=aea +lat_1=50 +lat_2=58.5 +lat_0=45 +lon_0=-126 +x_0=1000000 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs",
-            "origin" : [-13239300, 19868500],
-            "resolutions" :  [9783.9400003175,4891.969998835831,2445.9849999470835,1222.9925001058336,611.4962500529168,305.74812489416644,152.8740625,76.4370312632292,38.2185156316146,19.10925781316146,9.554628905257811,4.7773144526289055,2.3886572265790367,1.1943286131572264],
-            "bounds" : [[-219204, 93819], [2191523, 2065365]],
-            "tilesize" : 256
-        }`;
-      let map = document.querySelector("mapml-viewer");
-      let cProjection = map.defineCustomProjection(customProjectionDefinition);
-     // map.projection =  cProjection;
-    </script>
+    <script type="module" integrity="sha384-Hh7lchQhB8Rn/lnaYqaKSHmioep+t46mHHjRYMuyRh84SxzXpchwiclPLwfqYmg3" src="../projections/EPSG3573.js"></script>
+    <script type="module" integrity="sha384-sJ2DMK3n8DI2JspezocxWO5u7i0lL+tsd/79Pq3keSIyj0VsG/HlhysalkQH2Mqe" src="../projections/ATLAS_POLAR_MAP.js"></script>
   </head>
   <body>
     <mapml-viewer projection="CBMTILE" zoom="8" lat="48.840422" lon="-101.219978" controls>
-      <map-layer label="CBMT" src="../cbmt-changeProjection.mapml" checked ></map-layer>
+      <map-layer label="ASDI" media="(map-projection: EPSG3573) and (0 <= map-zoom <= 3)" src="../asdi-changeProjection.mapml" checked ></map-layer>
+      <map-layer label="Atlas of Canada"  media="(map-projection: ATLAS_POLAR_MAP) and (4 <= map-zoom <= 5)"  src="../atlas-changeProjection.mapml" checked ></map-layer>
+      <map-layer label="CBMT" media="(map-projection: CBMTILE) and (6 <= map-zoom <= 8)" src="../cbmt-changeProjection.mapml" checked ></map-layer>
+      <map-layer label="OSM" media="(map-projection: OSMTILE) and (9 <= map-zoom <= 18)" src="../osm-changeProjection.mapml" checked ></map-layer>
     </mapml-viewer>
+    <script>
+      let map = document.querySelector('mapml-viewer');
+      map.addEventListener('zoomend', (e) => {
+        let m = e.target;
+        if (m.zoom >= 0 && m.zoom <= 3) {
+          m.projection = "EPSG3573";
+        } else if (m.zoom >= 4 && m.zoom <= 5) {
+          m.projection = "ATLAS_POLAR_MAP";
+        } else if (m.zoom >= 6 && m.zoom <= 8) {
+          m.projection = "CBMTILE";
+        } else {
+          m.projection = "OSMTILE";
+        }
+      });
+    </script>
   </body>
 </html>

change-projection/zoomin-zoomout/osm-changeProjection.mapml

@@ -3,11 +3,10 @@
     <map-meta charset="utf-8"></map-meta>
     <map-title>Canada Base Map - Transportation (CBMT)</map-title>
     <map-link rel="license" href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285" title="Canada Base Map © Natural Resources Canada"></map-link>
-    <map-link rel="zoomout" href="cbmt-changeProjection.mapml" type="text/mapml"></map-link>
   </map-head>
   <map-body>
     <map-extent units="OSMTILE" checked="checked" hidden="hidden">
-      <map-input name="z" type="zoom" min="9" max="18"></map-input>
+      <map-input name="z" type="zoom" min="0" max="18"></map-input>
       <map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
       <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
       <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT_CBCT_GEOM_3857/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>

change-projection/zoomin-zoomout/projections/ATLAS_POLAR_MAP.js

@@ -0,0 +1,11 @@
+      let customProjectionDefinition = `{
+            "projection": "ATLAS_POLAR_MAP",
+            "proj4string" : "+proj=aeqd +lat_0=90 +lon_0=-90 +x_0=0 +y_0=0 +ellps=sphere +units=m +no_defs +type=crs",
+            "code" : "ATLAS_POLAR_MAP",
+            "origin" : [-20015200,20015200],
+            "resolutions" :  [33073,16536.5,8268.246,4134.123,2067.061,1033.531,516.765],
+            "bounds" : [[4979939,-4846977],[-5139071,3980038]],
+            "tilesize" : 256
+        }`;
+      let map = document.querySelector("mapml-viewer,map[is=web-map]");
+      let cProjection = map.defineCustomProjection(customProjectionDefinition);

change-projection/zoomin-zoomout/projections/EPSG3573.js

@@ -0,0 +1,10 @@
+      let customProjectionDefinition = `{
+            "projection": "EPSG3573", 
+            "proj4string" : "+proj=laea +lat_0=90 +lon_0=-100 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs", 
+            "origin" : [-4889334.802955,4889334.802955], 
+            "resolutions" : [38197.92815,19098.96407,9549.482037,4774.741019,2387.370509,1193.685255,596.8426273,298.4213137,149.2106568,74.60532841,37.30266421],  
+            "bounds" : [[-4594983,4507258],[4655569,-4562485]],  
+            "tilesize" : 256 
+        }`;
+      let map = document.querySelector("mapml-viewer,map[is=web-map]");
+      let cProjection = map.defineCustomProjection(customProjectionDefinition);  

change-projection/zoomin-zoomout/web-map/index.html

@@ -6,49 +6,30 @@
     <title>Change projection at z=9</title>
     <script type="module" src="../../../dist/mapml.js"></script>
     <link rel="stylesheet" href="../../../global.css">
-    <script type="module">
-      let customProjectionDefinition = `{
-            "projection": "EPSG3573", 
-            "proj4string" : "+proj=laea +lat_0=90 +lon_0=-100 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs", 
-            "origin" : [-4889334.802955,4889334.802955], 
-            "resolutions" : [38197.92815,19098.96407,9549.482037,4774.741019,2387.370509,1193.685255,596.8426273,298.4213137,149.2106568,74.60532841,37.30266421],  
-            "bounds" : [[-4594983,4507258],[4655569,-4562485]],  
-            "tilesize" : 256 
-        }`;
-      let map = document.querySelector("map[is=web-map]");
-      let cProjection = map.defineCustomProjection(customProjectionDefinition);    
-    </script>
-    <script type="module">
-      let customProjectionDefinition = `{
-            "projection": "ATLAS_POLAR_MAP",
-            "proj4string" : "+proj=aeqd +lat_0=90 +lon_0=-90 +x_0=0 +y_0=0 +ellps=sphere +units=m +no_defs +type=crs",
-            "code" : "ATLAS_POLAR_MAP",
-            "origin" : [-20015200,20015200],
-            "resolutions" :  [33073,16536.5,8268.246,4134.123,2067.061,1033.531,516.765],
-            "bounds" : [[4979939,-4846977],[-5139071,3980038]],
-            "tilesize" : 256
-        }`;
-      let map = document.querySelector("map");
-      let cProjection = map.defineCustomProjection(customProjectionDefinition);
-    </script>
-    <script type="module">
-    /* EPSG:3005 */
-      let customProjectionDefinition = `{
-            "projection": "BCTILE",
-            "proj4string" : "+proj=aea +lat_1=50 +lat_2=58.5 +lat_0=45 +lon_0=-126 +x_0=1000000 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs",
-            "origin" : [-13239300, 19868500],
-            "resolutions" :  [9783.9400003175,4891.969998835831,2445.9849999470835,1222.9925001058336,611.4962500529168,305.74812489416644,152.8740625,76.4370312632292,38.2185156316146,19.10925781316146,9.554628905257811,4.7773144526289055,2.3886572265790367,1.1943286131572264],
-            "bounds" : [[-219204, 93819], [2191523, 2065365]],
-            "tilesize" : 256
-        }`;
-      let map = document.querySelector("map[is=web-map]");
-      let cProjection = map.defineCustomProjection(customProjectionDefinition);
-//      map.projection =  cProjection;
-    </script>
+    <script type="module" integrity="sha384-Hh7lchQhB8Rn/lnaYqaKSHmioep+t46mHHjRYMuyRh84SxzXpchwiclPLwfqYmg3" src="../projections/EPSG3573.js"></script>
+    <script type="module" integrity="sha384-sJ2DMK3n8DI2JspezocxWO5u7i0lL+tsd/79Pq3keSIyj0VsG/HlhysalkQH2Mqe" src="../projections/ATLAS_POLAR_MAP.js"></script>
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="8" lat="48.840422" lon="-101.219978" controls>
-      <map-layer label="CBMT" src="../cbmt-changeProjection.mapml" checked></map-layer>
+      <map-layer label="ASDI" media="(map-projection: EPSG3573) and (0 <= map-zoom <= 3)" src="../asdi-changeProjection.mapml" checked ></map-layer>
+      <map-layer label="Atlas of Canada"  media="(map-projection: ATLAS_POLAR_MAP) and (4 <= map-zoom <= 5)"  src="../atlas-changeProjection.mapml" checked ></map-layer>
+      <map-layer label="CBMT" media="(map-projection: CBMTILE) and (6 <= map-zoom <= 8)" src="../cbmt-changeProjection.mapml" checked ></map-layer>
+      <map-layer label="OSM" media="(map-projection: OSMTILE) and (9 <= map-zoom <= 18)" src="../osm-changeProjection.mapml" checked ></map-layer>
     </map>
+    <script>
+      let map = document.querySelector('map');
+      map.addEventListener('zoomend', (e) => {
+        let m = e.target;
+        if (m.zoom >= 0 && m.zoom <= 3) {
+          m.projection = "EPSG3573";
+        } else if (m.zoom >= 4 && m.zoom <= 5) {
+          m.projection = "ATLAS_POLAR_MAP";
+        } else if (m.zoom >= 6 && m.zoom <= 8) {
+          m.projection = "CBMTILE";
+        } else {
+          m.projection = "OSMTILE";
+        }
+      });
+    </script>
   </body>
 </html>

index.html

@@ -97,10 +97,10 @@ <h2>Linking Spatial Data - GeoWeb</h2>
         <h2>Styling</h2>
       <ul class="example">
         <li><a href="styling/alternate-styles/">Alternate basemap styles</a>
-        <li><a href="styling/media-queries/">Media query for preferred content type</a>
+        <li><a href="styling/media-queries/">Media / map container queries</a>
         <li><a href="vector-tiles/mapml/web-map/">MapML vector tiles styled with external CSS stylesheet</a>
         <li><a href="vector-tiles/pmtiles/">pmtiles / Mapbox vector tiles styled with application/pmtiles+stylesheet style module</a>
-        <li><a href="styling/dark-mode.html">Dark mode</a></li>
+        <li><a href="styling/dark-mode/">Dark mode</a></li>
       </ul>
     </section>
 

linking/zoomin-zoomout/cbmt-osmtile.mapml

@@ -3,17 +3,14 @@
     <map-meta charset="utf-8"></map-meta>
     <map-title>Canada Base Map - Transportation (CBMT)</map-title>
     <map-link rel="license" href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285" title="Canada Base Map © Natural Resources Canada"></map-link>
-    <map-link rel="zoomout" href="natgeo-osmtile.mapml"></map-link>
-    <map-link rel="zoomin" href="toporama-osmtile.mapml"></map-link>
-<map-meta name="extent" content="top-left-easting=-20409298, top-left-northing=13687732, bottom-right-easting=-1624134, bottom-right-northing=4774563"></map-meta>
   </map-head>
   <map-body>
     <map-extent units="OSMTILE" checked="checked" hidden="hidden">
-      <map-input name="z" type="zoom" min="6" max="10"></map-input>
+      <map-input name="z" type="zoom" min="0" max="22"></map-input>
       <map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
       <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
-      <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT_CBCT_GEOM_3857/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
-      <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT_TXT_3857/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
+      <map-link rel="tile" tref="https://maps-cartes.services.geo.ca/server2_serveur2/rest/services/BaseMaps/CBMT_CBCT_GEOM_3857/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
+      <map-link rel="tile" tref="https://maps-cartes.services.geo.ca/server2_serveur2/rest/services/BaseMaps/CBMT_TXT_3857/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
     </map-extent>
   </map-body>
 </mapml->

linking/zoomin-zoomout/mapml-viewer/index.html

@@ -9,7 +9,9 @@
   </head>
   <body>
     <mapml-viewer projection="OSMTILE" zoom="7" lat="51.8" lon="-97.8" controls>
-      <map-layer label="CBMT" src="../cbmt-osmtile.mapml" checked ></map-layer>
+      <map-layer  src="../natgeo-osmtile.mapml" media="(0 <= map-zoom <= 5)" checked ></map-layer>
+      <map-layer  src="../cbmt-osmtile.mapml" media="(6 <= map-zoom <= 10)" checked ></map-layer>
+      <map-layer  src="../toporama-osmtile.mapml" media="(11 <= map-zoom <= 22)" checked ></map-layer>
     </mapml-viewer>
   </body>
 </html>

linking/zoomin-zoomout/natgeo-osmtile.mapml

@@ -4,12 +4,10 @@
     <map-meta charset="utf-8" ></map-meta>
     <map-meta content="text/mapml" http-equiv="Content-Type" ></map-meta>
     <map-link rel="license" href="https://server.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer" title="&amp;copy; National Geographic, Esri, Garmin, HERE, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, increment P Corp."></map-link>
-    <map-link rel="zoomin" href="cbmt-osmtile.mapml"></map-link>
 <map-meta name="extent" content="top-left-easting=-20409298, top-left-northing=13687732, bottom-right-easting=-1624134, bottom-right-northing=4774563"></map-meta>
   </map-head>
   <map-body>
       <map-extent label="National Geographic" units="OSMTILE" checked="checked">
-        <map-meta name="zoom" content="min=0,max=5" ></map-meta>
         <map-input name="TileMatrix" type="zoom" value="18" min="0" max="18"></map-input>
         <map-input name="TileCol" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
         <map-input name="TileRow" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>