Skip to content

Commit df7719c

Browse files
prushforthprushforyushan-mu
authored
matchMedia API, media attribute experiments (#140)
* WIP on matchMedia experiments * add dark-mode-for-reference, empty media-attribute folder for future use * Modified index.html for preferred-color-schemes * Add event handler to map.matchMedia result, allowing map to select the light/dark layer appropriate to the system color mode (light/dark). * Added page for preferred map-projection * Update map-projection media query experiment. Revert change to color-scheme experiment. * Fix match-media experiments to work on maps4html.org * Add prefers-lang matchMedia experiment * Updated experiments * Add prefers-lang experiment * Added experiment for map-zoom * Added description for map-zoom * Added experiment for getting bounding box * Edited descriptions * Re-structure the experiments for media queries, add index pages * Update / add map-projection match-media experiment description * WIP for prefers-map-content * Update match-media prefers-map-content experiment. questions around image vs tile usefulness of distinction between * Update match-media map-projection query experiment description * Move features layer to top * Update map-projection media query description * Remove empty style media attribute * Add human-generated description of probability for 2000-08-15 to features. Add msi-tables directory with images to be described, by a human, because ChatGPT makes up stuff. Tables should be integrated not sure how, into page. * Hide mapml-viewer when prefers-content-type includes table * Add sub-folders for prefers-map-content matchMedia experiments: one for selecting map-layer, other for selecting map-link, using map-link.disabled property * Add media-attribute directory, copy and modify some of the match-media experiments for this purpose. * Re-structure the media-queries directory * Update media-attribute experiments. To do: update text descriptions to highlight that they're for media attribute, not matchMedia API. * Update zoomin/zoomout experiment to use media attribute * fixed flexbox design * WIP on zoomin-zoomout experiment TO Do: make it change projection and layers at certain inflection pts tbd if that should happen automatically because there is only 1 layer "on the map" when mutually exclusive map-zoom media queries control what layers are "on the map". * WIP on zoomin-zoomout experiment Fiddling with changing projection at inflection points. Not working too well, actually. tbd if that should happen automatically because there is only 1 layer "on the map" when mutually exclusive map-zoom media queries control what layers are "on the map". the map.layers collection always has 4 layers, regardless of their _mql.matches value. Move projection definitions into their own module files. tbd how to calculate an integrity value for them. * Add integrity to custom projection script tags * Update zoomin-zoomout experiment * Update zoomin-zoomout experiment for web-map use case * Update dark-mode experiment * Update dark-mode experiment --------- Co-authored-by: prushfor <prushfor@L-BSC-A146390.nrn.nrcan.gc.ca> Co-authored-by: Yushan Mu <yueyue0272@gmail.com>
1 parent 4f1ab0a commit df7719c

File tree

213 files changed

+9336
-321
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

213 files changed

+9336
-321
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
<map-title>Arctic SDI for Canada</map-title>
55
<map-meta content="text/mapml" http-equiv="Content-Type" ></map-meta>
66
<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>
7-
<map-link rel="zoomin" href="atlas-changeProjection.mapml" type="text/mapml" />
8-
<map-meta name="projection" content="EPSG3573"></map-meta>
97
<map-meta name="cs" content="pcrs"></map-meta>
108
<map-style>
119
.asdi-countries {
@@ -15,7 +13,7 @@
1513
</map-head>
1614
<map-body>
1715
<map-extent units="EPSG3573" checked="checked" hidden="hidden">
18-
<map-input type="zoom" name="TileMatrix" min="0" max="3" value="0"/>
16+
<map-input type="zoom" name="TileMatrix" min="0" max="12" value="0"/>
1917
<map-input type="location" name="TileCol" axis="column" units="tilematrix" min="0" max="1"/>
2018
<map-input type="location" name="TileRow" axis="row" units="tilematrix" min="0" max="1"/>
2119
<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‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
<map-meta content="text/mapml" http-equiv="Content-Type" ></map-meta>
66
<map-link rel="license" title="Canadian Federal Geospatial Platform" href="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN/MapServer/"></map-link>
77
<map-meta name="projection" content="ATLAS_POLAR_MAP"></map-meta>
8-
<map-link rel="zoomin" href="/experiments/linking/features/canada.mapml" type="text/mapml" />
9-
<map-link rel="zoomout" href="asdi-changeProjection.mapml" type="text/mapml" />
108
</map-head>
119
<map-body>
1210
<!--
@@ -18,7 +16,7 @@
1816
and therefore candidates for standardization in / by browsers.
1917
-->
2018
<map-extent units="ATLAS_POLAR_MAP" checked="checked" hidden="hidden">
21-
<map-input type="zoom" name="z" min="4" max="5" value="6" />
19+
<map-input type="zoom" name="z" min="0" max="6" value="6" />
2220
<map-input type="location" name="x" axis="column" units="tilematrix" min="116" max="186" />
2321
<map-input type="location" name="y" axis="row" units="tilematrix" min="125" max="184" />
2422
<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‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@
33
<map-title>Canada Base Map - Transportation (CBMT)</map-title>
44
<map-meta http-equiv="Content-Type" content="text/mapml;projection=CBMTILE"></map-meta>
55
<map-meta charset="utf-8"></map-meta>
6-
<map-link rel="zoomin" href="osm-changeProjection.mapml" type="text/mapml"/>
7-
<map-link rel="zoomout" href="/experiments/linking/features/canada.mapml" type="text/mapml"/>
86
</map-head>
97
<map-body>
108
<map-extent units="CBMTILE" checked="checked" hidden="hidden">
11-
<map-input name="z" type="zoom" min="6" max="8"/>
9+
<map-input name="z" type="zoom" min="0" max="22" />
1210
<map-input name="y" type="location" units="tilematrix" axis="row"/>
1311
<map-input name="x" type="location" units="tilematrix" axis="column"/>
1412
<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‎

Lines changed: 21 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,49 +6,30 @@
66
<title>Change projection at z=9</title>
77
<script type="module" src="../../../dist/mapml.js"></script>
88
<link rel="stylesheet" href="../../../global.css">
9-
<script type="module">
10-
let customProjectionDefinition = `{
11-
"projection": "EPSG3573",
12-
"proj4string" : "+proj=laea +lat_0=90 +lon_0=-100 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs",
13-
"origin" : [-4889334.802955,4889334.802955],
14-
"resolutions" : [38197.92815,19098.96407,9549.482037,4774.741019,2387.370509,1193.685255,596.8426273,298.4213137,149.2106568,74.60532841,37.30266421],
15-
"bounds" : [[-4594983,4507258],[4655569,-4562485]],
16-
"tilesize" : 256
17-
}`;
18-
let map = document.querySelector("mapml-viewer");
19-
let cProjection = map.defineCustomProjection(customProjectionDefinition);
20-
</script>
21-
<script type="module">
22-
let customProjectionDefinition = `{
23-
"projection": "ATLAS_POLAR_MAP",
24-
"proj4string" : "+proj=aeqd +lat_0=90 +lon_0=-90 +x_0=0 +y_0=0 +ellps=sphere +units=m +no_defs +type=crs",
25-
"code" : "ATLAS_POLAR_MAP",
26-
"origin" : [-20015200,20015200],
27-
"resolutions" : [33073,16536.5,8268.246,4134.123,2067.061,1033.531,516.765],
28-
"bounds" : [[4979939,-4846977],[-5139071,3980038]],
29-
"tilesize" : 256
30-
}`;
31-
let map = document.querySelector("mapml-viewer");
32-
let cProjection = map.defineCustomProjection(customProjectionDefinition);
33-
</script>
34-
<script type="module">
35-
/* EPSG:3005 */
36-
let customProjectionDefinition = `{
37-
"projection": "BCTILE",
38-
"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",
39-
"origin" : [-13239300, 19868500],
40-
"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],
41-
"bounds" : [[-219204, 93819], [2191523, 2065365]],
42-
"tilesize" : 256
43-
}`;
44-
let map = document.querySelector("mapml-viewer");
45-
let cProjection = map.defineCustomProjection(customProjectionDefinition);
46-
// map.projection = cProjection;
47-
</script>
9+
<script type="module" integrity="sha384-Hh7lchQhB8Rn/lnaYqaKSHmioep+t46mHHjRYMuyRh84SxzXpchwiclPLwfqYmg3" src="../projections/EPSG3573.js"></script>
10+
<script type="module" integrity="sha384-sJ2DMK3n8DI2JspezocxWO5u7i0lL+tsd/79Pq3keSIyj0VsG/HlhysalkQH2Mqe" src="../projections/ATLAS_POLAR_MAP.js"></script>
4811
</head>
4912
<body>
5013
<mapml-viewer projection="CBMTILE" zoom="8" lat="48.840422" lon="-101.219978" controls>
51-
<map-layer label="CBMT" src="../cbmt-changeProjection.mapml" checked ></map-layer>
14+
<map-layer label="ASDI" media="(map-projection: EPSG3573) and (0 <= map-zoom <= 3)" src="../asdi-changeProjection.mapml" checked ></map-layer>
15+
<map-layer label="Atlas of Canada" media="(map-projection: ATLAS_POLAR_MAP) and (4 <= map-zoom <= 5)" src="../atlas-changeProjection.mapml" checked ></map-layer>
16+
<map-layer label="CBMT" media="(map-projection: CBMTILE) and (6 <= map-zoom <= 8)" src="../cbmt-changeProjection.mapml" checked ></map-layer>
17+
<map-layer label="OSM" media="(map-projection: OSMTILE) and (9 <= map-zoom <= 18)" src="../osm-changeProjection.mapml" checked ></map-layer>
5218
</mapml-viewer>
19+
<script>
20+
let map = document.querySelector('mapml-viewer');
21+
map.addEventListener('zoomend', (e) => {
22+
let m = e.target;
23+
if (m.zoom >= 0 && m.zoom <= 3) {
24+
m.projection = "EPSG3573";
25+
} else if (m.zoom >= 4 && m.zoom <= 5) {
26+
m.projection = "ATLAS_POLAR_MAP";
27+
} else if (m.zoom >= 6 && m.zoom <= 8) {
28+
m.projection = "CBMTILE";
29+
} else {
30+
m.projection = "OSMTILE";
31+
}
32+
});
33+
</script>
5334
</body>
5435
</html>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@
33
<map-meta charset="utf-8"></map-meta>
44
<map-title>Canada Base Map - Transportation (CBMT)</map-title>
55
<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>
6-
<map-link rel="zoomout" href="cbmt-changeProjection.mapml" type="text/mapml"></map-link>
76
</map-head>
87
<map-body>
98
<map-extent units="OSMTILE" checked="checked" hidden="hidden">
10-
<map-input name="z" type="zoom" min="9" max="18"></map-input>
9+
<map-input name="z" type="zoom" min="0" max="18"></map-input>
1110
<map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
1211
<map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
1312
<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‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
let customProjectionDefinition = `{
2+
"projection": "ATLAS_POLAR_MAP",
3+
"proj4string" : "+proj=aeqd +lat_0=90 +lon_0=-90 +x_0=0 +y_0=0 +ellps=sphere +units=m +no_defs +type=crs",
4+
"code" : "ATLAS_POLAR_MAP",
5+
"origin" : [-20015200,20015200],
6+
"resolutions" : [33073,16536.5,8268.246,4134.123,2067.061,1033.531,516.765],
7+
"bounds" : [[4979939,-4846977],[-5139071,3980038]],
8+
"tilesize" : 256
9+
}`;
10+
let map = document.querySelector("mapml-viewer,map[is=web-map]");
11+
let cProjection = map.defineCustomProjection(customProjectionDefinition);

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
let customProjectionDefinition = `{
2+
"projection": "EPSG3573",
3+
"proj4string" : "+proj=laea +lat_0=90 +lon_0=-100 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs",
4+
"origin" : [-4889334.802955,4889334.802955],
5+
"resolutions" : [38197.92815,19098.96407,9549.482037,4774.741019,2387.370509,1193.685255,596.8426273,298.4213137,149.2106568,74.60532841,37.30266421],
6+
"bounds" : [[-4594983,4507258],[4655569,-4562485]],
7+
"tilesize" : 256
8+
}`;
9+
let map = document.querySelector("mapml-viewer,map[is=web-map]");
10+
let cProjection = map.defineCustomProjection(customProjectionDefinition);

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

Lines changed: 21 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,49 +6,30 @@
66
<title>Change projection at z=9</title>
77
<script type="module" src="../../../dist/mapml.js"></script>
88
<link rel="stylesheet" href="../../../global.css">
9-
<script type="module">
10-
let customProjectionDefinition = `{
11-
"projection": "EPSG3573",
12-
"proj4string" : "+proj=laea +lat_0=90 +lon_0=-100 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs",
13-
"origin" : [-4889334.802955,4889334.802955],
14-
"resolutions" : [38197.92815,19098.96407,9549.482037,4774.741019,2387.370509,1193.685255,596.8426273,298.4213137,149.2106568,74.60532841,37.30266421],
15-
"bounds" : [[-4594983,4507258],[4655569,-4562485]],
16-
"tilesize" : 256
17-
}`;
18-
let map = document.querySelector("map[is=web-map]");
19-
let cProjection = map.defineCustomProjection(customProjectionDefinition);
20-
</script>
21-
<script type="module">
22-
let customProjectionDefinition = `{
23-
"projection": "ATLAS_POLAR_MAP",
24-
"proj4string" : "+proj=aeqd +lat_0=90 +lon_0=-90 +x_0=0 +y_0=0 +ellps=sphere +units=m +no_defs +type=crs",
25-
"code" : "ATLAS_POLAR_MAP",
26-
"origin" : [-20015200,20015200],
27-
"resolutions" : [33073,16536.5,8268.246,4134.123,2067.061,1033.531,516.765],
28-
"bounds" : [[4979939,-4846977],[-5139071,3980038]],
29-
"tilesize" : 256
30-
}`;
31-
let map = document.querySelector("map");
32-
let cProjection = map.defineCustomProjection(customProjectionDefinition);
33-
</script>
34-
<script type="module">
35-
/* EPSG:3005 */
36-
let customProjectionDefinition = `{
37-
"projection": "BCTILE",
38-
"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",
39-
"origin" : [-13239300, 19868500],
40-
"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],
41-
"bounds" : [[-219204, 93819], [2191523, 2065365]],
42-
"tilesize" : 256
43-
}`;
44-
let map = document.querySelector("map[is=web-map]");
45-
let cProjection = map.defineCustomProjection(customProjectionDefinition);
46-
// map.projection = cProjection;
47-
</script>
9+
<script type="module" integrity="sha384-Hh7lchQhB8Rn/lnaYqaKSHmioep+t46mHHjRYMuyRh84SxzXpchwiclPLwfqYmg3" src="../projections/EPSG3573.js"></script>
10+
<script type="module" integrity="sha384-sJ2DMK3n8DI2JspezocxWO5u7i0lL+tsd/79Pq3keSIyj0VsG/HlhysalkQH2Mqe" src="../projections/ATLAS_POLAR_MAP.js"></script>
4811
</head>
4912
<body>
5013
<map is="web-map" projection="CBMTILE" zoom="8" lat="48.840422" lon="-101.219978" controls>
51-
<map-layer label="CBMT" src="../cbmt-changeProjection.mapml" checked></map-layer>
14+
<map-layer label="ASDI" media="(map-projection: EPSG3573) and (0 <= map-zoom <= 3)" src="../asdi-changeProjection.mapml" checked ></map-layer>
15+
<map-layer label="Atlas of Canada" media="(map-projection: ATLAS_POLAR_MAP) and (4 <= map-zoom <= 5)" src="../atlas-changeProjection.mapml" checked ></map-layer>
16+
<map-layer label="CBMT" media="(map-projection: CBMTILE) and (6 <= map-zoom <= 8)" src="../cbmt-changeProjection.mapml" checked ></map-layer>
17+
<map-layer label="OSM" media="(map-projection: OSMTILE) and (9 <= map-zoom <= 18)" src="../osm-changeProjection.mapml" checked ></map-layer>
5218
</map>
19+
<script>
20+
let map = document.querySelector('map');
21+
map.addEventListener('zoomend', (e) => {
22+
let m = e.target;
23+
if (m.zoom >= 0 && m.zoom <= 3) {
24+
m.projection = "EPSG3573";
25+
} else if (m.zoom >= 4 && m.zoom <= 5) {
26+
m.projection = "ATLAS_POLAR_MAP";
27+
} else if (m.zoom >= 6 && m.zoom <= 8) {
28+
m.projection = "CBMTILE";
29+
} else {
30+
m.projection = "OSMTILE";
31+
}
32+
});
33+
</script>
5334
</body>
5435
</html>

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,10 +97,10 @@ <h2>Linking Spatial Data - GeoWeb</h2>
9797
<h2>Styling</h2>
9898
<ul class="example">
9999
<li><a href="styling/alternate-styles/">Alternate basemap styles</a>
100-
<li><a href="styling/media-queries/">Media query for preferred content type</a>
100+
<li><a href="styling/media-queries/">Media / map container queries</a>
101101
<li><a href="vector-tiles/mapml/web-map/">MapML vector tiles styled with external CSS stylesheet</a>
102102
<li><a href="vector-tiles/pmtiles/">pmtiles / Mapbox vector tiles styled with application/pmtiles+stylesheet style module</a>
103-
<li><a href="styling/dark-mode.html">Dark mode</a></li>
103+
<li><a href="styling/dark-mode/">Dark mode</a></li>
104104
</ul>
105105
</section>
106106

‎linking/zoomin-zoomout/cbmt-osmtile.mapml‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,14 @@
33
<map-meta charset="utf-8"></map-meta>
44
<map-title>Canada Base Map - Transportation (CBMT)</map-title>
55
<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>
6-
<map-link rel="zoomout" href="natgeo-osmtile.mapml"></map-link>
7-
<map-link rel="zoomin" href="toporama-osmtile.mapml"></map-link>
8-
<map-meta name="extent" content="top-left-easting=-20409298, top-left-northing=13687732, bottom-right-easting=-1624134, bottom-right-northing=4774563"></map-meta>
96
</map-head>
107
<map-body>
118
<map-extent units="OSMTILE" checked="checked" hidden="hidden">
12-
<map-input name="z" type="zoom" min="6" max="10"></map-input>
9+
<map-input name="z" type="zoom" min="0" max="22"></map-input>
1310
<map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
1411
<map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
15-
<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>
16-
<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>
12+
<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>
13+
<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>
1714
</map-extent>
1815
</map-body>
1916
</mapml->

0 commit comments

Comments
 (0)