1
+ <!doctype html>
2
+ < html lang ="en ">
3
+
4
+ < head >
5
+ < meta charset ="utf-8 ">
6
+ < meta name ="viewport " content ="width=device-width,initial-scale=1 ">
7
+ < title > Layer Control Tests</ title >
8
+ < script type ="module " src ="mapml.js "> </ script >
9
+ < style >
10
+ html ,
11
+ body {
12
+ height : 100% ;
13
+ }
14
+
15
+ * {
16
+ margin : 0 ;
17
+ padding : 0 ;
18
+ }
19
+
20
+ /* Specifying the `:defined` selector is recommended to style the map
21
+ element, such that styles don't apply when fallback content is in use
22
+ (e.g. when scripting is disabled or when custom/built-in elements isn't
23
+ supported in the browser). */
24
+ mapml-viewer : defined {
25
+ /* Responsive map. */
26
+ max-width : 100% ;
27
+
28
+ /* Full viewport. */
29
+ width : 100% ;
30
+ height : 100% ;
31
+
32
+ /* Remove default (native-like) border. */
33
+ /* border: none; */
34
+ }
35
+
36
+ /* Pre-style to avoid FOUC of inline layer- and fallback content. */
37
+ mapml-viewer : not (: defined )> * {
38
+ display : none;
39
+ }
40
+
41
+ /* Ensure inline layer content is hidden if custom/built-in elements isn't
42
+ supported, or if javascript is disabled. This needs to be defined separately
43
+ from the above, because the `:not(:defined)` selector invalidates the entire
44
+ declaration in browsers that do not support it. */
45
+ layer- {
46
+ display : none;
47
+ }
48
+ </ style >
49
+ < noscript >
50
+ < style >
51
+ /* Ensure fallback content (children of the map element) is displayed if
52
+ custom/built-in elements is supported but javascript is disabled. */
53
+ mapml-viewer : not (: defined )> : not (layer- ) {
54
+ display : initial;
55
+ }
56
+ </ style >
57
+ </ noscript >
58
+ </ head >
59
+
60
+ < body >
61
+ < mapml-viewer projection ="CBMTILE " zoom ="3 " lat ="37.176710163979834 " lon ="-62.070013924549045 " controls >
62
+
63
+ <!-- Layer without a label -->
64
+ < layer- checked >
65
+ < map-meta name ="projection " content ="CBMTILE "> </ map-meta >
66
+ < map-feature zoom ="10 ">
67
+ < map-properties > Layer with no label</ map-properties >
68
+ < map-geometry cs ="gcrs ">
69
+ < map-point >
70
+ < map-coordinates > -75.866089 45.463020</ map-coordinates >
71
+ </ map-point >
72
+ </ map-geometry >
73
+ </ map-feature >
74
+ </ layer- >
75
+
76
+ </ mapml-viewer >
77
+ </ body >
78
+
79
+ </ html >
0 commit comments