Skip to content

Commit

Permalink
matchMedia API, media attribute experiments (#140)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
3 people authored Dec 30, 2024
1 parent 4f1ab0a commit df7719c
Show file tree
Hide file tree
Showing 213 changed files with 9,336 additions and 321 deletions.
4 changes: 1 addition & 3 deletions change-projection/zoomin-zoomout/asdi-changeProjection.mapml
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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"/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<!--
Expand All @@ -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}/" />
Expand Down
4 changes: 1 addition & 3 deletions change-projection/zoomin-zoomout/cbmt-changeProjection.mapml
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
61 changes: 21 additions & 40 deletions change-projection/zoomin-zoomout/mapml-viewer/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
3 changes: 1 addition & 2 deletions change-projection/zoomin-zoomout/osm-changeProjection.mapml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 11 additions & 0 deletions change-projection/zoomin-zoomout/projections/ATLAS_POLAR_MAP.js
Original file line number Diff line number Diff line change
@@ -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);
10 changes: 10 additions & 0 deletions change-projection/zoomin-zoomout/projections/EPSG3573.js
Original file line number Diff line number Diff line change
@@ -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);
61 changes: 21 additions & 40 deletions change-projection/zoomin-zoomout/web-map/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
9 changes: 3 additions & 6 deletions linking/zoomin-zoomout/cbmt-osmtile.mapml
Original file line number Diff line number Diff line change
Expand Up @@ -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->
4 changes: 3 additions & 1 deletion linking/zoomin-zoomout/mapml-viewer/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 0 additions & 2 deletions linking/zoomin-zoomout/natgeo-osmtile.mapml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit df7719c

Please sign in to comment.