Skip to content

Commit 813cd02

Browse files
committed
Add skills. Update list of wms capabilities urls. Update app.
1 parent 0e9362f commit 813cd02

10 files changed

Lines changed: 1587 additions & 312 deletions

File tree

.github/skills/map-extent-markup/SKILL.md

Lines changed: 123 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,135 @@ name: mapml-extent-markup
33
description: Tells you how to correctly create and edit the markup for a <map-extent> element. Use it when generating MapML output markup in an HTML page.
44
---
55

6-
## Required Attributes
7-
- `units` - Coordinate reference system (e.g., "OSMTILE", "WGS84", "CBMTILE", "APSTILE")
6+
The `<map-extent>` element is a hypertext control that is associated to and represents the
7+
rectangle of the map viewport, from the user's perspective. Map authors use it
8+
to compose server requests for layer content. Requests are composed using
9+
URL templates processed by the browser as the map moves and requires new content
10+
to paint. The URL templates each contain one or more variable references, with each
11+
variable reference denoted by the name of the variable enclosed in braces `{}`.
812

9-
## Optional Attributes
10-
- `checked` - Boolean, whether extent is initially enabled
11-
- `hidden` - boolean, hides or shows the extent in the layer control as a "sub-layer" (underneath a layer)
12-
- `label` - string, used to provide non-default label for the sub-layer controls in the layer control
13+
Variables are created by the map author using the `<map-input>` element. There are
14+
several types of `<map-input>`, allowing the map author to reference the corners
15+
of the extent, its width and height, and its zoom.
1316

14-
## Child Elements
15-
- `<map-input>` - Required, defines variable inputs for templated URLs
16-
- `<map-link>` - Provides templated URLs for links to tiles, images, features, or queries
17+
An example of a `<map-extent>` element being used to load image tiles for a single
18+
URL template.
1719

20+
```html
21+
<mapml-viewer projection="OSMTILE" lat="10" lon="0" zoom="1">
22+
<map-layer label="OpenStreetMap" checked>
23+
<map-extent units="OSMTILE" checked hidden>
24+
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
25+
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
26+
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
27+
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
28+
</map-extent>
29+
</map-layer>
30+
</mapml-viewer>
31+
```
32+
33+
## Attributes
34+
35+
### `units`
36+
37+
Specifies the projection of the tiles and other content that is expected from the
38+
server. If the projection value is a case-insensitive match of the `<mapml-viewer>`
39+
`projection` attribute, the extent will be disabled in the layer control, and will
40+
not be displayed on the map, nor content fetched.
41+
42+
Defined values of `units` include:
43+
44+
| Projection | Description |
45+
|-------------- |-------------------------------------------------------- |
46+
| OSMTILE | Web Mercator, with 256px x 256px tiles recursively defined inside a square bounds at zoom = 0|
47+
| WGS84 | Pseudo plate carrée, with 256px x 256px tiles. Zoom = 0 contains two tiles in two columns, with their origin at -180,90. False easting and northing (pcrs) values inside the projection bounds correspond to longitude and latitude, respectively. |
48+
| CBMTILE | Lambert Conformal Conic, with 256px x 256px tiles. Zoom levels chosen by scale denominator, so tiles do not nest.|
49+
50+
Author-defined values of `units` are possible, using the [Custom projections API](../../api/mapml-viewer-api/#definecustomprojectionoptions)
51+
52+
The `units` attribute is required and can't be changed.
53+
54+
---
55+
56+
### `label`
57+
58+
Specifies a label for an extent which is displayed in the layer control. When a `label` value is not provided, the `label` value defaults to 'Sub-Layer' in the layer control.
59+
60+
---
61+
62+
### `checked`
1863

19-
## Constraints
20-
- Must be child of `<map-layer>`, either inline or remote
21-
- Must contain one or more `<map-link>` element(s)
22-
- Must contain `<map-input>` elements that define ALL the variables contained in a child `<map-link tref="...{variable}...">` `tref` value
23-
- The `units` value must match one of the supported projection values OR a string that identifies a custom projection defined at runtime.
64+
The `checked` attribute and property is boolean. When present, the checked property value is taken to be 'true'; when not present, the property value is 'false'. The map-extent content will be fetched and rendered according to the `checked` state. Beware that it is the *presence* of the attribute that makes it true, not the value of the attribute. For example, the attribute `checked="false"` actually turns out to be checked, [as described by MDN Web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#boolean_attributes).
2465

25-
## Supported Units/Projections
26-
- `OSMTILE` - Web Mercator tile grid, based on EPSG:3857
27-
- `WGS84` - Geographic coordinates, based on CRS:84
28-
- `CBMTILE` - Canada Base Map tile grid based on EPSG:3978
29-
- `APSTILE` - Alaska Polar Stereographic, based on EPSG:5936
66+
---
67+
68+
### `hidden`
69+
70+
The `hidden` attribute and property is boolean. When present, the extent is hidden (not present) in the layer control. Regardless of `hidden` state, the layer is rendered or not depending on the `checked` attribute state.
71+
72+
---
73+
74+
### `opacity`
75+
76+
The `opacity` attribute is used to set the initial opacity of the `<map-extent>` element.
77+
Valid `opacity` values range from from "0.0" to "1.0" with strictly one demical place and are reflected in the extent settings
78+
opacity input slider control. When the `opacity` attribute is not present, the opacity is set to "1.0" by default.
79+
80+
---
81+
82+
## Examples
83+
84+
### Multiple Extent
85+
86+
The following example shows multiple `<map-extent>` elements in a layer. The different elements can be selected from the three dots menu of the Basemap layer.
3087

31-
## Example
3288
```html
33-
<map-extent units="OSMTILE" label="Example tiled sub-layer, default checked, not hidden" checked>
34-
<map-input name="z" type="zoom" min="0" max="18" value="0"></map-input>
35-
<map-link rel="tile" tref="https://example.com/tiles/{z}/{y}/{x}.png"></map-link>
36-
</map-extent>
89+
<mapml-viewer projection="OSMTILE" zoom="2" lat="53.331" lon="-91.667" controls>
90+
<!-- Change Basemap using the three dots menu of the basemap layer -->
91+
<map-layer label="Basemap" checked="">
92+
<!-- This extent will be hidden in the layer control since no label is provided -->
93+
<map-extent units="OSMTILE" checked>
94+
<map-input name="TileMatrix" type="zoom" value="18" min="0" max="18"></map-input>
95+
<map-input name="TileCol" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
96+
<map-input name="TileRow" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
97+
<map-link rel="tile" tref="https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS/tile/1.0.0/World_Imagery/default/default028mm/{TileMatrix}/{TileRow}/{TileCol}.jpg"></map-link>
98+
</map-extent>
99+
<map-extent label="Nat Geo" units="OSMTILE" checked>
100+
<map-input name="TileMatrix" type="zoom" value="18" min="0" max="18"></map-input>
101+
<map-input name="TileCol" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
102+
<map-input name="TileRow" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
103+
<map-link rel="tile" tref="https://server.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/WMTS/tile/1.0.0/NatGeo_World_Map/default/default028mm/{TileMatrix}/{TileRow}/{TileCol}.jpg"></map-link>
104+
</map-extent>
105+
<map-extent label="Imagery" units="OSMTILE" checked>
106+
<map-input name="TileMatrix" type="zoom" value="18" min="0" max="18"></map-input>
107+
<map-input name="TileCol" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
108+
<map-input name="TileRow" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
109+
<map-link rel="tile" tref="https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS/tile/1.0.0/World_Imagery/default/default028mm/{TileMatrix}/{TileRow}/{TileCol}.jpg"></map-link>
110+
<map-link rel="tile" tref="https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Boundaries_and_Places/MapServer/WMTS/tile/1.0.0/Reference_World_Boundaries_and_Places/default/default028mm/{TileMatrix}/{TileRow}/{TileCol}.png"></map-link>
111+
</map-extent>
112+
</map-layer>
113+
</mapml-viewer>
37114
```
38115

39-
## Notes
40-
-
116+
### WMS Request
117+
118+
The following example shows a Web Map Service Request using `<map-link>` to request map images.
119+
120+
```html
121+
<mapml-viewer projection="OSMTILE" zoom="4" lat="53.331" lon="-91.667" controls>
122+
<map-layer label="Toporama" checked="">
123+
<map-extent xmlns="http://www.w3.org/1999/xhtml" units="OSMTILE" checked>
124+
<!-- URL parameters for WMS Request -->
125+
<map-input name="z" type="zoom" value="18" min="4" max="18"></map-input>
126+
<map-input name="w" type="width"></map-input>
127+
<map-input name="h" type="height"></map-input>
128+
<map-input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" min="-2.003750834E7" max="2.003750834E7"></map-input>
129+
<map-input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="-2.003750834E7" max="2.003750834E7"></map-input>
130+
<map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="-2.003750834E7" max="2.003750834E7"></map-input>
131+
<map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-2.003750834E7" max="2.003750834E7"></map-input>
132+
<!-- Web Map Service requesting image -->
133+
<map-link rel="image" tref="https://wms.ess-ws.nrcan.gc.ca/wms/toporama_en?SERVICE=WMS&amp;REQUEST=GetMap&amp;FORMAT=image/jpeg&amp;TRANSPARENT=FALSE&amp;STYLES=&amp;VERSION=1.3.0&amp;LAYERS=WMS-Toporama&amp;WIDTH={w}&amp;HEIGHT={h}&amp;CRS=EPSG:3857&amp;BBOX={xmin},{ymin},{xmax},{ymax}&amp;m4h=t"></map-link>
134+
</map-extent>
135+
</map-layer>
136+
</mapml-viewer>
137+
```

0 commit comments

Comments
 (0)