Skip to content

Commit

Permalink
Rename the layer- element to map-layer
Browse files Browse the repository at this point in the history
  • Loading branch information
prushfor authored and prushfor committed Oct 17, 2024
1 parent d5781af commit 84f64df
Show file tree
Hide file tree
Showing 83 changed files with 388 additions and 388 deletions.
24 changes: 12 additions & 12 deletions docs/api/geojson-api.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ The **GeoJSON API** is provided as a library to convert GeoJSON to and from MapM

| Function | Returns | Description |
|----------|---------|-------------|
|<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.|
|<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.|

:::tip

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

``` html
<layer- label="Example 1" checked="">
<map-layer label="Example 1" checked="">
<map-meta name="projection" content="CBMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
<map-feature>
Expand All @@ -157,7 +157,7 @@ let output = geojson2mapml(json, {label: "Example 1", projection: "CBMTILE", cap
<h3>This is a property heading</h3>
</map-properties>
</map-feature>
</layer->
</map-layer>
```

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

``` html
<layer- label="Example 2" checked="">
<map-layer label="Example 2" checked="">
<map-meta name="projection" content="OSMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
<map-feature>
Expand All @@ -209,7 +209,7 @@ let output = geojson2mapml(json, {label: "Example 2", caption: cap, properties:
<h1>This is a Point's property</h1>
</map-properties>
</map-feature>
</layer->
</map-layer>
```

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

``` html
<layer- label="Point Geometry" checked="">
<map-layer label="Point Geometry" checked="">
<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>
<map-meta name="projection" content="OSMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
Expand Down Expand Up @@ -269,7 +269,7 @@ let output = geojson2mapml(json);
</table>
</map-properties>
</map-feature>
</layer->
</map-layer>
```

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

| Function | Returns | Description |
|----------|---------|-------------|
| <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.
| <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.

:::caution

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

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

### Options
Expand Down Expand Up @@ -327,7 +327,7 @@ the layer.
#### Default options
An example showcasing default GeoJSON output when no options are provided.
``` html
<layer- label="Point Geometry" checked="">
<map-layer label="Point Geometry" checked="">
<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>
<map-meta name="projection" content="OSMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
Expand Down Expand Up @@ -355,10 +355,10 @@ An example showcasing default GeoJSON output when no options are provided.
</table>
</map-properties>
</map-feature>
</layer->
</map-layer>
<script>
window.onload = (event) => {
let output = mapml2geojson(document.querySelector('layer-'))
let output = mapml2geojson(document.querySelector('map-layer'))
};
</script>
```
Expand Down
48 changes: 24 additions & 24 deletions docs/api/layer-api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ The checked property can't be changed if the disabled property is set.
To set the checked state of a layer to on:

```js
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
layer.checked = true; // valid values are true | false
```

To read the checked state of the layer:

```js
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
let isChecked = layer.checked;
```
---
Expand All @@ -43,14 +43,14 @@ user interface.
To set/update whether the layer is "hidden":

```js
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
layer.hidden = true; // valid values are true | false
```

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

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

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

```js
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
layer.label = "New Title";
```

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

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

```js
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
layer.src = "https://example.org";
```

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

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

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

```js
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
layer.opacity = 0.5; // valid values from 0 to 1
```

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

```js
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
let opacity = layer.opacity;
```

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

```js
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
layer.zoomTo();
```

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

| Function | Returns | Description |
|----------|---------|-------------|
| <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.
| <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.

:::caution

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

``` js
window.onload = (event) => {
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
layer.mapml2geojson();
};
```
Expand Down Expand Up @@ -202,7 +202,7 @@ so the resulting JSON SHOULD (somehow, tbd) be tagged with the datum in use by t
#### Default options
An example showcasing default GeoJSON output when no options are provided.
``` html
<layer- label="Point Geometry" checked="">
<map-layer label="Point Geometry" checked="">
<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>
<map-meta name="projection" content="OSMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
Expand Down Expand Up @@ -230,10 +230,10 @@ An example showcasing default GeoJSON output when no options are provided.
</table>
</map-properties>
</map-feature>
</layer->
</map-layer>
<script>
window.onload = (event) => {
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
let output = layer.mapml2geojson();
};
</script>
Expand Down
8 changes: 4 additions & 4 deletions docs/api/map-feature-api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ None ([undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere

``` js
window.onload = (event) => {
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
layer.mapml2geojson();
};
```
Expand Down Expand Up @@ -366,7 +366,7 @@ A GeoJSON object representing the feature
#### Default options
An example showcasing default GeoJSON output when no options are provided.
``` html
<layer- label="Point Geometry" checked="">
<map-layer label="Point Geometry" checked="">
<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>
<map-meta name="projection" content="OSMTILE"></map-meta>
<map-meta name="cs" content="gcrs"></map-meta>
Expand Down Expand Up @@ -394,10 +394,10 @@ An example showcasing default GeoJSON output when no options are provided.
</table>
</map-properties>
</map-feature>
</layer->
</map-layer>
<script>
window.onload = (event) => {
let layer = document.querySelector('layer-');
let layer = document.querySelector('map-layer');
let output = layer.mapml2geojson();
};
</script>
Expand Down
6 changes: 3 additions & 3 deletions docs/api/map-link-api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ This event is fired when a tile is first being created, the event contains the f
The map:
```html
<mapml-viewer projection="OSMTILE" zoom="0" lat="45" lon="-75" controls>
<layer- label="Custom Tiles" checked>
<map-layer label="Custom Tiles" checked>
<map-meta name="zoom" content="min=0,max=23" ></map-meta>
<map-extent units="OSMTILE" checked hidden>
<map-input name="zoomLevel" type="zoom" min="0" max="23" value="1" ></map-input>
Expand All @@ -43,14 +43,14 @@ The map:
<!-- listen for the tileloadstart event on this element -->
<map-link rel="tile" title="" tref="" ></map-link>
</map-extent>
</layer->
</map-layer>
</mapml-viewer>
```


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

0 comments on commit 84f64df

Please sign in to comment.