Skip to content

Commit 3a006ea

Browse files
prushforthprushforth
committed
Implementation of HTMLMapmlViewerElement.matchMedia API,
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
1 parent ddba5df commit 3a006ea

20 files changed

+1039
-7
lines changed

‎LICENSE.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,3 +184,22 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
184184
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
185185
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
186186
SOFTWARE.
187+
188+
MIT License
189+
190+
Copyright (c) 2023 Tom Golden <[email protected]>
191+
192+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
193+
associated documentation files (the "Software"), to deal in the Software without restriction,
194+
including without limitation the rights to use, copy, modify, merge, publish, distribute,
195+
sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
196+
furnished to do so, subject to the following conditions:
197+
198+
The above copyright notice and this permission notice shall be included in all copies or substantial
199+
portions of the Software.
200+
201+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
202+
NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
203+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
204+
OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
205+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎package-lock.json‎

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@maps4html/mapml",
3-
"version": "0.14.1",
3+
"version": "0.15.0",
44
"description": "Custom <mapml-viewer> element suite",
55
"keywords": [
66
"mapml-viewer",
@@ -56,6 +56,9 @@
5656
"grunt-prettier": "^2.2.0",
5757
"leaflet": "^1.9.4",
5858
"leaflet.locatecontrol": "^0.81.1",
59+
"mapml-extension": "git+https://github.com/Maps4HTML/mapml-extension",
60+
"media-query-parser": "^3.0.2",
61+
"media-query-solver": "^0.1.3",
5962
"path": "^0.12.7",
6063
"playwright": "^1.39.0",
6164
"proj4": "^2.6.2",

‎src/mapml-viewer.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
import Proj from 'proj4leaflet/src/proj4leaflet.js';
1010
import { Util } from './mapml/utils/Util.js';
1111
import { DOMTokenList } from './mapml/utils/DOMTokenList.js';
12-
12+
import { matchMedia } from './mapml/elementSupport/viewers/matchMedia.js';
1313
import { HTMLLayerElement } from './map-layer.js';
1414
import { LayerDashElement } from './layer-.js';
1515
import { HTMLMapCaptionElement } from './map-caption.js';
@@ -240,7 +240,8 @@ export class HTMLMapmlViewerElement extends HTMLElement {
240240
}
241241
})
242242
.catch((e) => {
243-
throw new Error('Projection not defined: ' + e);
243+
console.log(e);
244+
throw new Error('Error: ' + e);
244245
});
245246
}
246247
_setLocale() {
@@ -411,7 +412,7 @@ export class HTMLMapmlViewerElement extends HTMLElement {
411412
this._map.options.projection = newValue;
412413
let layersReady = [];
413414
this._map.announceMovement.disable();
414-
for (let layer of this.querySelectorAll('map-layer')) {
415+
for (let layer of this.querySelectorAll('map-layer,layer-')) {
415416
layer.removeAttribute('disabled');
416417
let reAttach = this.removeChild(layer);
417418
this.appendChild(reAttach);
@@ -986,7 +987,6 @@ export class HTMLMapmlViewerElement extends HTMLElement {
986987
}
987988
});
988989
}
989-
990990
locate(options) {
991991
//options: https://leafletjs.com/reference.html#locate-options
992992
if (this._geolocationButton) {
@@ -1468,6 +1468,12 @@ export class HTMLMapmlViewerElement extends HTMLElement {
14681468
return geojsonLayer;
14691469
}
14701470
}
1471+
1472+
// ensure that 'this' always refers the the map on which the function runs
1473+
HTMLMapmlViewerElement.prototype.matchMedia = function (...args) {
1474+
return matchMedia.apply(this, args);
1475+
};
1476+
14711477
window.customElements.define('mapml-viewer', HTMLMapmlViewerElement);
14721478
try {
14731479
window.customElements.define('web-map', HTMLWebMapElement, {

‎src/mapml/elementSupport/viewers/matchMedia.js‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
import { parseMediaQueryList } from 'media-query-parser';
2+
import { solveMediaQueryList } from 'media-query-solver';
3+
4+
export const matchMedia = function (query) {
5+
// useful features for maps: prefers-color-scheme, prefers-lang, projection, zoom, extent
6+
const parsedQuery = parseMediaQueryList(query);
7+
8+
// less obviously useful: aspect-ratio, orientation, (device) resolution, overflow-block, overflow-inline
9+
10+
const map = this;
11+
const features = {
12+
'prefers-lang': {
13+
type: 'discrete',
14+
get values() {
15+
return [navigator.language.substring(0, 2)];
16+
}
17+
},
18+
'map-projection': {
19+
type: 'discrete',
20+
get values() {
21+
return [map.projection.toLowerCase()];
22+
}
23+
},
24+
'map-zoom': {
25+
type: 'range',
26+
valueType: 'integer',
27+
canBeNegative: false,
28+
canBeZero: true,
29+
get extraValues() {
30+
return {
31+
min: 0,
32+
max: map.zoom
33+
};
34+
}
35+
},
36+
'map-top-left-easting': {
37+
type: 'range',
38+
valueType: 'integer',
39+
canBeNegative: true,
40+
canBeZero: true,
41+
get values() {
42+
return [Math.trunc(map.extent.topLeft.pcrs.horizontal)];
43+
}
44+
},
45+
'map-top-left-northing': {
46+
type: 'range',
47+
valueType: 'integer',
48+
canBeNegative: true,
49+
canBeZero: true,
50+
get values() {
51+
return [Math.trunc(map.extent.topLeft.pcrs.vertical)];
52+
}
53+
},
54+
'map-bottom-right-easting': {
55+
type: 'range',
56+
valueType: 'integer',
57+
canBeNegative: true,
58+
canBeZero: true,
59+
get values() {
60+
return [Math.trunc(map.extent.bottomRight.pcrs.horizontal)];
61+
}
62+
},
63+
'map-bottom-right-northing': {
64+
type: 'range',
65+
valueType: 'integer',
66+
canBeNegative: true,
67+
canBeZero: true,
68+
get values() {
69+
return [Math.trunc(map.extent.bottomRight.pcrs.vertical)];
70+
}
71+
},
72+
'prefers-color-scheme': {
73+
type: 'discrete',
74+
get values() {
75+
return [
76+
window.matchMedia('(prefers-color-scheme: dark)').matches
77+
? 'dark'
78+
: 'light'
79+
];
80+
}
81+
},
82+
'prefers-map-content': {
83+
type: 'discrete',
84+
get values() {
85+
return M.options.contentPreference;
86+
}
87+
}
88+
};
89+
90+
const solveUnknownFeature = (featureNode) => {
91+
let feature = featureNode.feature;
92+
let queryValue = featureNode.value.value;
93+
94+
if (feature === 'prefers-lang') {
95+
return features['prefers-lang'].values.includes(queryValue).toString();
96+
} else if (
97+
feature === 'map-zoom' ||
98+
feature === 'map-top-left-easting' ||
99+
feature === 'map-top-left-northing' ||
100+
feature === 'map-bottom-right-easting' ||
101+
feature === 'map-bottom-right-northing'
102+
) {
103+
return solveRangeFeature(featureNode);
104+
} else if (feature === 'map-projection') {
105+
return features['map-projection'].values
106+
.some((p) => p === queryValue)
107+
.toString();
108+
} else if (feature === 'prefers-color-scheme') {
109+
return features['prefers-color-scheme'].values
110+
.some((s) => s === queryValue)
111+
.toString();
112+
} else if (feature === 'prefers-map-content') {
113+
return features[feature].values
114+
.some((pref) => pref === queryValue)
115+
.toString();
116+
}
117+
return 'false';
118+
};
119+
let matches =
120+
solveMediaQueryList(parsedQuery, {
121+
features,
122+
solveUnknownFeature
123+
}) === 'true'
124+
? true
125+
: false;
126+
127+
function solveRangeFeature(featureNode) {
128+
const { context, feature, value, op } = featureNode;
129+
130+
if (!feature.startsWith('map-')) {
131+
return 'unknown';
132+
}
133+
134+
const currentValue = getMapFeatureValue(feature);
135+
136+
if (currentValue === undefined) {
137+
return 'unknown';
138+
}
139+
140+
if (context === 'value') {
141+
// Plain case: <mf-name>: <mf-value>
142+
// Example: (map-zoom: 15)
143+
return currentValue === value.value ? 'true' : 'false';
144+
}
145+
146+
if (context === 'range') {
147+
// Range case: <mf-name> <mf-comparison> <mf-value>
148+
// Example: (0 <= map-zoom < 15)
149+
switch (op) {
150+
case '<':
151+
return currentValue < value.value ? 'true' : 'false';
152+
case '<=':
153+
return currentValue <= value.value ? 'true' : 'false';
154+
case '>':
155+
return currentValue > value.value ? 'true' : 'false';
156+
case '>=':
157+
return currentValue >= value.value ? 'true' : 'false';
158+
case '=':
159+
return currentValue === value.value ? 'true' : 'false';
160+
default:
161+
return 'unknown';
162+
}
163+
}
164+
165+
return 'unknown'; // If the context is neither "value" nor "range"
166+
}
167+
168+
function getMapFeatureValue(feature) {
169+
switch (feature) {
170+
case 'map-zoom':
171+
return map.zoom;
172+
case 'map-top-left-easting':
173+
return Math.trunc(map.extent.topLeft.pcrs.horizontal);
174+
case 'map-top-left-northing':
175+
return Math.trunc(map.extent.topLeft.pcrs.vertical);
176+
case 'map-bottom-right-easting':
177+
return Math.trunc(map.extent.bottomRight.pcrs.horizontal);
178+
case 'map-bottom-right-northing':
179+
return Math.trunc(map.extent.bottomRight.pcrs.vertical);
180+
default:
181+
return undefined; // Unsupported or unknown feature
182+
}
183+
}
184+
185+
// Make mediaQueryList an EventTarget for dispatching events
186+
const mediaQueryList = Object.assign(new EventTarget(), {
187+
matches,
188+
media: query,
189+
listeners: [],
190+
// this is a client facing api
191+
addEventListener(event, listener) {
192+
if (event === 'change') {
193+
this.listeners.push(listener);
194+
195+
// Start observing properties only if there is at least one listener
196+
if (this.listeners.length !== 0) {
197+
observeProperties();
198+
}
199+
EventTarget.prototype.addEventListener.call(this, event, listener);
200+
}
201+
},
202+
203+
// this is a client facing api
204+
removeEventListener(event, listener) {
205+
if (event === 'change') {
206+
this.listeners = this.listeners.filter((l) => l !== listener);
207+
208+
// Stop observing if there are no more listeners
209+
if (this.listeners.length === 0) {
210+
stopObserving();
211+
}
212+
EventTarget.prototype.removeEventListener.call(this, event, listener);
213+
}
214+
}
215+
});
216+
217+
const observeProperties = () => {
218+
const notifyIfChanged = () => {
219+
const newMatches =
220+
solveMediaQueryList(parsedQuery, {
221+
features,
222+
solveUnknownFeature
223+
}) === 'true'
224+
? true
225+
: false;
226+
if (newMatches !== mediaQueryList.matches) {
227+
mediaQueryList.matches = newMatches;
228+
229+
// Dispatch a "change" event to notify listeners of the update
230+
mediaQueryList.dispatchEvent(new Event('change'));
231+
}
232+
};
233+
notifyIfChanged.bind(this);
234+
// Subscribe to internal events for changes in projection, zoom, and extent
235+
this.addEventListener('map-projectionchange', notifyIfChanged);
236+
this.addEventListener('map-moveend', notifyIfChanged);
237+
const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
238+
colorSchemeQuery.addEventListener('change', notifyIfChanged);
239+
240+
// Stop observing function
241+
stopObserving = () => {
242+
this.removeEventListener('map-projectionchange', notifyIfChanged);
243+
this.removeEventListener('map-moveend', notifyIfChanged);
244+
colorSchemeQuery.removeEventListener('change', notifyIfChanged);
245+
};
246+
};
247+
248+
let stopObserving; // Declare here so it can be assigned within observeProperties
249+
250+
return mediaQueryList;
251+
};

0 commit comments

Comments
 (0)