-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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>
- Loading branch information
1 parent
4f1ab0a
commit df7719c
Showing
213 changed files
with
9,336 additions
and
321 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
change-projection/zoomin-zoomout/projections/ATLAS_POLAR_MAP.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.