-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
3472 lines (3320 loc) · 204 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Map Markup Language</title>
<link rel="preload" as="script" href="https://www.w3.org/Tools/respec/respec-w3c">
<link rel="preload" as="script" href="https://www.w3.org/Tools/respec/respec-highlight">
<link rel="preload" as="script" href="https://www.w3.org/scripts/TR/2016/fixup.js">
<link rel="preload" as="style" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="preload" as="style" href="https://www.w3.org/StyleSheets/TR/2016/cg-draft">
<link rel="preconnect" href="https://respec.org">
<link rel="preconnect" href="https://api.specref.org">
<link rel="icon" href="https://www.w3.org/community/src/templates/wordpress/StoryTeller/favicon.ico" >
<!-- ReSpec config -->
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove" async></script>
<script class="remove">
var respecConfig = {
specStatus: "CG-DRAFT",
latestVersion: null,
editors: [
{
name: "Peter Rushforth",
company: "Natural Resources Canada"
}
],
group: "maps4html",
wgPublicList: "public-maps4html",
edDraftURI: "https://maps4html.org/MapML-Specification/spec/",
copyrightStart: "2015",
github: "https://github.com/Maps4HTML/MapML-Specification/",
xref: "web-platform",
pluralize: true,
localBiblio: {
"MapML.js": {
title: "MapML polyfill",
href: "https://github.com/Maps4HTML/MapML.js",
publisher: "W3C Maps for HTML Community Group"
},
"MAPML-SCHEMA": {
title: "MapML Schema",
href: "https://github.com/Maps4HTML/MapML/tree/gh-pages/schema",
publisher: "Peter Rushforth. W3C Maps for HTML Community Group"
},
"EPSG-REGISTRY": {
title: "EPSG Geodetic Parameter Dataset",
href: "https://epsg.org/home.html",
publisher: "International Association of Oil ans Gas Producers"
},
"MapServer-MapML": {
title: "MS RFC 123: Support for MapML output in MapServer",
href: "https://mapserver.org/development/rfc/ms-rfc-123.html",
publisher: "The Open Source Geospatial Foundation"
},
"GeoServer-MapML": {
title: "GeoServer MapML Extension",
href: "https://docs.geoserver.org/latest/en/user/extensions/mapml/index.html",
publisher: "W3C Maps for HTML Community Group"
},
"GDAL-MapML" : {
title: "GDAL MapML Driver",
href: "https://gdal.org/drivers/vector/mapml.html",
publisher: "The Open Source Geospatial Foundation"
},
"UCR-MapML-Matrix": {
title: "MapML UCR Fulfillment Matrix",
href: "https://maps4html.org/UCR-MapML-Matrix/mapml-ucrs-fulfillment-matrix.html",
publisher: "W3C Maps for HTML Community Group"
}
}
};
respecConfig.otherLinks = [
{
key: "Join the Community Group",
data: [{ value: "Maps for HTML Community Group", href: "https://www.w3.org/community/maps4html/" }]
}
];
</script>
<style>
:root img {
height: auto;
max-width: 100%;
}
:root summary {
cursor: pointer;
}
:root #changes summary,
:root .a11y-details summary {
font-weight: normal;
}
:root #changes details ol[reversed] {
display: flex;
flex-direction: column-reverse;
list-style: none;
}
:root .a11y-details details {
display: inline-block;
}
:root .a11y-details table {
margin: 0;
}
:root .a11y-details tbody th {
font-style: normal;
}
:root caption {
text-align: left;
text-align: start;
padding: .75rem .65rem;
}
:root caption h3,
:root caption h4 {
margin: 0;
}
:root .table-responsive {
overflow: auto;
display: block;
border-collapse: collapse;
}
:root .table-responsive table {
margin: 0;
border-spacing: 0;
border-style: hidden hidden none hidden;
}
:root .table-responsive table th,
:root .table-responsive table.def th {
white-space: nowrap;
padding-left: 0;
}
:root .table-responsive caption {
background: inherit;
padding: 1rem 1.75rem;
}
:root .respec-button-copy-paste {
left: auto;
right: 0;
border: 0;
border-radius: 0;
border-bottom-left-radius: 2px;
}
:root pre.idl.def:not(#actual-idl-index) {
background-color: #edf6ff;
border: 0;
max-width: 100%;
margin-left: -1rem;
overflow-x: hidden;
}
:root .idlInterface {
overflow-x: auto;
display: block;
}
:root pre.idl.def:not(#actual-idl-index) .idlHeader {
background-color: unset;
}
:root h1 {
color: #005a9c;
font-family: sans-serif;
font-size: 220%;
font-weight: bold;
margin: 0 0 .1em;
padding-top: 3rem;
}
:root dl.def dt,
:root dl.def dd {
margin: 0;
}
:root dl.def dt + dd {
margin-top: 0.5em;
}
:root dl.def dd {
margin-left: 1em;
}
:root dl.def dd + dt {
margin-top: 0.75em;
}
:root code,
:root .hljs-deletion,
:root .hljs-name,
:root .hljs-section,
:root .hljs-selector-tag,
:root .hljs-subst {
color: #cf2c2c;
}
:root .hljs-attr,
:root .hljs-number,
:root .hljs-selector-attr,
:root .hljs-selector-class,
:root .hljs-selector-pseudo,
:root .hljs-template-variable,
:root .hljs-type,
:root .hljs-variable {
color: #034575;
}
:root .hljs,
:root .hljs-addition,
:root .hljs-attribute,
:root .hljs-meta-string,
:root .hljs-regexp,
:root .hljs-string {
color: #000;
}
:root caption {
font-size: 100%;
}
:root summary h3 {
display: inline;
vertical-align: middle;
}
@media (max-width: 767px) {
:root div.head h1 {
padding-top: 9rem;
}
}
@media (min-width: 768px) {
:root summary h3 {
margin-left: 1rem;
}
}
:root #references :target {
animation: none;
}
iframe.authoring-example {
border: 0;
max-width: 100%;
}
</style>
</head>
<body>
<h1 id="title">Map Markup Language</h1>
<section id="abstract">
<p>
This specification describes Map Markup Language (MapML), which is an extended subset of HTML, for maps.
MapML extends the semantics of several [[[HTML]]] elements, and specifies a small set of new, mapping-specific
elements, in the HTML namespace ("http://www.w3.org/1999/xhtml").
</p>
<p>MapML is designed to specify a declarative markup vocabulary that specifies some of the capabilities
laid out by the [[[UCR-Web-Maps]]] specification. As capabilities are identified,
they will be discussed in issues until they can be recognized as requirements, designed and subsequently specified
through evolution of this document.
</p>
</section>
<section id="sotd">
<section class="informative">
<h3>Implementation Experience</h3>
<p>
MapML is <a href="#examples">implemented</a> using custom elements by Natural Resources Canada,
which participates in the <a href="https://www.w3.org/community/maps4html/">W3C Maps for HTML
Community Group</a>, as well as the <a href="https://opengeospatial.org/">Open Geospatial Consortium</a>.
It is hoped that other organizations will also implement MapML and contribute their experience back
to the community via the Community Group and <a href="https://github.com/Maps4HTML/MapML">Github</a>.
</p>
<p>Prototype Map Markup Language <a href="https://geogratis.gc.ca/mapml/en/">services</a> are provided by Natural
Resources Canada as part of the Canadian Geospatial Data Infrastructure.</p>
<p>The reader is requested to contact the <a href="mailto:public-maps4html@w3.org">editor</a> with any other
known implementations of Map Markup Language or other implemented support for this proposal.</p>
<p>The customized built-in HTML <code><map></code> element and <code><mapml-viewer></code>
autonomous custom element were built, and are maintained by the Maps for HTML Community Group.
[[MapML.js]]</p>
<p>MapML services are supported by the GeoServer MapML Extension [[GeoServer-MapML]].</p>
<p>MapML is being integrated into MapServer [[MapServer-MapML]].</p>
<p>MapML can be created with the open source Geospatial Data Abstraction Library [[GDAL-MapML]].</p>
</section>
<section class="informative">
<h3>Changes</h3>
<details>
<summary>
Substantial changes to this specification
</summary>
<ol reversed>
<li><time>2018-03-23</time>: Update schema, such as it is (needs more than a schema language can provide e.g. schematron or something like HTML has).</li>
<li><time>2018-03-23</time>: Deprecate <code>input@type</code> <code>xmin</code>, <code>ymin</code>, <code>xmax</code>, <code>ymax</code>, <code>projection</code>.</li>
<li><time>2018-03-23</time>: Remove <code>input@type=search</code> for now (not implemented, nor yet discussed).</li>
<li><time>2018-03-23</time>: Add <code>input@units</code> <code>gcrs</code> keyword.</li>
<li><time>2018-03-23</time>: Extend <code>input@type=position</code> keyword list to be based on CSS object-position property value domain.</li>
<li><time>2018-03-23</time>: Add <code>input@axis</code> <code>latitude</code>, <code>longitude</code> keywords.</li>
<li><time>2018-03-23</time>: Remove reference to <code>link@rel=search</code>, which is not supported.</li>
<li><time>2018-03-23</time>: Update Abstract, status, intent, implementation experience, feedback and Changes sections.</li>
<li><time>2018-03-23</time>: Add <code>link@tcrs</code> attribute.</li>
<li><time>2018-03-23</time>: Add <code>link@rel=style</code> link relation.</li>
<li><time>2018-07-18</time>: Add <code>select</code> element.</li>
<li><time>2018-07-19</time>: Add <code>label</code> element.</li>
<li><time>2018-09-07</time>: Rename <code>link@tcrs</code> to <code>link@projection</code>.</li>
<li><time>2018-09-06</time>: Add "<a href="#link-rel-features"><code>features</code></a>" link relation.</li>
<li><time>2018-10-17</time>: Changes in <code>input@units</code> descriptions about WGS84.</li>
<li><time>2018-10-17</time>: Added an equirectangular tiling schema for WGS84.</li>
<li><time>2018-10-17</time>: Added a table of the different Coordinate System used.</li>
<li><time>2018-10-17</time>: Better connecting TCRS table with <code>input@units</code> values.</li>
<li><time>2019-01-08</time>: Align prose for allowed <code>link@href</code> context with schema.</li>
<li><time>2019-07-02</time>: Fix <a href="https://github.com/Maps4HTML/MapML/issues/43#issuecomment-507018476">issue</a> with description of multi-geometries as being 'two or more', replace with 'One or more'.</li>
<li><time>2019-07-02</time>: Fix <a href="https://github.com/Maps4HTML/MapML/issues/43#issue-428889785">issue</a> with CamelCase of geometry types, replace with lowercase.</li>
<li><time>2019-07-02</time>: Fix <a href="https://github.com/Maps4HTML/MapML/issues/44">issue</a> with inconsistency with GeoJSON multipoint coordinate encoding.</li>
<li><time>2019-07-10</time>: Fix the order of parameters to the LatLng(lat,lng) pseudofunction in the definition of WGS84.</li>
<li><time>2020-07-21</time>: Merge <a href="https://maps4html.org/HTML-Map-Element/spec/">The HTML <map> element proposal</a> into this specification.</li>
<li><time>2020-08-19</time>: Remove <code>rel=search</code> value.</li>
<li><time>2020-08-19</time>: Remove feature <code>type</code> property from IDL.</li>
<li><time>2020-08-19</time>: Add <code>feature</code> element's <code>zoom</code> attribute.</li>
<li><time>2020-08-19</time>: Update <a href="#the-feature-element"><code>feature</code></a> element's content model to reflect implementation.</li>
<li><time>2020-09-28</time>: Add <a href="#attr-mapml-viewer-controlslist"><code>controlslist</code></a> attribute to the <code>map</code> element.
<li><time>2021-03-01</time>: Update abstract to describe where MapML syntax and semantics fit into HTML.</li>
<li><time>2021-03-01</time>: Update <a href="#implementation-experience">Implementation Experience</a>.</li>
<li><time>2021-03-01</time>: Remove MicroXML references, update introduction to id MapML as an extension to HTML.</li>
<li><time>2021-03-01</time>: Add <a href="#the-featurecaption-element"><code>featurecaption</code></a> element.</li>
<li><time>2021-03-15</time>: Add required text for <a href="#dfn-text-mapml"><code>text/mapml</code></a> MIME media type registration with IANA.</li>
<li><time>2021-06-15</time>: Remove the <code>line</code> and <code>marker</code> values of the <code>shape</code> attribute.</li>
<li><time>2021-08-13</time>: Update Categories, Content model and Content attributes of various elements.</li>
<li><time>2021-09-08</time>: Remove <code>HTMLExtentControlsCollection</code> attribute, per <a href="https://github.com/Maps4HTML/MapML/issues/212">#212</a></li>
<li><time>2021-09-08</time>: Remove undefined and unresolved <code>LinkStyle</code> interface reference, per <a href="https://github.com/Maps4HTML/MapML/issues/212">#212</a></li>
<li><time>2021-09-08</time>: Remove <code>legendLinks</code> attribute and interface definition and reference, per <a href="https://github.com/Maps4HTML/MapML/issues/212">#212</a></li>
<li><time>2023-02-24</time>: Remove <code>datalist</code> element and associated input <code>shard</code> and <code>list</code> attributes.
<li><time>2023-03-13</time>: Add <code>layer.zoomTo()</code> method.
<li><time>2023-03-13</time>: Remove <code>nopan</code> from <code>controlslist</code> attribute. Add <code>label</code>, <label>opacity</label>, and <code>checked</code> attributes to <code>extent</code> element
<li><time>2023-05-26</time>: Remove <code>map</code> and <code>area</code> element discussion, to focus on <code>mapml-viewer</code>.
<li><time>2023-05-29</time>: Add <code>map-caption</code> element. Add static attribute to <code>mapml-viewer</code> element. Add <code>noscale</code>, <code>geolocation</code> to controlslist values. Add HTMLMapmlViewerElement methods forward(), back(), reload(), geojson2mapml to WebIDL interface. General edits up to line 928.
<li><time>2023-05-30</time>: Remove discussion of WGS84 from projection attribute definition.
<li><time>2023-06-05</time>: Add initial draft spec for <code>mapml2geojson</code>().
<li><time>2023-06-08</time>: Add initial draft WebIDL for <code>geojson2mapml</code>(). Add prose for <code>back</code>, <code>forward</code>, <code>reload</code>.
<li><time>2023-06-12</time>: Add <code>HTMLGeometryChildElement</code> abstract interface
<li><time>2023-06-29</time>: Update Authoring section. Include definitions of local and remote content.
<li><time>2023-11-05</time>: Correct error in contexts in which <code>extent</code> is found. Add opacity attribute to layer. Update editors. Add WebIDL for <code>layer</code> <code>opacity</code>; Add or update <code>extent</code> attributes for <code>label</code>, <code>checked</code>, <code>hidden</code>, <code>opacity</code> and <code>disabled</code>. Update <code>extent</code> content model to add allowed metadata content for <code>zoom</code> and <code>extent</code>.
<li><time>2024-08-21</time>: Rename Web-Map-Custom-Element repo to MapML.js polyfill
<li><time>2024-10-18</time>: Rename <layer-> custom element to <map-layer>
</ol>
</details>
</section>
</section>
<section id="intro" class="informative">
<h2>Introduction</h2>
<p>
Map Markup Language is a text-based format which allows map authors to encode map information as
hypertext documents exchanged over HTTP [[rfc2616]]. The format is defined using some
characteristics of [[[HTML]]], [[[rfc7946]]], [[[WMS]]], [[[WMTS]]], and other standards as noted.
[[HTML]] [[rfc7946]] [[WMS]] [[WMTS]] Currently, there is only an XHTML syntax of
MapML, that relies on custom elements' standard syntax. In the future,
the intention is to extend the HTML parser to include the definitions of the new
elements, and thereby enable an HTML syntax of MapML, one that is compatible with existing
browsers' HTML parser modes.
</p>
<p>This specification describes a proposed syntax and behavior for a new
HTML mapping widget element, the standard name of which is left undefined
at this time. The tag name of the polyfill custom element of the widget is
<code><mapml-viewer></code>, so that it is not confused with the
existing HTML <a href="https://html.spec.whatwg.org/multipage/image-maps.html#image-map"><code>map</code></a>
element. This naming follows <a href="https://w3ctag.github.io/design-principles/#polyfills">
the recommendation of the W3C Technical Architecture Group</a> [[design-principles]]
by using the custom elements 'namespace' mechanism (hyphenated element names)
to ensure that <a href="https://www.w3.org/2001/tag/doc/polyfills/#risks-of-premature-polyfilling">the
existence of the polyfill will not impede the rollout of a new platform
feature</a>. [[polyfills]] </p>
</section>
<section class="informative">
<h2 id="use-cases-and-requirements">Use Cases and Requirements</h2>
<p>
This document is guided by, and should be
<a href="https://github.com/Maps4HTML/MapML/issues?q=is%3Aissue+is%3Aopen+label%3A%22Requirements+Evaluation%22">evaluated</a>
against the [[[UCR-Web-Maps]]].
</p>
<p>
The polyfill documentation pages for MapML elements contains an evaluation
of the element and the polyfill compared with
<a href="https://maps4html.org/web-map-doc/docs/elements/mapml-viewer/#requirements">
the documented requirements</a> that the particular feature relates to.
</p>
</section>
<section>
<h2 id="web-maps">Web Maps</h2>
<p>
A <dfn>Web map</dfn> is an embedded interactive content widget defined by
the <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element,
in conjunction with any <a href="#the-map-caption-element"><code>map-caption</code></a> and
<a href="#the-layer-element"><code>layer</code></a> element descendants.
A Web map normally represents a region of the earth's surface in two dimensions,
and enables dynamic cartographic Web applications in [[HTML]] documents.
</p>
<section>
<h3 id="web-mapping-elements-and-api">Web mapping elements and API</h3>
<section>
<h4>The <code><<dfn id="the-mapml-viewer-element">mapml-viewer</dfn>></code> element</h4>
<dl class="def"><dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-categories">Categories</a>:</dt>
<dd><a href="https://html.spec.whatwg.org/multipage/dom.html#flow-content-2">Flow content</a>.</dd>
<dd><a href="https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2">Phrasing content</a>.</dd>
<dd><a href="https://html.spec.whatwg.org/multipage/dom.html#palpable-content-2">Palpable content</a>.</dd>
<dd><a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-2">Embedded content</a>.</dd>
<dd><a href="https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2">Interactive content</a>.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-contexts">Contexts in which this element can be used</a>:</dt>
<dd>In <a href="#dfn-local-content">local HTML content</a>, where <a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-2">embedded content</a> is expected.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model">Content model</a>:</dt>
<dd>Zero or more <a href="#the-layer-element"><code>layer</code></a> elements, preceded or followed by zero or one <a href="#the-map-caption-element"><code>map-caption</code></a> elements.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-attributes">Content attributes</a>:</dt>
<dd><a href="https://html.spec.whatwg.org/multipage/dom.html#global-attributes">Global attributes</a>.</dd>
<dd id="attr-mapml-viewer-zoom"><code>zoom</code> — A non-negative integer zoom value.</dd>
<dd id="attr-mapml-viewer-lat"><code>lat</code> — A decimal degrees latitude value for the map center.</dd>
<dd id="attr-mapml-viewer-lon"><code>lon</code> — A decimal degrees longitude value for the map center.</dd>
<dd id="attr-mapml-viewer-projection"><code>projection</code> — A case-sensitive string
<a href="#tiled-coordinate-reference-systems-table">identifier</a> of
the MapML coordinate reference system used by the map. The default if
not present is <a href="#tcrs-OSMTILE"><code>OSMTILE</code></a>.</dd>
<dd id="attr-mapml-viewer-controls"><code>controls</code> — Show user agent controls.</dd>
<dd id="attr-mapml-viewer-controlslist"><code>controlslist</code> — Show/hide specific user agent controls.</dd>
<dd id="attr-mapml-viewer-width"><code>width</code> — Horizontal dimension in pixels.</dd>
<dd id="attr-mapml-viewer-height"><code>height</code> — Vertical dimension in pixels.</dd>
<dd id="attr-mapml-viewer-static"><code>static</code> — Disable map interactivity.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-tag-omission">Tag omission in text/html</a>:</dt>
<dd>Neither tag is omissible.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-accessibility-considerations">Accessibility considerations</a>:</dt>
<dd>
<details class="a11y-details">
<summary>For authors</summary>
<div class="table-responsive">
<table class="def">
<thead>
<tr>
<th>Implicit ARIA semantics</th>
<th>ARIA roles, states and properties which MAY be used</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<code>role=map</code>
</th>
<td>
<p><code>role</code>: <a href="https://www.w3.org/TR/html-aria/#index-aria-application"><code>application</code></a></p>
<p><a href="https://www.w3.org/TR/html-aria/#index-aria-global">Global <code>aria-*</code> attributes</a>
and any <code>aria-*</code> attributes applicable to the allowed roles and implied role (if any).</p>
</td>
</tr>
</tbody>
</table>
</div>
</details>
</dd>
<dd>
<details class="a11y-details">
<summary>For implementers</summary>
<div class="issue" data-number="165"><!-- empty comment to avoid generating more than the GH issue's title --></div>
</details>
</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-dom">DOM interface</a>:</dt>
<dd>
<!-- re: _static below, the property (provisional) name is actually 'static'.
Prefixing a WebIDL attribute name with an _ underscore is supposed to
allow you to use a WebIDL keyword (such as static) as an attribute name:
https://webidl.spec.whatwg.org/#ref-for-dfn-identifier:~:text=(_)%20is%20used%20to%20escape%20an%20identifier%20from%20looking%20like%20a%20reserved%20word -->
<pre class="idl">
[Exposed=Window]
interface HTMLMapmlViewerElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute unsigned short zoom;
[CEReactions] attribute double lat;
[CEReactions] attribute double lon;
[CEReactions] attribute DOMString projection;
[CEReactions] attribute boolean controls;
[SameObject, PutForwards=value] readonly attribute
DOMTokenList controlsList;
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
[CEReactions] attribute boolean _static;
undefined zoomTo( double latitude, double longitude,
optional unsigned short zoom);
undefined back();
undefined forward();
undefined reload();
[NewObject] HTMLLayerElement geojson2mapml( object json,
optional MapMLGenerationOptions options = {} );
};
dictionary MapMLGenerationOptions {
DOMString label = "json.title | json.name | 'Layer'";
FeatureCaptionOptionInterface caption;
FeaturePropertiesOptionInterface properties;
FeatureGeometryOptionInterface geometryFunction;
};
callback CaptionCallback = DOMString (object geojsonFeature);
callback PropertiesCallback = HTMLElement ( object geojsonFeature );
callback GeometryCallback = HTMLGeometryChildElement (
HTMLGeometryChildElement element,
object geojsonFeature );
[Exposed=caption]
interface FeatureCaptionOptionInterface {
stringifier;
attribute DOMString CaptionCallback;
};
[Exposed=properties]
interface FeaturePropertiesOptionInterface {
attribute HTMLElement PropertiesCallback;
};
[Exposed=geometryFunction]
interface FeatureGeometryOptionInterface {
attribute HTMLGeometryChildElement GeometryCallback;
};
</pre>
</dd>
</dl>
<div>
<p id="implementation">The <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a>
element, in conjunction with child <a href="#the-map-caption-element"><code>map-caption</code></a>
and <a href="#the-layer-element"><code>layer</code></a> elements, defines a map media element.</p>
<p>The <a href="#attr-mapml-viewer-zoom"><code>zoom</code></a> content attribute
indirectly identifies an initial scale of the map.</p>
<p>The <a href="#dom-htmlmapmlviewerelement-zoom"><code>zoom</code></a>
IDL attribute must
<a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflect">reflect</a>
the content attribute of the same name.</p>
<p>The <a href="#attr-mapml-viewer-lat"><code>lat</code></a> and <a href="#attr-mapml-viewer-lon"><code>lon</code></a> content attributes locate the initial center of the map.</p>
<p>The <a href="#dom-htmlmapmlviewerelement-lat"><code>lat</code></a> and <a href="#dom-htmlmapmlviewerelement-lon"><code>lon</code></a> IDL attributes must <a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name.</p>
<p class="note"><em>The <a href="#dom-htmlmapmlviewerelement-lat"><code>lat</code></a>, <a href="#dom-htmlmapmlviewerelement-lon"><code>lon</code></a> and <a href="#dom-htmlmapmlviewerelement-zoom"><code>zoom</code></a> attributes have no dynamic effect (they only control the default initial state of the element).</em></p>
<p>The location and zoom level of the map created with the <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element can be dynamically changed via the <a href="#dom-htmlmapmlviewerelement-zoomto"><code>zoomTo()</code></a> API method, which will also change the <a href="#dom-htmlmapmlviewerelement-zoom"><code>zoom</code></a>, <a href="#dom-htmlmapmlviewerelement-lat"><code>lat</code></a> and <a href="#dom-htmlmapmlviewerelement-lon"><code>lon</code></a> attributes.</p>
<p>The <a href="#attr-mapml-viewer-controls"><code>controls</code></a> attribute is a <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If present, it indicates that the author has not provided scripted controls and would like the user agent to provide its own set of controls.</p>
<!-- https://html.spec.whatwg.org/multipage/media.html#user-interface -->
<p>
If the attribute is present,
or if <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-n-noscript">scripting is disabled</a>
for the media element,
then the user agent should
<dfn id="expose-a-user-interface-to-the-user" class="lint-ignore"><strong>expose a user interface to the user</strong></dfn>.
This user interface should include features to
zoom in,
zoom out,
toggle the "on/off" status of layers,
and show the media content in manners more suitable to the user
(e.g. fullscreen map or in an independent resizable window).
Other controls may also be made available.
</p>
<p>The <a href="#dom-htmlmapmlviewerelement-controls"><code>controls</code></a> IDL attribute must <a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name.</p>
<p>The <a href="#attr-mapml-viewer-controlslist"><code>controlslist</code></a> attribute, when specified, helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls.
Its value must be an <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a> that are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>.
<p>The <a href="#dom-htmlmapmlviewerelement-controlslist"><code>controlsList</code></a> IDL attribute must <a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflect">reflect</a> the value of the <a href="#attr-mapml-viewer-controlslist"><code>controlslist</code></a> content attribute.</p>
<p>The <a href="https://dom.spec.whatwg.org/#concept-supported-tokens">supported tokens</a> for <a href="#dom-htmlmapmlviewerelement-controlslist"><code>controlsList</code></a>'s <a href="https://dom.spec.whatwg.org/#interface-domtokenlist">DOMTokenList</a> are the allowed values of the <a href="#attr-mapml-viewer-controlslist"><code>controlslist</code></a> attribute and supported by the user agent. The allowed values are
<a href="#attr-mapml-viewer-controlslist-nofullscreen"><code>nofullscreen</code></a>,
<a href="#attr-mapml-viewer-controlslist-nolayer"><code>nolayer</code></a>,
<a href="#attr-mapml-viewer-controlslist-noreload"><code>noreload</code></a>,
<a href="#attr-mapml-viewer-controlslist-nozoom"><code>nozoom</code></a>,
<a href="#attr-mapml-viewer-controlslist-noscale"><code>noscale</code></a>, and
<a href="#attr-mapml-viewer-controlslist-geolocation"><code>geolocation</code></a>.
</p>
<p>The <dfn id="attr-mapml-viewer-controlslist-nofullscreen"><code>nofullscreen</code></dfn> keyword hints that the fullscreen mode control should be hidden when using the user agent's own set of controls for the media element.</p>
<p>The <dfn id="attr-mapml-viewer-controlslist-nolayer"><code>nolayer</code></dfn> keyword hints that the layer control should be hidden when using the user agent's own set of controls for the media element.</p>
<p>The <dfn id="attr-mapml-viewer-controlslist-noreload"><code>noreload</code></dfn> keyword hints that the reload control should be hidden when using the user agent's own set of controls for the media element.</p>
<p>The <dfn id="attr-mapml-viewer-controlslist-nozoom"><code>nozoom</code></dfn> keyword hints that the zoom controls should be hidden when using the user agent's own set of controls for the media element.</p>
<p>The <dfn id="attr-mapml-viewer-controlslist-noscale"><code>noscale</code></dfn> keyword hints that the scalebar control should be hidden when using the user agent's own set of controls for the media element.</p>
<p>The <dfn id="attr-mapml-viewer-controlslist-geolocation"><code>geolocation</code></dfn>
keyword hints that a control to allow the user to enable client-side representation
of the user agent's location should be presented. Triggering the control
should invoke an interaction to obtain a time-limited
<a href="https://www.w3.org/TR/permissions/#dfn-express-permission">express
permission</a> [[permissions]] to display the user agent's location on the viewer.</p>
<p class="note"><em>Hiding these aspects of the user agent's own controls does not necessarily disable the related functionality. For example, the user agent might present the same functionality through a context menu or keyboard shortcut.</em></p>
<p>A user agent MAY ignore the author's preference when it makes sense.</p>
<p class="note">A user agent might ignore the <a href="#attr-mapml-viewer-controlslist-nofullscreen"><code>nofullscreen</code></a> keyword if the content area containing the map is small, such as on a mobile device.</p>
<p>The <a href="#attr-mapml-viewer-projection" class="lint-ignore"><code>projection</code></a>
attribute value identifies the tiled coordinate reference system for
the <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a>
and the fallback tiled coordinate reference system for its content
<a href="the-layer-element"><code>layer</code></a> elements.
Layers share the projection declared by their parent
<a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a>
either by using the fallback <a href="#attr-mapml-viewer-projection"><code>
projection</code></a> value from the parent, or via an optional child
<a href="#the-meta-element"><code>meta</code></a>
element specifying the <code>projection</code> via that element's
<code>name</code> and <code>content</code> attribute values.
The default value of the <a href="#attr-mapml-viewer-projection"><code>
projection</code></a>, if the content attribute is not present, is
<a href="#tcrs-OSMTILE"><code>OSMTILE</code></a>.
The complete set of defined tiled coordinate reference systems can be found in the
<a href="#tiled-coordinate-reference-systems-table">Tiled Coordinate Reference Systems</a> table.
</p>
<p>The <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element supports the <a href="#attr-mapml-viewer-width"><code>width</code></a> and <a href="#attr-mapml-viewer-height"><code>height</code></a> <a href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#dimension-attributes">dimension attributes</a>. [[HTML]]</p>
<p>The <a href="https://drafts.csswg.org/css-images/#default-object-size">default object size</a> is a width of 300 <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a> and a height of 150 <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. [[css-images-3]]</p>
<p>
The <a href="#dom-htmlmapmlviewerelement-back"><code>back</code></a>,
<a href="#dom-htmlmapmlviewerelement-forward"><code>forward</code></a>
and <a href="#dom-htmlmapmlviewerelement-reload"><code>reload</code></a>
operations allow the manipulation of the <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a>'s
viewport history stack. Each time the <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a>'s viewport
comes to rest, its location (center coordinates and zoom level) is pushed
onto the viewport history stack.
The <a href="#dom-htmlmapmlviewerelement-back"><code>back</code></a>
operation will go back (down the stack) one increment in the viewport
history stack.
The <a href="#dom-htmlmapmlviewerelement-forward"><code>forward</code></a>
operation will go forward (up the stack) by one increment, if there are
more recent viewport locations on the stack. The viewport history content
is erased, having all its entries deleted,
through the <a href="#dom-htmlmapmlviewerelement-reload"><code>reload</code></a>
operation. The state of the viewport history stack is reflected by the
interactive or disabled state of the Forward, Back and Reload viewer
context menu items, as well as by the interactive state of the viewer
reload control button.
</p>
<p>
The <a href="#dom-htmlmapmlviewerelement-geojson2mapml"><code>geojson2mapml</code></a>
operation transcribes a GeoJSON [[rfc7946]]
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.3">FeatureCollection</a> or
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">Feature</a>
object into a <a href="#the-layer-element"><code>layer</code></a> element.
<a href="#dom-htmlmapmlviewerelement-geojson2mapml"><code>geojson2mapml</code></a>
accepts two arguments: the required JSON object, conforming to a GeoJSON [[rfc7946]]
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.3">FeatureCollection</a> or
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">Feature</a>,
and an optional dictionary object of options.
<a href="#dom-htmlmapmlviewerelement-geojson2mapml"><code>geojson2mapml</code></a>
creates and adds a <a href="#the-layer-element"><code>layer</code></a> element as the last
child of the <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element on which
it is invoked. The created <a href="#the-layer-element"><code>layer</code></a>
element contains one <a href="#the-feature-element"><code>feature</code></a>
element for each GeoJSON [[rfc7946]] <a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">Feature</a> from the input JSON object.
</p>
<section>
<h5 id="mapml2geojson-options">mapml2geojson options</h5>
<p>
The <a href="#dom-mapmlgenerationoptions"><code>label</code></a> option
specifies the title of the output <code>layer</code> element. The
default used will be, in order of preference, the
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-6.1">name</a>
foreign member value, the <a href="https://www.rfc-editor.org/rfc/rfc7946#section-6.1">title</a>
foreign member value of the FeatureCollection or Feature object, or the fixed
<code>'Layer'</code> DOMString value.
</p>
<p>
The <a href="#dom-mapmlgenerationoptions-caption"><code>caption</code></a> option specifies the source
of the output <a href="#the-featurecaption-element"><code>featurecaption</code></a> value for
each output <a href="#the-feature-element"><code>feature</code></a>.
If <a href="#dom-mapmlgenerationoptions-caption"><code>caption</code></a>
is set to a DOMString value, that value will be sought as the name of
a <a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">properties</a>
member, the value of which property will be used as the output
<a href="#the-featurecaption-element"><code>featurecaption</code></a>.
If no such <a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">properties</a>
member exists, the fixed DOMString value itself will be used as
the output <a href="#the-featurecaption-element"><code>featurecaption</code></a> value.
If <a href="#dom-mapmlgenerationoptions-caption"><code>caption</code></a>
is set to a function value matching <a href="#dom-captioncallback"><code>CaptionCallback</code></a>,
that function will be called for each output <a href="#the-feature-element"><code>feature</code></a>,
and its return DOMString value will be used as the <a href="#the-feature-element"><code>feature</code></a>s'
<a href="#the-featurecaption-element"><code>featurecaption</code></a>
value.
If no <a href="#dom-mapmlgenerationoptions-caption"><code>caption</code></a> value is provided, the
default source of <a href="#the-featurecaption-element"><code>featurecaption</code></a> in output
<a href="#the-feature-element"><code>feature</code></a> elements will be, in order of preference,
the <a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">Feature</a>
object's <a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">id</a> member, it's <a href="https://www.rfc-editor.org/rfc/rfc7946#section-6.1">name</a>
foreign member value, or its <a href="https://www.rfc-editor.org/rfc/rfc7946#section-6.1">title</a>
foreign member value.
</p>
<p>
The <a href="#dom-mapmlgenerationoptions-properties"><code>properties</code></a>
option specifies how GeoJSON [[rfc7946]]
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">Feature</a>s'
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">properties</a>
members are mapped to the <a href="#the-properties-element"><code>
properties</code></a> element content. It accepts a callback function
value. The default function, if no <a href="#dom-mapmlgenerationoptions-properties">
<code>properties</code></a> option is set, maps input
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">Feature</a>
member <a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">properties</a> members
to a two-column HTML table element, corresponding to the following
Relax NG compact syntax grammar:
</p>
<pre>
default namespace = "http://www.w3.org/1999/xhtml"
namespace a = "http://relaxng.org/ns/compatibility/annotations/1.0"
start =
element table {
element thead {
element tr {
element th {
attribute role {
## The value of the role attribute is set to "columnheader",
## designating the meaning of contained cell text ("Property name")
## as a column header value
text
},
attribute scope {
## The value of the scope attribute is set to "col",
## designating that what is contained in corresponding table cells
## as a column value of the "Property name" column.
text
},
## The en value of this th is set to "Property name".
## This string shall be localized to the locale of the user agent.
text
},
element th {
attribute role {
## The value of the role attribute is set to "columnheader",
## designating the meaning of contained table text
## as a column header value
text
},
attribute scope {
## The value of the scope attribute is set to "col",
## designating that what is contained is a column value.
text
},
## The en value of this th is set to "Property value".
## This string shall be localized to the locale of the user agent.
text
}
}
},
element tbody {
element tr {
element th {
attribute scope {
## The value of the scope attribute is set to "row",
## designating this as a table data row
text
},
## The text value of this cell is set to the properties'
## property member name from the input Feature
text
},
element td {
attribute itemprop {
## The text value of the itemprop attribute is set to the
## properties' property member name from the input Feature
text
},
## The text value of this cell is set to the value of the GeoJSON
## properties' property member from the input Feature
text
}
}
}
}
</pre>
<p>
The <a href="#dom-mapmlgenerationoptions-geometryfunction"><code>
geometryFunction</code></a> option allows control over the
output <a href="#the-geometry-element"><code>geometry</code></a>
element content. The default function transcribes the
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">GeoJSON [[rfc7946]]
Feature member's geometry value</a> to the corresponding <a href="#the-geometry-element">
<code>geometry</code></a> <a href="#geometry-child-elements">child element</a>.
The <a href="#dom-geometrycallback"> function</a> receives two
arguments: the default <a href="#the-geometry-element"><code>geometry</code></a>
<a href="#geometry-values">child element</a> calculated that represents
the input <a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">
GeoJSON [[rfc7946]] Feature's geometry</a> <a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.1">member
value</a>, and the input <a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">
GeoJSON Feature object</a>. The function returns a
<a href="#the-geometry-element"><code>geometry</code></a>
<a href="#geometry-child-elements">child element</a>.
</p>
</section>
</div>
</section>
<section>
<h4>The <code><<dfn id="the-map-caption-element">map-caption</dfn>></code> element</h4>
<dl class="def">
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-categories">Categories</a>:</dt>
<dd>None.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-contexts">Contexts in which this element can be used</a>:</dt>
<dd>In <a href="#dfn-local-content">local HTML content</a>, as the first or last child of a <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model">Content model</a>:</dt>
<dd><a href="https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2">Phrasing content</a>.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-attributes">Content attributes</a>:</dt>
<dd><a href="https://html.spec.whatwg.org/multipage/dom.html#global-attributes">Global attributes</a>.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-tag-omission">Tag omission in text/html</a>:</dt>
<dd>Neither tag is omissible.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-accessibility-considerations">Accessibility considerations</a>:</dt>
<dd>
<details class="a11y-details">
<summary>For authors</summary>
<div class="table-responsive">
<table class="def">
<thead>
<tr>
<th>Implicit ARIA semantics</th>
<th>ARIA roles, states and properties which MAY be used</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding <code>role</code></a>
</th>
<td>
<p><strong>No <code>role</code> or <code>aria-*</code> attributes</strong>.</p>
</td>
</tr>
</tbody>
</table>
</div>
</details>
</dd>
<dd>
<details class="a11y-details">
<summary>For implementers</summary>
<div class="issue" data-number="165"><!-- empty comment to avoid generating more than the GH issue's title --></div>
</details>
</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-dom">DOM interface</a>:</dt>
<dd>Uses <a href="https://html.spec.whatwg.org/multipage/dom.html#htmlelement">HTMLElement</a>.</dd>
</dl>
<p>The <a href="#the-map-caption-element"><code>map-caption</code></a> element
allows the HTML author to assign an accessible name to a map viewer. If the
viewer is part of a generic mapping application that allows the user to
navigate any location in the world, a location-specific <code>map-caption</code>
may not be appropriate, and a more generic caption may be necessary.</p>
<p>In other situations, the <code>map-caption</code> element allows the
author to describe the central reason for the map. Often that reason is a
combination of a location and a theme.</p>
</section>
<section>
<h4>The <code><<dfn id="the-layer-element">layer</dfn>></code> element</h4>
<dl class="def">
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-categories">Categories</a>:</dt>
<dd>None.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-contexts">Contexts in which this element can be used</a>:</dt>
<dd>In <a href="#dfn-local-content">local HTML content</a>, as a child of the <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model">Content model</a>:</dt>
<dd>If the <a href="#attr-layer-src"><code>src</code></a> attribute is present: <a href="https://html.spec.whatwg.org/multipage/dom.html#concept-content-nothing">Nothing</a>.
If no <a href="#attr-layer-src"><code>src</code></a> attribute is present:
<a href="https://html.spec.whatwg.org/multipage/dom.html#metadata-content-2">Metadata content</a> describing nested <a href="#structure">Map Markup Language</a> content.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-attributes">Content attributes</a>:</dt>
<dd><a href="https://html.spec.whatwg.org/multipage/dom.html#global-attributes">Global attributes</a>.</dd>
<dd id="attr-layer-src"><code>src</code> — The URL of the layer resource.</dd>
<dd id="attr-layer-label"><code>label</code> — A label for the layer in the layer control,
if the layer is not <a href="#attr-layer-hidden"><code>hidden</code></a>. The map author's <a href="#the-title-element"><code>title</code></a> element takes precedence over <code>label</code>, if available.</dd>
<dd id="attr-layer-checked"><code>checked</code> — Turn the layer on/off dynamically on the map. </dd>
<dd id="attr-layer-hidden"><code>hidden</code> — Visibility status of the layer in the layer control. Does not affect visibility of the layer on the map.</dd>
<dd id="attr-layer-opacity"><code>opacity</code> — An initial opacity value which is reflected to the exposed user interface in the layer control for opacity. Opacity values have a decimal range from 0 (transparent) to 1.0 (opaque)</dd>
<dd id="attr-layer-referrerpolicy"><code>referrerpolicy</code> — <a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy">Referrer policy</a> for <a href="https://fetch.spec.whatwg.org/#concept-fetch">fetches</a> initiated by the element.</dd>
<dd id="attr-layer-crossorigin"><code>crossorigin</code> — A <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attribute">CORS settings attribute</a>, specifies how the element handles crossorigin requests.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-tag-omission">Tag omission in text/html</a>:</dt>
<dd>Neither tag is omissible.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-accessibility-considerations">Accessibility considerations</a>:</dt>
<dd>
<details class="a11y-details">
<summary>For authors</summary>
<div class="table-responsive">
<table class="def">
<thead>
<tr>
<th>Implicit ARIA semantics</th>
<th>ARIA roles, states and properties which MAY be used</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding <code>role</code></a>
</th>
<td>
<p><strong>No <code>role</code> or <code>aria-*</code> attributes</strong>.</p>
</td>
</tr>
</tbody>
</table>
</div>
</details>
</dd>
<dd>
<details class="a11y-details">
<summary>For implementers</summary>
<div class="issue" data-number="165"><!-- empty comment to avoid generating more than the GH issue's title --></div>
</details>
</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-dom">DOM interface</a>:</dt>
<dd>
<pre class="idl">
[Exposed=Window]
interface HTMLLayerElement : HTMLElement {
[HTMLConstructor] constructor();
attribute DOMString <a href="#attr-layer-src">src</a>;
attribute DOMString <a href="#attr-layer-label">label</a>;
attribute boolean <a href="#attr-layer-checked">checked</a>;
readonly attribute boolean <a href="#attr-layer-disabled">disabled</a>;
attribute boolean <a href="#attr-layer-hidden">hidden</a>;
attribute double <a href="attr-layer-opacity">opacity</a>;
attribute DOMString <a href="#attr-layer-referrerpolicy">referrerPolicy</a>;
attribute DOMString? <a href="#attr-layer-crossorigin">crossOrigin</a>;
undefined zoomTo();
object? mapml2geojson(optional GeoJSONGenerationOptions options = {});
};
dictionary GeoJSONGenerationOptions {
object propertyFunction;
boolean transform = true;
};
callback propertyFunction = object ( HTMLPropertiesElement properties); <!-- https://webidl.spec.whatwg.org/#idl-callback-functions -->
</pre>
</dd>
</dl>
<p>The <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element displays its child <a href="#the-layer-element"><code>layer</code></a> elements similarly to (partially) transparent "acetate" layers on a (paper) map. The layers follow the <a href="https://www.w3.org/TR/SVG/render.html#PaintersModel">painters model</a>, whereby
<a href="#the-layer-element"><code>layer</code></a> elements are displayed on top of previous siblings according to their document order. <a href="#the-layer-element"><code>layer</code></a> transparency is controlled by the <a href="attr-layer-opacity">opacity</a> attribute.</p>
<p>In contrast to the <a href="https://html.spec.whatwg.org/multipage/media.html#media-element">HTML media elements' <code>source</code></a> child element where a single
<a href="https://html.spec.whatwg.org/multipage/media.html#media-element"><code>source</code></a> element is selected by the user agent for play, the <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element's child <a href="#the-layer-element"><code>layer</code></a> elements are
visually combined with sibling <a href="#the-layer-element"><code>layer</code></a> elements and presented by the parent <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element as a pan-able, zoom-able two-dimensional image.
The display state (on / off) of the content represented by the <a href="#the-layer-element"><code>layer</code></a> element is controlled by
the <a href="#attr-layer-checked"><code>checked</code></a> boolean attribute and corresponding property. If checked, the <a href="#the-layer-element"><code>layer</code></a> is drawn on the map in the sequence it is found in the parent element; if not <a href="#attr-layer-checked"><code>checked</code></a>
the <a href="#the-layer-element"><code>layer</code></a> is not drawn but should remain visible in the <a href="#the-mapml-viewer-element"><code>mapml-viewer</code></a> element's representation of <code>controls</code> in an "unchecked" state.</p>
<p>The <a href="#attr-layer-src"><code>src</code></a> attribute value is the URL of a web resource encoded in <a href="#structure">Map Markup Language</a>.</p>
<p>The <a href="#attr-layer-hidden"><code>hidden</code></a> boolean attribute can be set to remove the <a href="#the-layer-element"><code>layer</code></a> from the <em>map layer control, but it will remain displayed on the map</em>. In order to
remove the <a href="#the-layer-element"><code>layer</code></a> from the map display, it can have its <a href="#attr-layer-checked"><code>checked</code></a> property toggled, or be removed from the DOM.</p>
<p>The <a href="#attr-layer-label"><code>label</code></a> attribute sets
a fallback value for the
<a href="https://www.w3.org/TR/accname/#dfn-accessible-name">accessible name</a>
[[accname-1.1]] of the layer as represented in the user agent's representation of map
viewer <a href="#the-mapml-viewer-element"><code>controls</code></a>.
The fallback <a href="#attr-layer-label"><code>label</code></a>
value is used as the <a href="https://www.w3.org/TR/accname/#dfn-accessible-name">accessible name</a>
[[accname-1.1]] of the layer if the map document author has not supplied
a non-empty <a href="#the-title-element"><code>title</code></a> element
value in the <a href="#the-layer-element"><code>layer</code></a> content.
The <a href="#dom-htmllayerelement-label"><code>label</code></a> IDL
attribute must <a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflect">reflect</a>
the <a href="#attr-layer-label"><code>label</code></a> content attribute.</p>
<p>The <a href="#dom-htmllayerelement-disabled"><code>disabled</code></a> property is a read-only boolean indicator of the visibility of the layer on the map. If the layer is not visible due to errors, including projection,
zoom or extent mismatch, the property will be true and if the layer is present in the layer control (i.e. <a href="#attr-layer-hidden"><code>hidden</code></a> is false), it will be disabled in that control i.e. not checkable.</p>
<p>The location and zoom level of the map can be changed via the <a href="#dom-htmllayerelement-zoomto"><code>layer</code>.<code>zoomTo()</code></a> API method.</p>
<p>A layer's features may be converted to a GeoJSON-encoded feature collection [[rfc7946]]
with the <a href="#dom-htmllayerelement-mapml2geojson">mapml2geojson
method</a>. The method accepts parameters via the
<a href="#dom-htmllayerelement-mapml2geojson">dictionary-valued <code>options</code>
parameter</a>. Options include a <a href="https://webidl.spec.whatwg.org/#idl-callback-functions">callback</a>
function, passed as the value of the
<a href="#dom-geojsongenerationoptions-propertyfunction"><code>propertyFunction</code></a>
option, which accepts a single <a href="#the-properties-element"><code>properties</code></a>
element argument. The
<a href="#dom-geojsongenerationoptions-propertyfunction"><code>propertyFunction</code></a>
will be invoked once for each feature in the layer, and the value of
the argument passed to it will be the
<a href="#the-properties-element"><code>properties</code></a> element
child of the currently-processing
<a href="#the-feature-element"><code>feature</code></a> element. If
no <a href="#dom-geojsongenerationoptions-propertyfunction"><code>propertyFunction</code></a>
option is supplied, a default mapping of properties content to the
<a href="https://www.rfc-editor.org/rfc/rfc7946#section-3.2">GeoJSON "properties" member</a>
will be attempted, which may produce imperfect output, depending on the
structure of the <a href="#the-properties-element"><code>properties</code></a>
element that is passed. The default
<a href="#dom-geojsongenerationoptions-propertyfunction"><code>propertyFunction</code></a>
attempts to reverse an HTML table that would be generated by the
<a href="#dom-htmlmapmlviewerelement-geojson2mapml"><code>geojson2mapml</code></a>
function. If the input <a href="#the-properties-element"><code>properties</code></a>
element does not conform to that structure, incorrect output MAY result.
</p>
<p>
The <a href="#dom-geojsongenerationoptions-transform"><code>transform</code></a> option,
allows the author to prevent or trigger the reverse projection transformation of
the coordinates of feature geometries when converting to the GeoJSON
[[rfc7946]] format.
</p>
<p>
<a href="#the-coordinates-element"><code>coordinates</code></a> element contents are
encoded according to the coordinate system specified by the <a href="#the-geometry-element"><code>geometry</code></a>
element <a href="#attr-geometry-cs"><code>cs</code></a> attribute, or
the relevant document context fallback coordinate system.
</p>
<p>
If the input <a href="#the-feature-element"><code>feature</code></a>
<a href="#the-geometry-element"><code>geometry</code></a> element's
<a href="#the-coordinates-element"><code>coordinates</code></a> elements
are in a non-<a href="#coordinate-reference-system-type-codes-and-descriptions"><code>gcrs</code></a>
coordinate system, if the <a href="#dom-geojsongenerationoptions-transform"><code>transform</code></a> option value supplied
is <code>true</code> (the default), the <a href="#the-coordinates-element"><code>coordinates</code></a>