First pass / rough draft of HTMLMapmlViewerElement.matchMedia API, #1008
Conversation
prushforth
commented
Nov 4, 2024
•
prushforth
commented
- add matchMedia to <map> element API
- document matchMedia API in en & fr
- add/ update documentation of mapml-extension to for prefers-map-content
- update mapml-extension to add tests for multiple prefers-map-content values
prushforth
force-pushed
the
match-media
branch
from
49f37a9 to
a5e3c89
Compare
prushforth
force-pushed
the
match-media
branch
from
872d89f to
a6412d0
Compare
| <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> |
There was a problem hiding this comment.
I have been starting to create tests that have no tiles in them at all, so that there's no network waiting going on, or minimal if possible.
There was a problem hiding this comment.
By that, does it mean we just won't have a base map for test cases?
There was a problem hiding this comment.
Well we'll have a map, but the layer will be sort of fake, in that the tref attribute should point to nothing. Let me see if I can find an example...
There was a problem hiding this comment.
Here's an example: https://github.com/Maps4HTML/MapML.js/blob/main/test/e2e/elements/map-layer/layer-extent.html the tiles just return 404 not found, but it doesn't harm the test afaik
There was a problem hiding this comment.
Overall pretty good! Apply some of the cleanup suggestions and I think we can probably merge it. Let's see what @AliyanH thinks...
|
Will we also sync web-map.js with the matchMedia API? |
src/mapml-viewer.js
Outdated
| @@ -986,7 +989,256 @@ export class HTMLMapmlViewerElement extends HTMLElement { | |||
| } | |||
| }); | |||
| } | |||
| matchMedia(query) { | |||
There was a problem hiding this comment.
For documentation - all possible features:
- prefers-color-scheme (i.e. dark or light)
- prefers-lang (i.e. en, fr)
- map-projection (i.e. OSMTILE, CBMTILE)
- map-zoom (i.e. > or < Int)
- prefers-map-content
- map-top-left-easting (i.e. > or < Double)
- map-bottom-right-easting (i.e. > or < Double)
- map-bottom-right-northing (i.e. > or < Double)
- map-top-left-northing (i.e. > or < Double)
src/mapml-viewer.js
Outdated
| }; | ||
| } | ||
| }, | ||
| 'map-top-left-easting': { |
There was a problem hiding this comment.
map-top-left-easting (i.e. > or < Double)
map-bottom-right-easting (i.e. > or < Double)
map-bottom-right-northing (i.e. > or < Double)
map-top-left-northing (i.e. > or < Double)
May be a little hard for users to understand/utilize the extent feature queries. A nice graphic in the docs or something similar would be needed to explain the extents and how to properly use them via media queries
src/mapml-viewer.js
Outdated
| 'prefers-lang': { | ||
| type: 'discrete', | ||
| get values() { | ||
| return [navigator.language.substring(0, 2)]; |
There was a problem hiding this comment.
language subtag may not always be of 2 characters i.e. https://datatracker.ietf.org/doc/html/rfc5646#appendix-A. Would it instead be better to use .split('-')[0]?
src/mapml-viewer.js
Outdated
| valueType: 'integer', | ||
| canBeNegative: false, | ||
| canBeZero: true, | ||
| get extraValues() { |
There was a problem hiding this comment.
Why is this extraValues, while all the others are just values? Did not find this being used anywhere
There was a problem hiding this comment.
Good catch, I think it can be removed... tbd
oh, yes, we need to make a to-do list for sure, and this is on it. Also tests (well a copy of existing tests for matchMedia) to apply to <map is="web-map">.matchMedia(...) |
I moved matchMedia into its own file. To be determined: best way to apply existing tests to both <mapml-viewer> and <map is=web-map> |
depends on media-query-parser and media-query-solver.
Use multi-select values of contentPreference sent by mapml-extension
(relies on M.options.contentPreference being an array).
Update map-zoom handling to compare current map zoom against query
Add window.matchMedia query + event listener for color-scheme changes,
allows map to adapt without having to shake it.
Change the way prefers-lang selects the language (use navigator.language,
not navigator.languages, because other values aren't of use).
Make matchMedia(query).matches a boolean value
Added tests for map-zoom and prefers-color-scheme
Added tests for bounding box and map-projection
Added test for combined matchMedia API
Add matchMedia to web-map.js
Fix up some other stuff that had fallen through the cracks of keeping
mapml-viewer and web-map in sync
Create elementSupport/viewers/matchMedia.js, de-duplicates code
Import matchMedia from matchMedia.js into both mapml-viewer and web-map
Add MIT license for media-query-parser and -solver
Update version to 0.15.0
Added web-map test for combined-matchMedia
Add ${mapType} to title of each test so logs are explicit
Use map.getByTestId, on id generated to be unique within parent map
prushforth
force-pushed
the
match-media
branch
from
1806ffe to
d17781d
Compare
