Skip to content

Commit 787aee7

Browse files
prushforprushforth
prushfor
authored andcommitted
Rename the layer- element to map-layer
1 parent 655f0f5 commit 787aee7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+388
-388
lines changed

docs/api/geojson-api.mdx

+12-12
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ The **GeoJSON API** is provided as a library to convert GeoJSON to and from MapM
2929

3030
| Function | Returns | Description |
3131
|----------|---------|-------------|
32-
|<code>geojson2mapml(\<Object \| String\> json, \<Object\>options)</code> | A MapML `<layer->` element. | Convert a GeoJSON feature or feature collection string or object to MapML `<layer->` containing one or more `<map-feature>` elements.|
32+
|<code>geojson2mapml(\<Object \| String\> json, \<Object\>options)</code> | A MapML `<map-layer>` element. | Convert a GeoJSON feature or feature collection string or object to MapML `<map-layer>` containing one or more `<map-feature>` elements.|
3333

3434
:::tip
3535

@@ -143,7 +143,7 @@ let output = geojson2mapml(json, {label: "Example 1", projection: "CBMTILE", cap
143143
<summary>Click to view the output HTMLElement</summary>
144144

145145
``` html
146-
<layer- label="Example 1" checked="">
146+
<map-layer label="Example 1" checked="">
147147
<map-meta name="projection" content="CBMTILE"></map-meta>
148148
<map-meta name="cs" content="gcrs"></map-meta>
149149
<map-feature>
@@ -157,7 +157,7 @@ let output = geojson2mapml(json, {label: "Example 1", projection: "CBMTILE", cap
157157
<h3>This is a property heading</h3>
158158
</map-properties>
159159
</map-feature>
160-
</layer->
160+
</map-layer>
161161
```
162162

163163
</details>
@@ -195,7 +195,7 @@ let output = geojson2mapml(json, {label: "Example 2", caption: cap, properties:
195195
<summary>Click to view the output HTMLElement</summary>
196196

197197
``` html
198-
<layer- label="Example 2" checked="">
198+
<map-layer label="Example 2" checked="">
199199
<map-meta name="projection" content="OSMTILE"></map-meta>
200200
<map-meta name="cs" content="gcrs"></map-meta>
201201
<map-feature>
@@ -209,7 +209,7 @@ let output = geojson2mapml(json, {label: "Example 2", caption: cap, properties:
209209
<h1>This is a Point's property</h1>
210210
</map-properties>
211211
</map-feature>
212-
</layer->
212+
</map-layer>
213213
```
214214

215215
</details>
@@ -241,7 +241,7 @@ let output = geojson2mapml(json);
241241
<summary>Click to view the output HTMLElement</summary>
242242

243243
``` html
244-
<layer- label="Point Geometry" checked="">
244+
<map-layer label="Point Geometry" checked="">
245245
<map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta>
246246
<map-meta name="projection" content="OSMTILE"></map-meta>
247247
<map-meta name="cs" content="gcrs"></map-meta>
@@ -269,7 +269,7 @@ let output = geojson2mapml(json);
269269
</table>
270270
</map-properties>
271271
</map-feature>
272-
</layer->
272+
</map-layer>
273273
```
274274

275275
</details>
@@ -280,7 +280,7 @@ let output = geojson2mapml(json);
280280

281281
| Function | Returns | Description |
282282
|----------|---------|-------------|
283-
| <code>mapml2geojson(\<HTMLLayerElement\> element, \<Object\> options)</code> | A JavaScript (GeoJSON) feature collection object | This function transforms the `<feature>` element children of a `<layer->` element to a GeoJSON FeatureCollection object. You supply [options](#options-1) to control the transformation. This function must be used inside a windows.onload event.
283+
| <code>mapml2geojson(\<HTMLLayerElement\> element, \<Object\> options)</code> | A JavaScript (GeoJSON) feature collection object | This function transforms the `<feature>` element children of a `<map-layer>` element to a GeoJSON FeatureCollection object. You supply [options](#options-1) to control the transformation. This function must be used inside a windows.onload event.
284284

285285
:::caution
286286

@@ -298,7 +298,7 @@ window.onload = (event) => {
298298

299299
| Parameter | Description |
300300
|------|--------------|
301-
| \<HTMLLayerElement\> element | A `<layer->` element. |
301+
| \<HTMLLayerElement\> element | A `<map-layer>` element. |
302302
| \<Object\> options | You supply parameters via an options object with [predefined option names](#options-1). |
303303

304304
### Options
@@ -327,7 +327,7 @@ the layer.
327327
#### Default options
328328
An example showcasing default GeoJSON output when no options are provided.
329329
``` html
330-
<layer- label="Point Geometry" checked="">
330+
<map-layer label="Point Geometry" checked="">
331331
<map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta>
332332
<map-meta name="projection" content="OSMTILE"></map-meta>
333333
<map-meta name="cs" content="gcrs"></map-meta>
@@ -355,10 +355,10 @@ An example showcasing default GeoJSON output when no options are provided.
355355
</table>
356356
</map-properties>
357357
</map-feature>
358-
</layer->
358+
</map-layer>
359359
<script>
360360
window.onload = (event) => {
361-
let output = mapml2geojson(document.querySelector('layer-'))
361+
let output = mapml2geojson(document.querySelector('map-layer'))
362362
};
363363
</script>
364364
```

docs/api/layer-api.md

+24-24
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ The checked property can't be changed if the disabled property is set.
1919
To set the checked state of a layer to on:
2020

2121
```js
22-
let layer = document.querySelector('layer-');
22+
let layer = document.querySelector('map-layer');
2323
layer.checked = true; // valid values are true | false
2424
```
2525

2626
To read the checked state of the layer:
2727

2828
```js
29-
let layer = document.querySelector('layer-');
29+
let layer = document.querySelector('map-layer');
3030
let isChecked = layer.checked;
3131
```
3232
---
@@ -43,14 +43,14 @@ user interface.
4343
To set/update whether the layer is "hidden":
4444

4545
```js
46-
let layer = document.querySelector('layer-');
46+
let layer = document.querySelector('map-layer');
4747
layer.hidden = true; // valid values are true | false
4848
```
4949

50-
To get the `<layer->`'s hidden value:
50+
To get the `<map-layer>`'s hidden value:
5151

5252
```js
53-
let layer = document.querySelector('layer-');
53+
let layer = document.querySelector('map-layer');
5454
let isHidden = layer.hidden;
5555
```
5656
---
@@ -71,20 +71,20 @@ map viewport.
7171
### label
7272
`HTMLLayerElement.label` reflects the `label` content attribute, and specifies a
7373
fallback accessible name for the layer, if the accessible name is not provided
74-
via a local `<map-title>` element child of the `<layer->` element, or in the
74+
via a local `<map-title>` element child of the `<map-layer>` element, or in the
7575
`<map-head>` of a remote MapML document, loaded via the `src` URL value, respectively.
7676

77-
To set/update the `<layer->`'s label:
77+
To set/update the `<map-layer>`'s label:
7878

7979
```js
80-
let layer = document.querySelector('layer-');
80+
let layer = document.querySelector('map-layer');
8181
layer.label = "New Title";
8282
```
8383

84-
To get the `<layer->`'s label value:
84+
To get the `<map-layer>`'s label value:
8585

8686
```js
87-
let layer = document.querySelector('layer-');
87+
let layer = document.querySelector('map-layer');
8888
let label = layer.label;
8989
```
9090
---
@@ -94,34 +94,34 @@ let label = layer.label;
9494
MapML document for the layer. The src property may be undefined if the layer
9595
contains inline content. If the src property returns a value, any inline content
9696
will be ignored.
97-
To set/update the `<layer->`'s src:
97+
To set/update the `<map-layer>`'s src:
9898

9999
```js
100-
let layer = document.querySelector('layer-');
100+
let layer = document.querySelector('map-layer');
101101
layer.src = "https://example.org";
102102
```
103103

104-
To get the `<layer->`'s src value (URL):
104+
To get the `<map-layer>`'s src value (URL):
105105

106106
```js
107-
let layer = document.querySelector('layer-');
107+
let layer = document.querySelector('map-layer');
108108
let url = layer.src;
109109
```
110110
---
111111
### opacity
112112
`HTMLLayerElement.opacity` provides read/write access to the `opacity` value, and is reflected in the layer control for each layer, under "Opacity".
113113

114-
To set/update the `<layer->`'s opacity:
114+
To set/update the `<map-layer>`'s opacity:
115115

116116
```js
117-
let layer = document.querySelector('layer-');
117+
let layer = document.querySelector('map-layer');
118118
layer.opacity = 0.5; // valid values from 0 to 1
119119
```
120120

121-
To get the `<layer->`'s opacity value:
121+
To get the `<map-layer>`'s opacity value:
122122

123123
```js
124-
let layer = document.querySelector('layer-');
124+
let layer = document.querySelector('map-layer');
125125
let opacity = layer.opacity;
126126
```
127127

@@ -133,7 +133,7 @@ let opacity = layer.opacity;
133133
zoom level in which the extent fits completely.
134134

135135
```js
136-
let layer = document.querySelector('layer-');
136+
let layer = document.querySelector('map-layer');
137137
layer.zoomTo();
138138
```
139139

@@ -145,15 +145,15 @@ layer.zoomTo();
145145

146146
| Function | Returns | Description |
147147
|----------|---------|-------------|
148-
| <code>mapml2geojson(\<Object\> options)</code> | A JavaScript (GeoJSON) feature collection object | This function transforms the `<feature>` element children of a `<layer->` element to a GeoJSON FeatureCollection object. You supply [options](#options) to control the transformation. This function must be used inside a windows.onload event.
148+
| <code>mapml2geojson(\<Object\> options)</code> | A JavaScript (GeoJSON) feature collection object | This function transforms the `<feature>` element children of a `<map-layer>` element to a GeoJSON FeatureCollection object. You supply [options](#options) to control the transformation. This function must be used inside a windows.onload event.
149149

150150
:::caution
151151

152152
`mapml2geojson` must be called inside a windows.onload event to work properly. i.e.
153153

154154
``` js
155155
window.onload = (event) => {
156-
let layer = document.querySelector('layer-');
156+
let layer = document.querySelector('map-layer');
157157
layer.mapml2geojson();
158158
};
159159
```
@@ -202,7 +202,7 @@ so the resulting JSON SHOULD (somehow, tbd) be tagged with the datum in use by t
202202
#### Default options
203203
An example showcasing default GeoJSON output when no options are provided.
204204
``` html
205-
<layer- label="Point Geometry" checked="">
205+
<map-layer label="Point Geometry" checked="">
206206
<map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta>
207207
<map-meta name="projection" content="OSMTILE"></map-meta>
208208
<map-meta name="cs" content="gcrs"></map-meta>
@@ -230,10 +230,10 @@ An example showcasing default GeoJSON output when no options are provided.
230230
</table>
231231
</map-properties>
232232
</map-feature>
233-
</layer->
233+
</map-layer>
234234
<script>
235235
window.onload = (event) => {
236-
let layer = document.querySelector('layer-');
236+
let layer = document.querySelector('map-layer');
237237
let output = layer.mapml2geojson();
238238
};
239239
</script>

docs/api/map-feature-api.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ None ([undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere
313313

314314
``` js
315315
window.onload = (event) => {
316-
let layer = document.querySelector('layer-');
316+
let layer = document.querySelector('map-layer');
317317
layer.mapml2geojson();
318318
};
319319
```
@@ -366,7 +366,7 @@ A GeoJSON object representing the feature
366366
#### Default options
367367
An example showcasing default GeoJSON output when no options are provided.
368368
``` html
369-
<layer- label="Point Geometry" checked="">
369+
<map-layer label="Point Geometry" checked="">
370370
<map-meta name="extent" content="top-left-longitude=-75.916809, top-left-latitude=45.886964, bottom-right-longitude=-75.516809,bottom-right-latitude=45.26964"></map-meta>
371371
<map-meta name="projection" content="OSMTILE"></map-meta>
372372
<map-meta name="cs" content="gcrs"></map-meta>
@@ -394,10 +394,10 @@ An example showcasing default GeoJSON output when no options are provided.
394394
</table>
395395
</map-properties>
396396
</map-feature>
397-
</layer->
397+
</map-layer>
398398
<script>
399399
window.onload = (event) => {
400-
let layer = document.querySelector('layer-');
400+
let layer = document.querySelector('map-layer');
401401
let output = layer.mapml2geojson();
402402
};
403403
</script>

docs/api/map-link-api.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ This event is fired when a tile is first being created, the event contains the f
3434
The map:
3535
```html
3636
<mapml-viewer projection="OSMTILE" zoom="0" lat="45" lon="-75" controls>
37-
<layer- label="Custom Tiles" checked>
37+
<map-layer label="Custom Tiles" checked>
3838
<map-meta name="zoom" content="min=0,max=23" ></map-meta>
3939
<map-extent units="OSMTILE" checked hidden>
4040
<map-input name="zoomLevel" type="zoom" min="0" max="23" value="1" ></map-input>
@@ -43,14 +43,14 @@ The map:
4343
<!-- listen for the tileloadstart event on this element -->
4444
<map-link rel="tile" title="" tref="" ></map-link>
4545
</map-extent>
46-
</layer->
46+
</map-layer>
4747
</mapml-viewer>
4848
```
4949

5050

5151
The JavaScript for creating custom tiles:
5252
```js
53-
let layer = document.querySelector("body > mapml-viewer > layer- > map-extent > map-link");
53+
let layer = document.querySelector("body > mapml-viewer > map-layer > map-extent > map-link");
5454
layer.addEventListener("tileloadstart", (e) => {
5555
let customTile = document.createElement("p");
5656
customTile.innerHTML = `x: ${e.detail.x} y: ${e.detail.y} zoom: ${e.detail.zoom}`;

0 commit comments

Comments
 (0)