Skip to content

Commit 97e4cf3

Browse files
prushforprushforth
prushfor
authored and
prushforth
committed
Create media attribute docs
Add map-link disabled attribute description in en and fr Update description of map-layer media attribute in en and fr Deprecate zoomin, zoomout links Add map-style-api.md in fr and en, add to sidebar.js Add node-version script to package.json Change docusaurus config to only warn on broken links
1 parent b38c371 commit 97e4cf3

File tree

16 files changed

+7039
-3640
lines changed

16 files changed

+7039
-3640
lines changed

‎docs/api/layer-api.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,10 @@ To get the `<map-layer>`'s opacity value:
124124
let layer = document.querySelector('map-layer');
125125
let opacity = layer.opacity;
126126
```
127+
---
128+
### media
129+
130+
Reflects the [media](../elements/layer#media) attribute of the `<layer->` element.
127131

128132
### extent
129133

‎docs/api/map-link-api.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,21 @@ title: HTMLLinkElement
44
slug: /api/map-link-api
55
---
66

7+
# HTMLLinkElement
8+
9+
The `<map-link>` element is intended to implement an extension of the HTML `<link>`
10+
element and `HTMLLinkElement` API. This document reflects proposed changes to that
11+
API and is a work in progress.
12+
13+
14+
## Properties
15+
16+
### media
17+
18+
Reflects the [media](../elements/link#media) attribute of the `<map-link>` element.
19+
20+
---
21+
722
This document is copied from the old "Custom Rendering API" page, and is under
823
construction. It will eventually describe the API of the map-link custom element;
924
the "Custom Rendering API" is currently sourced from the map-link custom element,

‎docs/api/map-style-api.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
id: map-style-api
3+
title: "HTMLStyleElement"
4+
slug: /api/map-style-api
5+
---
6+
7+
# HTMLStyleElement
8+
9+
The `<map-style>` element is an extension of the HTML `<style>` element and `HTMLStyleElement`
10+
API for map styles. This document reflects proposed changes to that API, and is a work in progress.
11+
12+
## Properties
13+
14+
### media
15+
16+
Reflects the [media](../elements/style#media) attribute of the `<map-style>` element. Map media queries can include map properties including: [projection](../../api/mapml-viewer-api#projection), [zoom](../../api/mapml-viewer-api#zoom),
17+
and [extent](../../api/mapml-viewer-api#extent).
18+
19+
## Specifications
20+
21+
| Specification |
22+
|--------------------------------------------------------------|
23+
| [HTMLStyleElement](https://github.com/Maps4HTML/MapML-Specification/issues/209) |
24+
25+
---
26+
27+
## Requirements
28+
29+
[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-)
30+
31+
<p><b><span class="requirement">requirement</span>
32+
<span class="enhancement">enhancement</span>
33+
<span class="impractical">impractical</span>
34+
<span class="undecided">undecided</span>
35+
<span class="discussion">under discussion</span></b></p>
36+
37+
| | Spec | Viewer | API |
38+
|:---------------------------------------------------------------------------------|:------: |:-----: |:---: |
39+
| [**Properties**](#properties) | none | partial| partial |
40+
| [**Methods**](#methods) | n/a | n/a | n/a|
41+
42+
43+
---
44+
45+
> - [Edit this page on **Github**](https://github.com/Maps4HTML/web-map-doc/edit/main/docs/api/map-style-api.md)
46+
> - [Chat with us on **Gitter**](https://gitter.im/Maps4HTML/chat)

‎docs/elements/layer.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,20 @@ and the fetched `<map-title>` element is used.
6363

6464
---
6565

66+
### `media`
67+
68+
The `media` attribute is used to express map media conditions under which the layer
69+
content should be used (if inline content is present), or loaded from the `src` URL,
70+
if that attribute is present. Map media conditions evaluate to `true` or `false`.
71+
A layer for which the map media condition evaluates to `false` is by default hidden.
72+
A layer for which the map media condition evaluates to `true` is added to the map
73+
according to its `checked` attribute, and is added to the layer control according
74+
to its `hidden` attribute.
75+
76+
Map media queries can include map properties as documented in the [matchMedia](../../api/mapml-viewer-api#matchmedia) API.
77+
78+
---
79+
6680
### `opacity`
6781

6882
The `opacity` attribute is used to set the initial opacity of the `<map-layer>` element.

‎docs/elements/link.md

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ defines several uses of existing and new `rel` keyword values.
3737
| `tile` | This link relation is used in conjunction with the `tref="..."` attribute to define a URL template that identifies native (server) tile resources. Can be used in conjunction with the `type="..."` attribute to indicate the media type of the remote resource, for example: `type="text/mapml"` tells the polyfill to parse and render the fetched resource as map feature content. This link relation is used with standard Web Map Tile Services (WMTS), and its non-standard equivalents. |
3838
| `image` | The `image` link relation is used similarly to the `tile` link relation, except it tells the polyfill that the remote resources to be fetched are images that will be trimmed (by the server) to exactly match the width and height of the map viewport. This link relation is used with standard Web Map Services (WMS) and its non-standard equivalents. |
3939
| `features` | The `features` link relation tells the polyfill to parse and render the fetched resource as map feature content. |
40-
| `zoomin` | The link `href` is followed automatically by the polyfill when the map is zoomed in by the user to a value greater than the maximimum value of the zoom range of the current layer. The referenced map layer resource replaces the current map layer. The polyfill does not represent this link as a user-visible affordance, it is followed automatically. If the remote resource does not contain a reciprocal `zoomout` link, the map state change is one-way i.e. the layer is permanently replaced. |
41-
| `zoomout` | The link `href` is followed automatically by the polyfill when the map is zoomed out by the user to a value less than the minimum value of the zoom range of the current layer. The referenced map layer resource replaces the current map layer. The polyfill does not represent this link as a user-visible affordance, it is followed automatically. If the remote resource does not contain a reciprocal `zoomin` link, the map state change is one-way i.e. the layer is permanently replaced. |
40+
| ~~`zoomin`~~ | Deprecated. Use the `map-zoom` [map media feature](#media) instead. |
41+
| ~~`zoomout`~~ | Deprecated. Use the `map-zoom` map media feature instead. |
4242
| `legend` | The `legend` link relation designates a link to metadata, typically an image, describing the symbology used by the current layer. Currently, the polyfill creates a hyperlink for the label of the layer in the layer control, which opens in a new browsing context. |
4343
| `query` | The `query` link relation is used in combination with the `tref="..."` attribute to establish a URL template that composes a map query URL based on user map gestures such as click or touch. These URLs are fetched and the response presented on top of the map as a popup. Such queries can return text/html or text/mapml responses. In the latter case, the response may contain more than one feature, in which case a 'paged' popup is generated, allowing the user to cycle through the features' individual metadata. |
4444
| `stylesheet` | The link imports a CSS or [pmtiles](../../user-guide/creating-styles) stylesheet from the `href` value. |
@@ -81,6 +81,19 @@ The `href` of a `<map-link>` must be a URL value of a resource that can be fetch
8181
The URL can be absolute or relative.
8282

8383
---
84+
### `disabled`
85+
86+
The read-write `disabled` boolean attribute works with `<map-link rel=stylesheet>` and
87+
`<map-link rel="tile | image | features | query">`. When set, it disables and
88+
unloads the stylesheet or map content as applicable. The read-only `disabled`
89+
attribute of the `<map-layer>` and `<map-extent>` elements is updated to reflect
90+
the new calculated visibility of the `<map-layer>` or `<map-extent>`. When the
91+
`disabled` attribute is removed, the linked CSS stylesheet or map content is loaded.
92+
If the layer and extent content that is loaded is visible, the `<map-layer>` or `<map-extent>`
93+
`disabled` attribute is removed accordingly.
94+
95+
---
96+
8497
### `hreflang`
8598

8699
Advisory [language designation](https://datatracker.ietf.org/doc/html/rfc5646) about remote resource.
@@ -130,6 +143,20 @@ Projection values [defined by the polyfill](../mapml-viewer#projection) include:
130143
| Permitted ARIA roles | No roles permitted. |
131144
| DOM Interface | [HTMLLinkElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement) |
132145

146+
---
147+
### `media`
148+
149+
The `media` attribute is used to express media conditions under which the linked
150+
content should be loaded from its `href` attribute. Media conditions evaluate to `true` or `false`.
151+
A map-link for which the media condition evaluates to `false` is not loaded / unloaded.
152+
Content linked via a map-link for which the media condition evaluates to `true`
153+
is loaded from its `href` attribute; when the condition subsequently evaluates to
154+
`false`, the content is unloaded.
155+
156+
Map media queries can include extended CSS map properties including:
157+
[projection](../../api/mapml-viewer-api#projection), [zoom](../../api/mapml-viewer-api#zoom),
158+
and [extent](../../api/mapml-viewer-api#extent).
159+
133160
---
134161

135162
## Examples

‎docs/elements/style.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,25 @@ slug: /elements/style/
66

77
The `<map-style>` element allows map authors to embed CSS into map layers. The CSS can be used to style the geometry of the layer using [`<map-span>`](../../elements/span/), and by setting the class attribute to the [child elements](../geometry/#child-elements) of the geometry.
88

9+
## Attributes
10+
11+
### `media`
12+
13+
The `media` attribute is used to express media conditions under which the contained
14+
styles should be applied. Media conditions evaluate to `true` or `false`. A map-style
15+
for which the media condition evaluates to `false` is not loaded / is removed. Styles
16+
contained in a `<map-style>` for which the media condition evaluates to `true`
17+
are applied; when the condition subsequently evaluates to `false`, the styles are removed.
18+
An invalid media condition evaluates to `false`.
19+
20+
Map media queries can include map properties including: [projection](../../api/mapml-viewer-api#projection), [zoom](../../api/mapml-viewer-api#zoom),
21+
and [extent](../../api/mapml-viewer-api#extent).
22+
23+
---
24+
925
:::note
1026

11-
All the Demo's on the documentation pages contain a "CSS" tab which adds the CSS using the `<map-style>` element dynamically.
27+
All the demo's on the documentation pages contain a "CSS" tab which adds the CSS using the `<map-style>` element dynamically.
1228

1329
:::
1430

‎docusaurus.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module.exports = {
44
tagline: 'Embed map viewers into your web pages, using HTML only.',
55
url: 'http://maps4html.org/',
66
baseUrl: '/web-map-doc/',
7-
onBrokenLinks: 'throw',
7+
onBrokenLinks: 'warn',
88
onBrokenMarkdownLinks: 'warn',
99
favicon: 'https://maps4html.org/favicon.ico',
1010
organizationName: 'Maps4HTML', // Usually your GitHub org/user name.

‎i18n/fr/docusaurus-plugin-content-docs/current/api/layer-api.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,11 @@ let layer = document.querySelector('map-layer');
107107
let opacity = layer.opacity;
108108
```
109109

110+
---
111+
### media
112+
113+
Reflète l'attribut [media](../elements/layer#media) de l'élément `<map-layer>`.
114+
110115
### extent
111116

112117
`HTMLLayerElement.extent` fournit un accès en LECTURE SEULE aux coordonnées en

‎i18n/fr/docusaurus-plugin-content-docs/current/api/map-link-api.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,20 @@ title: HTMLLinkElement
44
slug: /api/map-link-api
55
---
66

7+
# HTMLLinkElement
8+
9+
L'élément `<map-link>` est conçu pour implémenter une extension de l'élément HTML `<link>`
10+
et de l'API `HTMLLinkElement`. Ce document reflète les modifications proposées à cette
11+
API et est en cours de développement.
12+
13+
## Propriétés
14+
15+
### media
16+
17+
Reflète l'attribut [media](../elements/link#media) de l'élément `<map-link>`.
18+
19+
---
20+
721
Ce document est une copie de l'ancienne page "Custom Rendering API", et est
822
en cours de construction. Il décrira à terme l'API de l'élément personnalisé map-link ;
923
l'"API de rendu personnalisé" provient actuellement de l'élément personnalisé map-link,

‎i18n/fr/docusaurus-plugin-content-docs/current/api/map-style-api.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
id: map-style-api
3+
title: "HTMLStyleElement"
4+
slug: /api/map-style-api
5+
---
6+
7+
# HTMLStyleElement
8+
9+
L'élément `<map-style>` est une extension de l'élément HTML `<style>` et de l'API `HTMLStyleElement`.
10+
Ce document reflète les modifications proposées à cette API et est en cours de développement.
11+
12+
## Propriétés
13+
14+
### media
15+
16+
Reflète l'attribut [media](../elements/style#media) de l'élément `<map-style>`. Les requêtes média pour la carte peuvent inclure des propriétés de carte, notamment : [projection](../../api/mapml-viewer-api#projection), [zoom](../../api/mapml-viewer-api#zoom), et [extent](../../api/mapml-viewer-api#extent).
17+
18+
## Spécifications
19+
20+
| Spécification |
21+
|--------------------------------------------------------------|
22+
| [HTMLStyleElement](https://github.com/Maps4HTML/MapML-Specification/issues/209) |
23+
24+
---
25+
26+
## Exigences
27+
28+
[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-)
29+
30+
<p><b><span class="requirement">exigence</span>
31+
<span class="enhancement">amélioration</span>
32+
<span class="impractical">peu pratique</span>
33+
<span class="undecided">indécis</span>
34+
<span class="discussion">en cours de discussion</span></b></p>
35+
36+
| | Spéc. | Visualiseur | API |
37+
|:---------------------------------------------------------------------------------|:------: |:-----: |:---: |
38+
| [**Propriétés**](#propriétés) | aucun | partiel | partiel |
39+
| [**Méthodes**](#méthodes) | s/o | s/o | s/o |
40+
41+
42+
---
43+
44+
> - [Modifier cette page sur **Github**](https://github.com/Maps4HTML/web-map-doc/edit/main/i18n/fr/docusaurus-plugin-content-docs/current/api/map-style-api.md)
45+
> - [Discutez avec nous sur **Gitter**](https://gitter.im/Maps4HTML/chat)

0 commit comments

Comments
 (0)