Skip to content

Commit ae4e9bf

Browse files
prushforthprushforth
authored
Merge branch 'master' into master
2 parents 4927793 + 938ac82 commit ae4e9bf

File tree

10 files changed

+972
-612
lines changed

10 files changed

+972
-612
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
@@ -11,6 +11,8 @@ module.exports = {
1111
'layers/static-features',
1212
'layers/static-images',
1313
'layers/templated-tiles',
14+
'layers/templated-features',
15+
'layers/templated-images',
1416
],
1517
},
1618
],

‎static/dist/layer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ export class MapLayer extends HTMLElement {
261261
this._layer.on('add remove extentload', this._validateDisabled, this);
262262

263263
// if controls option is enabled, insert the layer into the overlays array
264-
if (this.parentNode.controls && !this.hidden) {
264+
if (this.parentNode._layerControl && !this.hidden) {
265265
this._layerControl = this.parentNode._layerControl;
266266
this._layerControl.addOrUpdateOverlay(this._layer, this.label);
267267
}

‎static/dist/mapml.css‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -334,6 +334,7 @@
334334
}
335335

336336
/* Disable pointer events where they'd interfere with the intended action. */
337+
.leaflet-tooltip,
337338
.leaflet-crosshair *,
338339
.mapml-contextmenu-item > *,
339340
.mapml-control-layers label[for^="o"],
@@ -441,17 +442,22 @@ summary {
441442
position: relative;
442443
}
443444

445+
/* Quick fix for https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/358,
446+
refactor TBD in https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/263. */
444447
.mapml-control-summary-container {
445-
display: flex;
446-
justify-content: space-between;
447-
align-items: center;
448-
width: 100%;
448+
display: contents;
449449
}
450-
451-
.mapml-layer-remove-button {
452-
margin-left: 15px;
450+
.mapml-control-summary-container .mapml-layer-remove-button {
453451
text-decoration: none;
452+
float: right;
453+
}
454+
.mapml-control-summary-container * {
455+
display: inline;
454456
}
457+
.mapml-control-summary-container label {
458+
margin-right: 15px;
459+
}
460+
455461

456462
/* Force printers to include background-images of controls for printing.
457463
(https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/294) */
@@ -461,3 +467,9 @@ summary {
461467
color-adjust: exact;
462468
}
463469
}
470+
471+
.leaflet-pane > svg g.leaflet-interactive,
472+
svg.leaflet-image-layer.leaflet-interactive g {
473+
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
474+
pointer-events: auto;
475+
}

0 commit comments

Comments
 (0)