Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename the layer- element to map-layer #157

Merged
merged 1 commit into from
Oct 21, 2024
Merged

Rename the layer- element to map-layer #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/api/geojson-api.mdx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading