Skip to content

Commit 938ac82

Browse files
ahmadayubiahmadayubi
authored
Merge pull request #12 from ahmadayubi/master
Adds templated features and images to docs
2 parents 7059c66 + 977280c commit 938ac82

File tree

7 files changed

+230
-8
lines changed

7 files changed

+230
-8
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,6 @@ npm-debug.log*
1919
yarn-debug.log*
2020
yarn-error.log*
2121

22-
examples.md
22+
examples.md
23+
24+
/.idea

‎docs/layers/static-features.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ This element contains the different points, lines and polygons that will be draw
6060

6161
## Additional Context
6262

63-
You can also provide a set of elements to further define the static feature layer. This is the list of availble additions with examples.
63+
You can also provide a set of elements to further define the static feature layer. This is the list of available additions with examples.
6464

6565
#### `<link rel="license">`
6666

@@ -74,7 +74,7 @@ Sets the attribution link of the layer. Example:
7474

7575
#### `<meta name="zoom">`
7676

77-
Sets the native minumum and maximum [native zoom](http://example.org/). It also allows you to set a value, this is the default zoom of all features in the case the `<feature>` is missing a zoom attribute.
77+
Sets the native minimum and maximum [native zoom](http://example.org/). It also allows you to set a value, this is the default zoom of all features in the case the `<feature>` is missing a zoom attribute.
7878

7979
```html
8080
<meta name="zoom" content="min=1,max=5,value=0" />

‎docs/layers/static-tiles.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Add an image file to your project directory. Now you can access this image in Ma
3737

3838
## Additional Context
3939

40-
You can also provide a set of elements to further define the static tile layer. This is the list of availble additions with examples.
40+
You can also provide a set of elements to further define the static tile layer. This is the list of available additions with examples.
4141

4242
#### `<link rel="license">`
4343

@@ -51,7 +51,7 @@ Sets the attribution link of the layer. Example:
5151

5252
#### `<meta name="zoom">`
5353

54-
Sets the native minumum and maximum [native zoom](http://example.org/).
54+
Sets the native minimum and maximum [native zoom](http://example.org/).
5555

5656
```html
5757
<meta name="zoom" content="min=1,max=4">

‎docs/layers/templated-features.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
id: templated-features
3+
title: Templated Features Layer
4+
slug: /layers/templated-features
5+
---
6+
7+
In this section, we will learn how to create a templated feature layer. A templated feature layer is a layer that fetches a single .mapml file on pans and zooms.
8+
9+
## Adding a templated feature layer
10+
11+
```html
12+
<layer- label="Alabama" checked>
13+
<meta name="zoom" content="min=2,max=5" />
14+
<extent units="CBMTILE">
15+
<input name="z" type="zoom" min="2" max="18" value="0" />
16+
<input name="xmin" type="location" units="gcrs" axis="longitude" position="top-left" min="-76" max="-74" />
17+
<input name="ymin" type="location" units="gcrs" axis="latitude" position="bottom-right" min="45" max="46" />
18+
<input name="xmax" type="location" units="gcrs" axis="longitude" position="bottom-right" min="-76" max="-74" />
19+
<input name="ymax" type="location" units="gcrs" axis="latitude" position="top-left" min="45" max="46" />
20+
<link rel="features" tref="data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" />
21+
</extent>
22+
</layer->
23+
```
24+
25+
## Associated Elements
26+
27+
### `<extent>`
28+
29+
- `units`
30+
- This allows you to define what the [projection](http://example.org) of the templated features.
31+
32+
---
33+
34+
### `<input>`
35+
36+
- `axis`
37+
- This attribute is only useful on inputs of type <strong>location</strong>, it sets the axis the following input defines. This value also defines what the <strong>min</strong> and <strong>max</strong> value's units.
38+
- Options are, row | column | easting | northing | latitude | longitude
39+
40+
- `name`
41+
- This allows you to name the input, this name is then used in the url template used in the `<link>` href attribute.
42+
43+
- `type`
44+
- Sets the <strong>type</strong> of the input.
45+
- Options are, zoom | location
46+
47+
- `max`
48+
- Sets the maximum of the bounds of the layer on the given <strong>axis</strong>.
49+
50+
- `min`
51+
- Sets the minimum of the bounds of the layer on the given <strong>axis</strong>.
52+
53+
- `position`
54+
- Sets the position of the input, this can either be top-left or bottom-right.
55+
56+
- `value`
57+
- Sets the zoom level the inputs of type <strong>location</strong>'s <strong>min</strong> and <strong>max</strong> are defined at.
58+
59+
---
60+
61+
### `<link>`
62+
63+
- `rel`
64+
- Set this to features in the case of a templated features layer.
65+
66+
- `title`
67+
- Sets the title of the layer, this is the title shown in the layer controls.
68+
69+
- `type`
70+
- Sets the type of the returned data.
71+
72+
- `tref`
73+
- Sets the templated url of the templated tile layer, this must contain all the names of the inputs used to query a given tile.
74+
75+
---
76+
77+
## Additional Context
78+
79+
You can also provide a set of elements to further define the templated feature layer. This is the list of available additions with examples.
80+
81+
#### `<meta name="zoom">`
82+
Sets the zoom range of the layer. The layer will make requests from zoom levels 1 to 5 in the example below.
83+
84+
```html
85+
<meta name="zoom" content="min=1,max=5" />
86+
```
87+
88+
---
89+
90+
```html
91+
<mapml-viewer projection="CBMTILE" zoom="3" lat="45.5052040" lon="-75.2202344" controls>
92+
<layer- label="Alabama" checked>
93+
<meta name="zoom" content="min=2,max=5" />
94+
<extent units="CBMTILE">
95+
<input name="z" type="zoom" min="2" max="18" value="0" />
96+
<input name="xmin" type="location" units="gcrs" axis="longitude" position="top-left" min="-76" max="-74" />
97+
<input name="ymin" type="location" units="gcrs" axis="latitude" position="bottom-right" min="45" max="46" />
98+
<input name="xmax" type="location" units="gcrs" axis="longitude" position="bottom-right" min="-76" max="-74" />
99+
<input name="ymax" type="location" units="gcrs" axis="latitude" position="top-left" min="45" max="46" />
100+
<link rel="features" tref="data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" />
101+
</extent>
102+
</layer->
103+
</mapml-viewer>
104+
```
105+
106+
[ADD MAP HERE]

‎docs/layers/templated-images.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
id: templated-images
3+
title: Templated Images Layer
4+
slug: /layers/templated-images
5+
---
6+
7+
In this section, we will learn how to create a templated image layer. A templated image layer is a layer that fetches a single image file on pans and zooms.
8+
9+
## Adding a templated image layer
10+
11+
```html
12+
<layer- label="Toporama" checked>
13+
<meta name="zoom" content="min=4,max=5" />
14+
<extent units="CBMTILE">
15+
<input name="z" type="zoom" value="19" min="4" max="4" />
16+
<input name="w" type="width" />
17+
<input name="h" type="height" />
18+
<input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" min="-6207743" max="3952277" />
19+
<input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="-3362085" max="3952277" />
20+
<input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="-6207743" max="3952277" />
21+
<input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-3362085" max="3952277" />
22+
<link rel="image" tref="http://my-wms.ca?FORMAT=image/jpeg&amp;WIDTH={w}&amp;HEIGHT={h}&amp;BBOX={xmin},{ymin},{xmax},{ymax}" />
23+
</extent>
24+
</layer->
25+
```
26+
27+
## Associated Elements
28+
29+
### `<extent>`
30+
31+
- `units`
32+
- This allows you to define what the [projection](http://example.org/) of the templated tiles are.
33+
34+
---
35+
36+
### `<input>`
37+
38+
- `axis`
39+
- This attribute is only useful on inputs of type <strong>location</strong>, it sets the axis the following input defines. This value also defines what the <strong>min</strong> and <strong>max</strong> value's units.
40+
- Options are, row | column | easting | northing | latitude | longitude
41+
42+
- `name`
43+
- This allows you to name the input, this name is then used in the url template used in the `<link>` href attribute.
44+
45+
- `type`
46+
- Sets the <strong>type</strong> of the input.
47+
- Options are, zoom | location | width | height
48+
49+
- `max`
50+
- Sets the maximum of the bounds of the layer on the given <strong>axis</strong>.
51+
52+
- `min`
53+
- Sets the minimum of the bounds of the layer on the given <strong>axis</strong>.
54+
55+
- `position`
56+
- Sets the position of the input, this can either be top-left or bottom-right.
57+
58+
- `value`
59+
- Sets the zoom level the inputs of type <strong>location</strong>'s <strong>min</strong> and <strong>max</strong> are defined at.
60+
61+
---
62+
63+
### `<link>`
64+
65+
- `rel`
66+
- Set this to image in the case of a templated image layer.
67+
68+
- `title`
69+
- Sets the title of the layer, this is the title shown in the layer controls.
70+
71+
- `type`
72+
- Sets the type of the returned data.
73+
74+
- `tref`
75+
- Sets the templated url of the templated tile layer, this must contain all the names of the inputs used to query a given tile.
76+
77+
---
78+
79+
## Additional Context
80+
81+
You can also provide a set of elements to further define the templated tile layer. This is the list of available additions with examples.
82+
83+
#### `<meta name="zoom">`
84+
Sets the zoom range of the layer, in the following example the user can zoom from zoom level 1 to 5.
85+
86+
```html
87+
<meta name="zoom" content="min=1,max=5" />
88+
```
89+
90+
---
91+
92+
## Full Examples
93+
94+
```html
95+
<mapml-viewer projection="CBMTILE" zoom="4" lat="53.331" lon="-91.667" controls>
96+
<layer- label="Toporama" checked>
97+
<meta name="zoom" content="min=4,max=5" />
98+
<extent units="CBMTILE">
99+
<input name="z" type="zoom" value="19" min="4" max="4" />
100+
<input name="w" type="width" />
101+
<input name="h" type="height" />
102+
<input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" min="-6207743.103886206" max="3952277.216154434" />
103+
<input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="-3362085.3441706896" max="3952277.216154434" />
104+
<input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="-6207743.103886206" max="3952277.216154434" />
105+
<input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-3362085.3441706896" max="3952277.216154434" />
106+
<link rel="image" tref="http://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:3978&amp;BBOX={xmin},{ymin},{xmax},{ymax}&amp;m4h=t" />
107+
</extent>
108+
</layer->
109+
</mapml-viewer>
110+
```
111+
112+
[ADD MAP HERE]

‎docs/layers/templated-tiles.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Templated Tiles Layer
44
slug: /layers/templated-tiles
55
---
66

7-
In this section, we will learn how to create a templated tile layer. A templated layer is a layer that makes HTTP requests for it's data. In this case requests are made to fill in the grid of tiles avabible on the map's viewport.
7+
In this section, we will learn how to create a templated tile layer. A templated layer is a layer that makes HTTP requests for it's data. In this case requests are made to fill in the grid of tiles available on the map's viewport.
88

99
## Adding a templated layer
1010

@@ -70,10 +70,10 @@ In this section, we will learn how to create a templated tile layer. A templated
7070

7171
## Additional Context
7272

73-
You can also provide a set of elements to further define the templated tile layer. This is the list of availble additions with examples.
73+
You can also provide a set of elements to further define the templated tile layer. This is the list of available additions with examples.
7474

7575
#### `<meta name="zoom">`
76-
Sets the native minumum and maximum [native zoom](http://example.org/). It also allows you to set a value, this is the default zoom of all features in the case the `<feature>` is missing a zoom attribute.
76+
Sets the native minimum and maximum [native zoom](http://example.org/). It also allows you to set a value, this is the default zoom of all features in the case the `<feature>` is missing a zoom attribute.
7777

7878
```html
7979
<meta name="zoom" content="min=1,max=5,value=0" />

‎sidebars.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ module.exports = {
99
'layers/static-features',
1010
'layers/static-images',
1111
'layers/templated-tiles',
12+
'layers/templated-features',
13+
'layers/templated-images',
1214
],
1315
},
1416
],

0 commit comments

Comments
 (0)