diff --git a/docs/api/mapml-viewer-api.mdx b/docs/api/mapml-viewer-api.mdx index 2faa756ae..7d2d7c926 100644 --- a/docs/api/mapml-viewer-api.mdx +++ b/docs/api/mapml-viewer-api.mdx @@ -222,6 +222,7 @@ let zoom = map.zoom; | [defineCustomProjection(options)](#definecustomprojectionoptions) | Define a custom projection for use by the page. | | [zoomTo(lat, lon, zoom)](#zoomtolat-lon-zoom) | Fly or pan the map to a (new) location and zoom level.| | [geojson2mapml(json, options)](#zoomtolat-lon-zoom) | Add a GeoJSON Layer to the map. | +| [matchMedia(mediaQueryString)](#matchmediamediaquerystring) | Returns a [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList)-like object. ### back() @@ -358,6 +359,32 @@ Check out [this application](https://maps4html.org/experiments/api/custom-map-ui --- +### matchMedia(mediaQueryString) + +While not strictly 'media' features, some dynamic map properties can be combined in queries with standard media features, for example the 'prefers-color-scheme' feature, +to enable a map container / media-query-like interface. + +`matchMedia(mediaQueryString)` returns a [MediaQueryList-like object](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList). +The `matches` boolean-valued property of the object can be used for an immediate determination of whether the map meets the queried feature conditions. To react to changes in +the map state / media conditions, use MediaQueryList.addEventListener('change', callbackFn) to add an event listener for `change` events that are triggered by changes in the +state of the queried map properties (projection, zoom, extent); any change to the map that results in a change in state of the [MediaQueryListEvent `matches` boolean property](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event)triggers the `change` event and calls the callbackFn. + +## Supported map 'media' query features + +| Feature name | Description | +|------------------|-------------| +| map-zoom | Range of integers Used to evaluate if map-zoom is of a certain value or within a range | +| map-projection | Discrete string values - known values include `OSMTILE`, `CBMTILE`, `WGS84`, `APSTILE`. Can be extended with [custom projections](#definecustomprojectionoptions). | +| map-top-left-easting | Range of integers - **Decimal values are not supported.** | +| map-top-left-northing | Range of integers - **Decimal values are not supported.** | +| map-bottom-right-easting | Range of integers - **Decimal values are not supported.** | +| map-bottom-right-northing | Range of integers - **Decimal values are not supported.** | +| 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) | +| prefers-color-scheme | Discrete string values - supported values are `light` and `dark` | +| prefers-lang | 2-character language code returned by `navigator.language`, based on user's browser display language setting | + +--- + ## Events | Event name | Description | @@ -617,7 +644,7 @@ let output = map.geojson2mapml(json); Example Custom Projection - + + + + + + + + + + + + +``` --- diff --git a/docs/assets/img/render-mapml.png b/docs/assets/img/render-mapml.png index 8281696f0..88d8b9fe4 100644 Binary files a/docs/assets/img/render-mapml.png and b/docs/assets/img/render-mapml.png differ diff --git a/docs/elements/layer.md b/docs/elements/layer.md index 982a84593..80410c8b6 100644 --- a/docs/elements/layer.md +++ b/docs/elements/layer.md @@ -113,4 +113,4 @@ The following example sets the initial `opacity` for a ``. --- > - [Edit this page on **Github**](https://github.com/Maps4HTML/web-map-doc/edit/main/docs/elements/layer.md) -> - [Chat with us on **Gitter**](https://gitter.im/Maps4HTML/chat) \ No newline at end of file +> - [Chat with us on **Gitter**](https://gitter.im/Maps4HTML/chat) diff --git a/docs/extension/features.md b/docs/extension/features.md index 8e56c206c..5015ab215 100644 --- a/docs/extension/features.md +++ b/docs/extension/features.md @@ -37,6 +37,22 @@ context menu is projected coordinates (PCRS), and that for copying locations is by default geodetic (GCRS). When changed to another through the extension user interface, the selected cs will be used for subsequent copy operations. +### Select map content preferences + +By default, no preference is expressed by the user as to what their preferred +content type for maps may be. Some users may prefer focusable feature +data in the map where possible; others may opt for image-based or tiled-image +based map content. Others may wish to experience only textual feature data in +the form of an accessibility technology (AT)-friendly table that is by default +sorted in ascending order of distance from map center, but that may be +sorted by different column headings selected by the user. To establish a set of +preferences, select the applicable combination of entries from the "Content Preferences" +list (select more than one entry by holding Ctrl or Shift while selecting). + +Such preferences may be honoured by a map author via inclusion in [map 'media' queries](../api/mapml-viewer-api#matchmediamediaquerystring). + +![Content Preferences](../assets/img/render-mapml.png) + ## Requirements [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-) diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/api/mapml-viewer-api.mdx b/i18n/fr/docusaurus-plugin-content-docs/current/api/mapml-viewer-api.mdx index 10b29efea..cae508c69 100644 --- a/i18n/fr/docusaurus-plugin-content-docs/current/api/mapml-viewer-api.mdx +++ b/i18n/fr/docusaurus-plugin-content-docs/current/api/mapml-viewer-api.mdx @@ -225,6 +225,7 @@ let zoom = map.zoom; | [defineCustomProjection(options)](#definecustomprojectionoptions) | Définir une projection personnalisée à utiliser par la page. | | [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.| | [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 `` contenant un ou plusieurs éléments ``. | +| [matchMedia(mediaQueryString)](#matchmediamediaquerystring) | Renvoie un objet similaire à [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList). | ### back() @@ -360,6 +361,28 @@ Jetez un coup d’œil à [cette application](https://maps4html.org/experiments/ | `properties` | \ | _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. \ - Fonction qui accepte un argument – l’objet GeoJSON feature – et qui doit retourner un HTMLElement qui devient l’unique élément-enfant de \. \ - Chaîne qui sera analysée syntaxiquement et utilisée comme unique élément-enfant de `` avec toutes les caractéristiques. \ - Élément qui servira d’unique élément- enfant de `` avec toutes les caractéristiques. Voir la section [utilisation des options de base](#utilisation-des-options-de-base) pour un exemple.| | `geometryFunction` | \ | La géométrie _MapML reproduit la valeur géométrique GeoJSON_ | \ Fonction pour modifier les [descendants générés](https://maps4html.org/web-map-doc/docs/elements/geometry/#child-elements) de `` 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 `` 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 `` 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 ``. Voir la section [Utilisation des options de base](#utilisation-des-options-de-base) pour un exemple. | +--- + +### matchMedia(mediaQueryString) + +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. + +`matchMedia(mediaQueryString)` renvoie un [objet similaire à MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList). 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. 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). 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`. + +## Fonctionnalités de requête "média" prises en charge pour la carte + +| Nom de la fonctionnalité | Description | +|-----------------------------|-----------------------------------------------------------------------------| +| map-zoom | Gamme d'entiers utilisée pour évaluer si `map-zoom` a une certaine valeur ou se situe dans une plage | +| 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). | +| map-top-left-easting | Gamme d'entiers - **Les valeurs décimales ne sont pas prises en charge.** | +| map-top-left-northing | Gamme d'entiers - **Les valeurs décimales ne sont pas prises en charge.** | +| map-bottom-right-easting | Gamme d'entiers - **Les valeurs décimales ne sont pas prises en charge.** | +| map-bottom-right-northing | Gamme d'entiers - **Les valeurs décimales ne sont pas prises en charge.** | +| 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). | +| prefers-color-scheme | Valeurs discrètes de chaîne - les valeurs prises en charge sont `light` et `dark`. | +| 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 | + --- ## Événements @@ -619,7 +642,7 @@ let output = map.geojson2mapml(json); Exemple d'un projection personnalisée - + + + + + + + + + + + + +``` + --- ## Spécifications diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/assets/img/render-mapml.png b/i18n/fr/docusaurus-plugin-content-docs/current/assets/img/render-mapml.png index 8281696f0..ecbb5b9e7 100644 Binary files a/i18n/fr/docusaurus-plugin-content-docs/current/assets/img/render-mapml.png and b/i18n/fr/docusaurus-plugin-content-docs/current/assets/img/render-mapml.png differ diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/extension/features.md b/i18n/fr/docusaurus-plugin-content-docs/current/extension/features.md index b18402b84..881a4577d 100644 --- a/i18n/fr/docusaurus-plugin-content-docs/current/extension/features.md +++ b/i18n/fr/docusaurus-plugin-content-docs/current/extension/features.md @@ -38,6 +38,16 @@ et celui pour copier les endroits est par défaut géodésique (GCRS). Lorsqu'il changé par l'interface utilisateur de l'extension, le système de coordonnées sélectionné sera utilisé pour les opérations de copie ultérieures. +### Sélectionner les préférences de contenu de la carte + +Par défaut, aucun utilisateur n'exprime de préférence quant au type de contenu de carte qu'il privilégie. 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. 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. Ce tableau peut également être trié par différentes en-têtes de colonnes sélectionnées par l'utilisateur. + +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). + +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). + +![Préférences de Contenu](../assets/img/render-mapml.png) + ## Exigences [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-)