First pass / rough draft of HTMLMapmlViewerElement.matchMedia API, by prushforth · Pull Request #1008 · Maps4HTML/MapML.js

prushforth · 2024-11-04T02:48:45Z

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

Looks good, see suggestions/comments.

test/e2e/api/matchMedia/map-bounding-box.html

prushforth · 2024-11-25T20:47:00Z

test/e2e/api/matchMedia/map-bounding-box.html

+                <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>


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.

By that, does it mean we just won't have a base map for test cases?

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...

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

test/e2e/api/matchMedia/map-bounding-box.test.js

test/e2e/api/matchMedia/map-projection.html

prushforth

Overall pretty good! Apply some of the cleanup suggestions and I think we can probably merge it. Let's see what @AliyanH thinks...

test/e2e/api/matchMedia/combined-matchMedia.html

test/e2e/api/matchMedia/combined-matchMedia.test.js

test/e2e/api/matchMedia/combined-matchMedia.html

AliyanH · 2024-11-27T17:44:08Z

Will we also sync web-map.js with the matchMedia API?

AliyanH

Looks pretty cool! Especially with the support for extents!

AliyanH · 2024-11-27T18:12:34Z

src/mapml-viewer.js

      }
    });
  }
+  matchMedia(query) {


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)

AliyanH · 2024-11-27T18:21:13Z

src/mapml-viewer.js

+          };
+        }
+      },
+      'map-top-left-easting': {


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

AliyanH · 2024-11-27T18:32:14Z

src/mapml-viewer.js

+      'prefers-lang': {
+        type: 'discrete',
+        get values() {
+          return [navigator.language.substring(0, 2)];


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

AliyanH · 2024-11-27T18:41:25Z

src/mapml-viewer.js

+        valueType: 'integer',
+        canBeNegative: false,
+        canBeZero: true,
+        get extraValues() {


Why is this extraValues, while all the others are just values? Did not find this being used anywhere

Good catch, I think it can be removed... tbd

prushforth · 2024-11-27T18:52:42Z

Will we also sync web-map.js with the matchMedia API?

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(...)

prushforth · 2024-11-27T20:45:51Z

Will we also sync web-map.js with the matchMedia API?

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 .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 49f37a9 to a5e3c89 Compare November 6, 2024 19:48

prushforth force-pushed the match-media branch from 872d89f to a6412d0 Compare November 16, 2024 01:34

prushforth mentioned this pull request Nov 16, 2024

matchMedia API, media attribute experiments Maps4HTML/experiments#140

Merged

prushforth commented Nov 25, 2024

View reviewed changes

prushforth commented Nov 27, 2024

View reviewed changes

AliyanH marked this pull request as ready for review November 27, 2024 17:15

AliyanH reviewed Nov 27, 2024

View reviewed changes

prushforth force-pushed the match-media branch from 1806ffe to d17781d Compare December 3, 2024 20:08

prushforth merged commit 3a006ea into Maps4HTML:main Dec 3, 2024

Conversation

prushforth commented Nov 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

prushforth left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

prushforth Nov 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

prushforth left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AliyanH commented Nov 27, 2024

Uh oh!

AliyanH left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

prushforth commented Nov 27, 2024

Uh oh!

prushforth commented Nov 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

prushforth commented Nov 4, 2024 •

edited

Loading

prushforth Nov 25, 2024 •

edited

Loading

prushforth commented Nov 27, 2024 •

edited

Loading