Skip to content

Commit 4169109

Browse files
prushforprushfor
prushfor
authored and
prushfor
committed
Get rid of matchMedia from media-attribute branch
could be trouble with the render-map.png tbd
1 parent a3bd974 commit 4169109

File tree

4 files changed

+2
-232
lines changed

4 files changed

+2
-232
lines changed

‎docs/api/mapml-viewer-api.mdx

+1-107
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,6 @@ let zoom = map.zoom;
222222
| [defineCustomProjection(options)](#definecustomprojectionoptions) | Define a custom projection for use by the page. |
223223
| [zoomTo(lat, lon, zoom)](#zoomtolat-lon-zoom) | Fly or pan the map to a (new) location and zoom level.|
224224
| [geojson2mapml(json, options)](#zoomtolat-lon-zoom) | Add a GeoJSON Layer to the map. |
225-
| [matchMedia(mediaQueryString)](#matchmediamediaquerystring) | Returns a [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList)-like object.
226225

227226

228227
### back()
@@ -359,38 +358,6 @@ Check out [this application](https://maps4html.org/experiments/api/custom-map-ui
359358

360359
---
361360

362-
### matchMedia(mediaQueryString)
363-
364-
While not strictly 'media' features, some dynamic map properties can be combined in queries
365-
with standard media features, for example the 'prefers-color-scheme' feature,
366-
to enable a map container / media-query-like interface.
367-
368-
`matchMedia(mediaQueryString)` returns a [MediaQueryList-like object](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList).
369-
The `matches` boolean-valued property of the object can be used for an immediate
370-
determination of whether the map meets the queried feature conditions. To react to changes in
371-
the map state / media conditions, use MediaQueryList.addEventListener('change', callbackFn)
372-
to add an event listener for `change` events that are triggered by changes in the
373-
state of the queried map properties (projection, zoom, extent); any change to the
374-
map that results in a change in state of the
375-
[MediaQueryListEvent `matches` boolean property](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event)
376-
triggers the `change` event and calls the callbackFn.
377-
378-
## Supported map 'media' query features
379-
380-
| Feature name | Description |
381-
|------------------|-------------|
382-
| map-zoom | Range of integers Used to evaluate if map-zoom is of a certain value or within a range |
383-
| map-projection | Discrete string values - known values include `OSMTILE`, `CBMTILE`, `WGS84`, `APSTILE`. Can be extended with [custom projections](#definecustomprojectionoptions). |
384-
| map-top-left-easting | Range of integers - **Decimal values are not supported.** |
385-
| map-top-left-northing | Range of integers - **Decimal values are not supported.** |
386-
| map-bottom-right-easting | Range of integers - **Decimal values are not supported.** |
387-
| map-bottom-right-northing | Range of integers - **Decimal values are not supported.** |
388-
| prefers-map-content | Discrete string values - supported values include: `image`, `tile`, `feature`, `table`. Preferences can be established via multi-select in the [MapML browser extension](../extension/features#select-map-content-preferences) |
389-
| prefers-color-scheme | Discrete string values - supported values are `light` and `dark` |
390-
| prefers-lang | 2-character language code returned by `navigator.language`, based on user's browser display language setting |
391-
392-
---
393-
394361
## Events
395362

396363
| Event name | Description |
@@ -650,7 +617,7 @@ let output = map.geojson2mapml(json);
650617
<meta charset="utf-8">
651618
<meta name="viewport" content="width=device-width, initial-scale=1">
652619
<title>Example Custom Projection</title>
653-
<script type="module" src="./mapml.js"></script>
620+
<script type="module" src="web-map/mapml.js"></script>
654621
<script type="module">
655622
let customProjectionDefinition = `{
656623
"projection": "ATLAS_POLAR_MAP",
@@ -682,79 +649,6 @@ let output = map.geojson2mapml(json);
682649
</html>
683650
```
684651

685-
### matchMedia
686-
687-
```html
688-
<!doctype html>
689-
<html lang="en">
690-
<head>
691-
<meta charset="utf-8">
692-
<title>Example map media query</title>
693-
// adjust the path to where you can find the distributed mapml.js artifact
694-
<script type="module" src="./mapml.js"></script>
695-
<script>
696-
document.addEventListener('DOMContentLoaded', () => {
697-
const map = document.querySelector('mapml-viewer');
698-
map.whenReady().then(() => {
699-
const extent = map.extent;
700-
701-
const topLeftEasting = Math.trunc(extent.topLeft.pcrs.horizontal);
702-
const topLeftNorthing = Math.trunc(extent.topLeft.pcrs.vertical);
703-
const bottomRightEasting = Math.trunc(extent.bottomRight.pcrs.horizontal);
704-
const bottomRightNorthing = Math.trunc(extent.bottomRight.pcrs.vertical);
705-
706-
// Format the media query string to detect overlap:
707-
// (xminm < xmaxq) and (xmaxm > xminq) and (yminm < ymaxq) and (ymaxm > yminq)
708-
const query = `(map-projection: OSMTILE) and (7 < map-zoom < 14) and (map-top-left-easting < ${bottomRightEasting}) and (map-bottom-right-easting > ${topLeftEasting}) and (map-bottom-right-northing < ${topLeftNorthing}) and (map-top-left-northing > ${bottomRightNorthing})`;
709-
710-
const matcher = map.matchMedia(query);
711-
712-
// create a layer to visually represent the query as the map moves
713-
const f = `<map-layer checked label="test media query"><map-meta name="projection" content="OSMTILE"></map-meta>
714-
<map-meta name="cs" content="pcrs"></map-meta><map-feature><map-properties>${query}</map-properties>
715-
<map-geometry><map-polygon><map-coordinates>${topLeftEasting} ${topLeftNorthing}
716-
${bottomRightEasting} ${topLeftNorthing} ${bottomRightEasting} ${bottomRightNorthing} ${topLeftEasting} ${bottomRightNorthing}
717-
${topLeftEasting} ${topLeftNorthing}</map-coordinates</map-polygon></map-geometry></map-feature></map-layer>`;
718-
719-
const parser = new DOMParser();
720-
const layer = parser
721-
.parseFromString(f, 'text/html')
722-
.querySelector('map-layer');
723-
map.appendChild(layer);
724-
const changeDisplayLayer = () => {
725-
if (matcher.matches) {
726-
layer.checked = true;
727-
layer.hidden = false;
728-
alert('Feature overlaps the map');
729-
} else {
730-
layer.checked = false;
731-
layer.hidden = true;
732-
alert('Feature does not overlap the map');
733-
}
734-
};
735-
changeDisplayLayer();
736-
matcher.addEventListener('change', changeDisplayLayer);
737-
});
738-
});
739-
</script>
740-
</head>
741-
<body>
742-
<mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls>
743-
<map-layer label="OpenStreetMap" checked>
744-
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA"
745-
href="https://www.openstreetmap.org/copyright"></map-link>
746-
<map-extent units="OSMTILE" checked hidden>
747-
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
748-
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
749-
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
750-
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
751-
</map-extent>
752-
</map-layer>
753-
</mapml-viewer>
754-
</body>
755-
</html>
756-
```
757-
758652
---
759653

760654
## Specifications

‎docs/extension/features.md

-16
Original file line numberDiff line numberDiff line change
@@ -37,22 +37,6 @@ context menu is projected coordinates (PCRS), and that for copying locations is
3737
by default geodetic (GCRS). When changed to another through the extension
3838
user interface, the selected cs will be used for subsequent copy operations.
3939

40-
### Select map content preferences
41-
42-
By default, no preference is expressed by the user as to what their preferred
43-
content type for maps may be. Some users may prefer focusable feature
44-
data in the map where possible; others may opt for image-based or tiled-image
45-
based map content. Others may wish to experience only textual feature data in
46-
the form of an accessibility technology (AT)-friendly table that is by default
47-
sorted in ascending order of distance from map center, but that may be
48-
sorted by different column headings selected by the user. To establish a set of
49-
preferences, select the applicable combination of entries from the "Content Preferences"
50-
list (select more than one entry by holding Ctrl or Shift while selecting).
51-
52-
Such preferences may be honoured by a map author via inclusion in [map 'media' queries](../api/mapml-viewer-api#matchmediamediaquerystring).
53-
54-
![Content Preferences](../assets/img/render-mapml.png)
55-
5640
## Requirements
5741

5842
[Report problems with these requirements on GitHub](https://github.com/Maps4HTML/HTML-Map-Element-UseCases-Requirements/issues/new?title=-SUMMARIZE+THE+PROBLEM-&body=-DESCRIBE+THE+PROBLEM-)

‎i18n/fr/docusaurus-plugin-content-docs/current/api/mapml-viewer-api.mdx

+1-96
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,6 @@ let zoom = map.zoom;
225225
| [defineCustomProjection(options)](#definecustomprojectionoptions) | Définir une projection personnalisée à utiliser par la page. |
226226
| [zoomTo(lat, lon, zoom)](#zoomtolat-lon-zoom) | Survole la carte ou effectue un mouvement panoramique vers un (nouvel) emplacement et à un autre niveau de zoom.|
227227
| [geojson2mapml(json, options)](#zoomtolat-lon-zoom) | Convertit une caractéristique GeoJSON ou une chaîne ou un objet de collection de caractéristiques en élément MapML `<map-layer>` contenant un ou plusieurs éléments `<map-feature>`. |
228-
| [matchMedia(mediaQueryString)](#matchmediamediaquerystring) | Renvoie un objet similaire à [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList). |
229228

230229

231230
### back()
@@ -361,31 +360,6 @@ Jetez un coup d’œil à [cette application](https://maps4html.org/experiments/
361360
| <span id="option-properties">`properties`</span> | \<Function \| String \| HTMLElement\> | _Les propriétés seront mappées à un [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) HTML._ | Précise la façon dont les propriétés sont mappées. \<Function\> - Fonction qui accepte un argument – l’objet GeoJSON feature – et qui doit retourner un HTMLElement qui devient l’unique élément-enfant de \<properties\>. \<String\> - Chaîne qui sera analysée syntaxiquement et utilisée comme unique élément-enfant de `<properties>` avec toutes les caractéristiques. \<HTMLElement\> - Élément qui servira d’unique élément- enfant de `<properties>` avec toutes les caractéristiques. Voir la section [utilisation des options de base](#utilisation-des-options-de-base) pour un exemple.|
362361
| `geometryFunction` | \<Function\> | La géométrie _MapML reproduit la valeur géométrique GeoJSON_ | \<Function\> Fonction pour modifier les [descendants générés](https://maps4html.org/web-map-doc/docs/elements/geometry/#child-elements) de `<map-geometry>` qui peut ajouter des classes, [hyperlinks](https://maps4html.org/web-map-doc/docs/elements/map-a/) et des [spans](https://maps4html.org/web-map-doc/docs/elements/span/) à l’instance. Un élément `<map-geometry>` simple est créé par défaut. La fonction accepte deux arguments : l’[élément-enfant généré](https://maps4html.org/web-map-doc/docs/elements/geometry/#child-elements) de `<map-geometry>` et [l’objet de la caractéristique JSON](https://www.rfc-editor.org/rfc/rfc7946#section-3.2) pour retourner un élément-enfant modifié de `<map-geometry>`. Voir la section [Utilisation des options de base](#utilisation-des-options-de-base) pour un exemple. |
363362

364-
---
365-
366-
### matchMedia(mediaQueryString)
367-
368-
Bien que cela ne soit pas strictement des fonctionnalités "média", certaines propriétés dynamiques de la carte peuvent être combinées dans des requêtes avec des fonctionnalités média standard, comme la fonctionnalité 'prefers-color-scheme', pour permettre une interface de type conteneur de carte / requête média.
369-
370-
`matchMedia(mediaQueryString)` renvoie un [objet similaire à MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList).
371-
La propriété booléenne `matches` de l'objet peut être utilisée pour déterminer immédiatement si la carte répond aux conditions des fonctionnalités requises.
372-
Pour réagir aux changements dans l'état de la carte ou des conditions média, utilisez `MediaQueryList.addEventListener('change', callbackFn)` pour ajouter un écouteur d'événements aux événements `change` déclenchés par les modifications de l'état des propriétés de la carte interrogées (projection, zoom, étendue).
373-
Tout changement de la carte qui entraîne une modification de l'état de la propriété booléenne `matches` de [MediaQueryListEvent](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event) déclenche l'événement `change` et appelle la fonction `callbackFn`.
374-
375-
## Fonctionnalités de requête "média" prises en charge pour la carte
376-
377-
| Nom de la fonctionnalité | Description |
378-
|-----------------------------|-----------------------------------------------------------------------------|
379-
| map-zoom | Gamme d'entiers utilisée pour évaluer si `map-zoom` a une certaine valeur ou se situe dans une plage |
380-
| map-projection | Valeurs discrètes de chaîne - les valeurs connues incluent `OSMTILE`, `CBMTILE`, `WGS84`, `APSTILE`. Peut être étendu avec des [projections personnalisées](#definecustomprojectionoptions). |
381-
| map-top-left-easting | Gamme d'entiers - **Les valeurs décimales ne sont pas prises en charge.** |
382-
| map-top-left-northing | Gamme d'entiers - **Les valeurs décimales ne sont pas prises en charge.** |
383-
| map-bottom-right-easting | Gamme d'entiers - **Les valeurs décimales ne sont pas prises en charge.** |
384-
| map-bottom-right-northing | Gamme d'entiers - **Les valeurs décimales ne sont pas prises en charge.** |
385-
| prefers-map-content | Valeurs discrètes de chaîne - les valeurs prises en charge incluent : `image`, `tile`, `feature`, `table`. Les préférences peuvent être définies via une multi-sélection dans [l'extension navigateur MapML](../extension/features#sélectionner-les-préférences-de-contenu-de-la-carte). |
386-
| prefers-color-scheme | Valeurs discrètes de chaîne - les valeurs prises en charge sont `light` et `dark`. |
387-
| prefers-lang | Code de langue à 2 caractères renvoyé par `navigator.language`, basé sur le paramètre de langue d'affichage du navigateur de l'utilisateur |
388-
389363
---
390364
## Événements
391365

@@ -645,7 +619,7 @@ let output = map.geojson2mapml(json);
645619
<meta charset="utf-8">
646620
<meta name="viewport" content="width=device-width, initial-scale=1">
647621
<title>Exemple d'un projection personnalisée</title>
648-
<script type="module" src="./mapml.js"></script>
622+
<script type="module" src="web-map/mapml.js"></script>
649623
<script type="module">
650624
let customProjectionDefinition = `{
651625
"projection": "ATLAS_POLAR_MAP",
@@ -676,75 +650,6 @@ let output = map.geojson2mapml(json);
676650
</body>
677651
</html>
678652
```
679-
680-
### matchMedia
681-
682-
```html
683-
<!doctype html>
684-
<html lang="fr">
685-
<head>
686-
<meta charset="utf-8">
687-
<title>Exemple de requête média pour une carte</title>
688-
// ajustez le chemin vers l'endroit où se trouve l'artéfact distribué mapml.js
689-
<script type="module" src="./mapml.js"></script>
690-
<script>
691-
document.addEventListener('DOMContentLoaded', () => {
692-
const map = document.querySelector('mapml-viewer');
693-
map.whenReady().then(() => {
694-
const extent = map.extent;
695-
const topLeftEasting = Math.trunc(extent.topLeft.pcrs.horizontal);
696-
const topLeftNorthing = Math.trunc(extent.topLeft.pcrs.vertical);
697-
const bottomRightEasting = Math.trunc(extent.bottomRight.pcrs.horizontal);
698-
const bottomRightNorthing = Math.trunc(extent.bottomRight.pcrs.vertical);
699-
// Formater la chaîne de requête média pour détecter les chevauchements :
700-
// (xminm < xmaxq) et (xmaxm > xminq) et (yminm < ymaxq) et (ymaxm > yminq)
701-
const query = `(map-projection: OSMTILE) and (7 < map-zoom < 14) and (map-top-left-easting < ${bottomRightEasting}) and (map-bottom-right-easting > ${topLeftEasting}) and (map-bottom-right-northing < ${topLeftNorthing}) and (map-top-left-northing > ${bottomRightNorthing})`;
702-
const matcher = map.matchMedia(query);
703-
// créer une couche pour représenter visuellement la requête lorsque la carte se déplace
704-
const f = `<map-layer checked label="test media query"><map-meta name="projection" content="OSMTILE"></map-meta>
705-
<map-meta name="cs" content="pcrs"></map-meta><map-feature><map-properties>${query}</map-properties>
706-
<map-geometry><map-polygon><map-coordinates>${topLeftEasting} ${topLeftNorthing}
707-
${bottomRightEasting} ${topLeftNorthing} ${bottomRightEasting} ${bottomRightNorthing} ${topLeftEasting} ${bottomRightNorthing}
708-
${topLeftEasting} ${topLeftNorthing}</map-coordinates</map-polygon></map-geometry></map-feature></map-layer>`;
709-
const parser = new DOMParser();
710-
const layer = parser
711-
.parseFromString(f, 'text/html')
712-
.querySelector('map-layer');
713-
map.appendChild(layer);
714-
const changeDisplayLayer = () => {
715-
if (matcher.matches) {
716-
layer.checked = true;
717-
layer.hidden = false;
718-
alert('La fonctionnalité chevauche la carte');
719-
} else {
720-
layer.checked = false;
721-
layer.hidden = true;
722-
alert('La fonctionnalité ne chevauche pas la carte');
723-
}
724-
};
725-
changeDisplayLayer();
726-
matcher.addEventListener('change', changeDisplayLayer);
727-
});
728-
});
729-
</script>
730-
</head>
731-
<body>
732-
<mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls>
733-
<map-layer label="OpenStreetMap" checked>
734-
<map-link rel="license" title="© Contributeurs OpenStreetMap CC BY-SA"
735-
href="https://www.openstreetmap.org/copyright"></map-link>
736-
<map-extent units="OSMTILE" checked hidden>
737-
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
738-
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
739-
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
740-
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
741-
</map-extent>
742-
</map-layer>
743-
</mapml-viewer>
744-
</body>
745-
</html>
746-
```
747-
748653
---
749654

750655
## Spécifications

‎i18n/fr/docusaurus-plugin-content-docs/current/extension/features.md

-13
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,6 @@ et celui pour copier les endroits est par défaut géodésique (GCRS). Lorsqu'il
3838
changé par l'interface utilisateur de l'extension, le système de coordonnées
3939
sélectionné sera utilisé pour les opérations de copie ultérieures.
4040

41-
### Sélectionner les préférences de contenu de la carte
42-
43-
Par défaut, aucun utilisateur n'exprime de préférence quant au type de contenu de carte qu'il privilégie.
44-
Certains utilisateurs peuvent préférer des données de fonctionnalités focalisables dans la carte lorsque cela est possible ; d'autres peuvent opter pour un contenu de carte basé sur des images ou des images en mosaïque.
45-
D'autres encore peuvent souhaiter accéder uniquement à des données textuelles de fonctionnalités sous la forme d'un tableau adapté aux technologies d'assistance (AT) et trié par défaut dans l'ordre croissant de la distance depuis le centre de la carte.
46-
Ce tableau peut également être trié par différentes en-têtes de colonnes sélectionnées par l'utilisateur.
47-
48-
Pour établir un ensemble de préférences, sélectionnez la combinaison applicable d'entrées depuis la liste "Préférences de Contenu" (sélectionnez plus d'une entrée en maintenant Ctrl ou Shift tout en sélectionnant).
49-
50-
Ces préférences peuvent être prises en compte par un auteur de carte via une inclusion dans les [requêtes média de la carte](../api/mapml-viewer-api#matchmediamediaquerystring).
51-
52-
![Préférences de Contenu](../assets/img/render-mapml.png)
53-
5441
## Exigences
5542

5643
[Signaler les problèmes liés à ces exigences sur GitHub](https://github.com/Maps4HTML/HTML-Map-Element-UseCases-Requirements/issues/new?title=-SUMMARIZE+THE+PROBLEM-&body=-DESCRIBE+THE+PROBLEM-)

0 commit comments

Comments
 (0)