1
1
<h1 >The MapML (Map Markup Language) explainer</h1 >
2
2
3
- Specification : https://maps4html.org/MapML/spec/
3
+ Draft spec : https://maps4html.org/MapML/spec/
4
4
5
- <h2 >Author</h2 >
5
+ <h2 >Author(s) </h2 >
6
6
7
- Peter Rushforth
7
+ Peter Rushforth, Natural Resources Canada
8
+ Aliyan Haq, Natural Resources Canada
8
9
9
10
<h2 >Participate</h2 >
10
11
11
12
The W3C [ Maps for HTML Community Group] ( https://www.w3.org/community/maps4html/ )
12
13
is iterating on the problem space.
13
14
You can contribute to the on-going discussion and documentation of
14
15
[ Use Cases and Requirements for Standardizing Web Maps] ( https://maps4html.org/HTML-Map-Element-UseCases-Requirements/ ) .
15
- Alternatively, if your organization is a member of the
16
- [ Web Platform Incubator Community Group] ( https://www.w3.org/community/WICG/ ) (WICG)
17
- and you are able to contribute there but not elsewhere,
18
- please consider contributing through the [ WICG forum on Web mapping] ( https://discourse.wicg.io/c/web-mapping/22 ) .
19
- We would love to hear from you.
20
16
21
17
[ Issue tracker for this explainer] ( https://github.com/Maps4HTML/MapML-Proposal/issues )
22
18
23
19
<h2 id =" introduction " >Introduction</h2 >
24
20
25
- Web maps are a well-established class of Web application, and there exist popular,
26
- mature open- and closed-source JavaScript frameworks to create and manage Web maps.
27
- Web maps, considered from the perspective of the Extensible Web Manifesto, represent
28
- a “high-level API”. The many low-level browser APIs already used by the popular
29
- JavaScript mapping frameworks demonstrate that Web maps may be a good fit for
30
- inclusion into the Web platform standards at this time.
21
+ We propose to extend the Web platform with HTML primitives that implement map and
22
+ location semantics. We call the proposed HTML extension "MapML".
31
23
32
- MapML is the declarative API that results from our community’s effort to abstract
33
- and polyfill Web mapping requirements as custom elements, using one of the mature
34
- open source Web mapping frameworks so as to not have to start “from scratch”.
35
- The process of polyfilling Web maps as MapML has also identified missing low-level
36
- platform APIs that will be essential to complete the implementation of Web maps
37
- as a standard platform feature.
24
+ The core idea is to easily enable web developers to create map viewports on a web
25
+ page that are georeferenced, and into which HTML map content may be added in
26
+ declarative fashion, and manipulated or accessed using the DOM.
27
+
28
+ The map viewport is a rectangular window in a web page in which "real-world"
29
+ coordinate reference systems are used, and viewport-to-real-world scales may be
30
+ used for positioning and styling of HTML map content. The geometric or mathematical
31
+ relationship between the viewport and the "real world" is provided and managed by
32
+ the browser, especially by the browser rendering engine.
33
+
34
+ MapML Polyfill
35
+
36
+ We have developed a polyfill for MapML, using custom elements,
37
+ in which we've tried to follow platform advice. The user documentation for the
38
+ polyfill is [ available online here] ( https://maps4html.org/web-map-doc/ ) .
39
+
40
+ In some cases, existing HTML elements have a required common function, so we have
41
+ proposed to extend those elements with new attributes, properties, events and
42
+ behavior.
43
+
44
+ In other cases, there is a need for an entirely new element or element group,
45
+ e.g. <map-extent >
46
+
47
+ The polyfill is implemented especially using autonomous custom elements.
48
+ Many of our polyfill's custom elements use the 'map-' namespace prefix. In all
49
+ cases where we propose to extend a current native HTML element, we have created
50
+ an autonomous custom element named 'map-'whatever e.g. <map-link > We were forced
51
+ to do this because of the lack of interoperability of customized built-in elements.
38
52
39
53
<h2 >Contents</h2 >
40
54
41
- - [ The Problem] ( #the-problem )
55
+ - [ Introduction] ( #introduction )
56
+ - [ Motivation] ( #motivation )
42
57
- [ The Proposal] ( #the-proposal )
43
58
- [ Goals] ( #goals )
44
59
- [ Use Cases and Requirements] ( #use-cases-and-requirements )
45
60
- [ Key Scenarios] ( #key-scenarios )
46
- - [ Detailed design discussion] ( #detailed-design-discussion )
47
61
- [ Considered Alternative Designs of MapML] ( #considered-alternative-designs-of-mapml )
48
- - [ Stakeholder Feedback / Opposition ] ( #stakeholder-feedback--opposition )
62
+ - [ Stakeholder Feedback] ( #stakeholder-feedback )
49
63
- [ References and Acknowledgements] ( #references-and-acknowledgements )
50
64
51
- <h2 id =" the-problem " >The Problem</h2 >
52
-
53
- Web maps are <span style =" text-decoration :underline ;" >not interoperable</span >.
54
- For example, users cannot “mash up” a Leaflet map and an OpenLayers map, two of
55
- the most popular open source Web mapping frameworks, even if they show the same
56
- exact data source in the exact same location. (The situation is even more
57
- non-interoperable between open map data and privately managed map databases,
58
- where the sole client may be that provided by the owner of the map data. The
59
- lack of legal interoperability of map data is outside the scope of standardization.)
60
-
61
- The lack of Web map interoperability affects developers. The skill set and
62
- vocabulary required to create a robust map is different from one mapping framework
63
- to the next. They can be complex to <span style =" text-decoration :underline ;" >create</span >,
64
- with visual styling of map information being a discipline that is generally
65
- outside the realm of Web technology, and different from one mapping framework to
66
- the next.
67
-
68
- Web maps are [ typically not accessible] ( https://github.com/Malvoz/web-maps-wcag-evaluation/blob/master/README.md ) .
69
- The knowledge required to <span style =" text-decoration :underline ;" >use</span > Web
65
+ <h2 id =" motivation " >Motivation</h2 >
66
+
67
+ Web maps are a widespread and important, not to say essential, feature of the modern
68
+ web. Maps occur on 16% of web pages, and 22% of web maps contain interactive
69
+ representations of places (aka "features"). The number of maps on web pages exceeds
70
+ that of other media types, including \< video> and YouTube embeds [ 1] ( #references-and-acknowledgements ) .
71
+
72
+ Web maps are <span style =" text-decoration :underline ;" >not interoperable</span >.
73
+ Maps from one provider cannot be readily combined with maps from another provider,
74
+ and even when such mashups are technically feasible due to adherence of the provider
75
+ to server interoperability standards, such as the widely implemented OGC web
76
+ service standards, barriers on the client will often prevent information re-use.
77
+
78
+ In many cases, client barriers exist because the map information is represented
79
+ as (JavaScript) code, providing a noteworthy exemplar of the rationale behind the Rule
80
+ of Least Power [ 2] ( #references-and-acknowledgements ) . For example, users cannot
81
+ “mash up” a Leaflet map and an OpenLayers map, two of the most popular open source
82
+ Web mapping frameworks, even if they show the exact same data source in the exact
83
+ same location.
84
+
85
+ The situation becomes even less interoperable between open map data and privately
86
+ managed map databases, where the sole client (also in JavaScript) may be that provided
87
+ by the owner of the map data. Although the lack of legal interoperability of map
88
+ data is outside the scope of standardization, it should be technically feasible
89
+ to create a client Web map interoperability standard that lowers or eliminates
90
+ the technical barriers for map developers who wish to have and to provide choices to
91
+ their users based on standards. If a web standard for maps existed, it might reduce
92
+ the financial incentives to create proprietary barriers to map re-use in the same
93
+ way that publishing textual information on the Web has reduced the incentive to
94
+ create proprietary document management and publishing technology.
95
+
96
+ The representation of maps-as-code also leads to a problem of resource discovery.
97
+ The location of information is often relevant for search results, demonstrated by
98
+ the fact that many web search engines expose (virtual) map tab in which to visualize
99
+ search results on a map. If the location of web page information was organically
100
+ exposed as declarative standard markup (and not as code), it would (in principle)
101
+ be possible for any web crawler to create location-enabled full text indexes of
102
+ the web, which might reasonably be useful for search relevance ranking and improved,
103
+ or at least, more open resource discovery.
104
+
105
+ The lack of Web map interoperability also affects web developers. The skill set
106
+ required to create a robust map is different from one mapping framework to the
107
+ next, especially with regard to feature styling. Maps can be complex to
108
+ <span style =" text-decoration :underline ;" >create</span >, with visual styling of map
109
+ information being a discipline that today is generally outside the scope of Web
110
+ technology (CSS can't be applied), and is different from one mapping framework
111
+ to the next. Ideally, it would be possible for developers to apply their existing
112
+ knowledge of CSS, HTML and SVG to maps and location information problems.
113
+
114
+ Web maps are [ often inaccessible] ( https://github.com/Malvoz/web-maps-wcag-evaluation/blob/master/README.md ) .
115
+ For users, the skills required to <span style =" text-decoration :underline ;" >use</span > Web
70
116
maps is different for each framework, with resulting accessibility challenges
71
- arising from inconsistencies in user experience across frameworks.
72
-
73
- Location information is <span style =" text-decoration :underline ;" >not searchable</span >,
74
- except through specialized portals. Web maps are not crawlable; even if the JavaScript
75
- that creates a Web map is executed by a crawler, the resulting DOM requires a
76
- sighted user to interpret it, because it only has visual semantics. The DOM created
77
- also varies from framework to framework. As a result, users cannot search for
78
- location information, embedded as it is in program code, except in specialized
79
- mapping portals. Location search may be even more important for non-visual users
80
- especially in a mobile context, but it is impossible because of today’s Web mapping
81
- frameworks.
117
+ arising from inconsistencies in user experience across frameworks. Users have
118
+ no standardized ability to express accessibility preferences that relate to
119
+ map content or controls.
82
120
83
121
<h2 id =" the-proposal " >The Proposal</h2 >
84
122
85
- The proposal is to create accessible, searchable and usable Web maps, by integrating
86
- mapping elements into HTML supported by the CSS and DOM standards.
123
+ Please review the [ user documentation ] ( https://maps4html.org/web-map-doc/docs/ )
124
+ for the polyfill declarative syntax and semantics, with examples.
87
125
88
- This extension to HTML would create a ` <map>/<mapmlviewer>* ` viewer widget
89
- that contains default controls in a user agent shadow root, (similar to ` <video> `
90
- today), with child ` <layer> ` elements which are light DOM, which may either
91
- refer to remote map source or contain map-related markup (the vocabulary of which
92
- is also part of this proposal):
126
+ This extension to HTML would create a map viewer widget similar to ` <video> ` ,
127
+ with child ` <layer-> ` elements in light DOM. Layers either
128
+ refer to remote map data source or contain map-related markup inline / in the
129
+ element's content:
93
130
94
131
``` html
95
- <mapmlviewer zoom =" 11" lat =" 48.8566" lon =" 2.3522" controls controlslist =" nolayer noreload" projection =" OSMTILE" >
96
- <layer src =" https://example.com/mapml/osm/" checked crossorigin ></layer >
97
- <!-- more layers as required -->
98
- </mapmlviewer >
132
+ <mapml-viewer zoom =" 11" lat =" 48.8566" lon =" 2.3522" controls controlslist =" noreload geolocation" projection =" OSMTILE" >
133
+ <!-- remote content layer -->
134
+ <!-- xhtml syntax and namespace only (currently) for remote content, root element='mapml-' (no doctype yet) -->
135
+ <layer- src =" https://example.com/mapml/openstreetmap/tiles" checked hidden crossorigin ></layer- >
136
+ <!-- local content layer / content 'inline' -->
137
+ <layer- checked label =" Places of Interest" >
138
+ <!-- html or xhtml syntax for inline content -->
139
+ <map-extent projection =" OSMTILE" checked hidden >
140
+ <map-input type =zoom min =0 max =18 >
141
+ <map-input type =location name =xmin position =top-left min =... max =... axis =easting ></map-input >
142
+ <map-input type =location name =ymax position =top-left min =... max =... axis =northing ></map-input >
143
+ <map-input type =location name =xmax position =bottom-right min =... max =... axis =easting ></map-input >
144
+ <map-input type =location name =ymin position =bottom-right min =... max =... axis =northing ></map-input >
145
+ <map-input type =width name =w min =1 max =4096 ></map-input >
146
+ <map-input type =height name =h min =1 max =4096 ></map-input >
147
+ <map-link rel =features media =... tref =/geoserver/wms/?request =GetMap&bbox ={xmin},{ymin},{xmax},{ymax} &width ={w} &height ={h} &format =text/mapml &format_options =mapmlfeatures:true... ></map-link >
148
+ </map-extent >
149
+ </layer- >
150
+ <!-- more / different layers as required, add or remove via DOM node interface -->
151
+ </mapml-viewer >
99
152
```
100
153
101
- Please review the [ user documentation] ( https://maps4html.org/web-map-doc/docs/ )
102
- for the proposed declarative syntax and semantics, with examples.
103
-
104
- \* The name of the eventual root map widget element will be determined in consultation
105
- with browser teams. “< ; map>” is used by an existing element, and it may be
106
- impossible or undesirable to overload the behavior of that element.
107
-
108
154
<h3 id =" goals " >Goals</h3 >
109
155
110
156
* Allow authors to create dynamic, usable and accessible Web maps about as easily
111
157
as they can embed an image, a video or a podcast today, using markup, especially links.
112
- * Allow authors to create mapping mashups using markup. Use of markup doesn’t
158
+ * Allow authors to create accessible mapping mashups using markup. Use of markup doesn’t
113
159
necessarily require scripting development skills, or detailed map server technology
114
160
knowledge i.e. a mashup can be accomplished about as easily as linking to images
115
161
or videos..
116
- * Embed semantics of map feature and location information into HTML and browsers
162
+ * Define semantics of map feature and location information in HTML and browsers
117
163
for use by screen readers and other assistive technologies.
118
164
* Simplify the use of public or private [ spatial data infrastructures] ( https://en.wikipedia.org/wiki/Spatial_data_infrastructure )
119
165
(SDI), such as [ OpenStreetMap] ( https://wiki.openstreetmap.org/wiki/Main_Page )
120
166
and national and international SDIs, by designing the integration of those services
121
167
into the proposed Web platform mapping standards.
122
168
* Leverage existing spatial (map) content management systems, APIs and Web Services,
123
- so that map content is immediately available.
169
+ so that map content is immediately available when this proposal is implemented .
124
170
125
171
<h3 id =" use-cases-and-requirements " >Use Cases and Requirements</h3 >
126
172
@@ -129,25 +175,20 @@ and our polyfill for review by the W3C community.
129
175
130
176
<h3 id =" key-scenarios " >Key Scenarios</h3 >
131
177
132
- See the Use Cases document for a comprehensive list of scenarios. A few of the more important scenarios include:
178
+ See the Use Cases document for a comprehensive list of scenarios. A few of the
179
+ more important scenarios include:
133
180
134
181
* Simple, accessible, user-controllable mashups
135
- * Allow layers to be turned on/off by user
182
+ * Allow layers to be turned on/off by keyboard / mouse user
136
183
* Accessible location information, styled using CSS
137
- * Accessible pan and zoom
138
- * Show the user’s location on a map
184
+ * Accessible / meaningful pan and zoom
185
+ * Allow user to register map content preferences via user agent settings
186
+ * Show the user’s location on a map, and / or use map bounds for responsive content display
139
187
* Web search for location information
140
188
* Accessible display of routes between locations
141
189
* Leverage existing geospatial content
142
190
* APIs to support more performant, complex mapping applications
143
191
144
- <h3 id =" detailed-design-discussion " >Detailed design discussion</h3 >
145
-
146
- _ See the [ High-Level API explainer] ( https://github.com/Maps4HTML/MapML-Proposal/blob/main/high-level-api.md ) for design details on proposed elements._
147
-
148
- _ See the polyfill [ user documentation] ( https://maps4html.org/web-map-doc/docs/elements/mapml-viewer/ ) ._
149
-
150
-
151
192
<h2 id =" considered-alternative-designs-of-mapml " >Considered alternative designs of MapML</h2 >
152
193
153
194
Elements of MapML could be improved through discussion and further research,
@@ -166,7 +207,7 @@ understanding of not only Web architecture, technology and standards, but also W
166
207
accessibility. To succeed, this project requires a narrow collaboration between
167
208
these stakeholder groups.
168
209
169
- <h2 id =" stakeholder-feedback-opposition " >Stakeholder Feedback / Opposition </h2 >
210
+ <h2 id =" stakeholder-feedback " >Stakeholder Feedback</h2 >
170
211
171
212
Natural Resources Canada hosted the 2020
172
213
[ W3C/OGC Joint Workshop Series on Maps for the Web] ( https://www.w3.org/2020/maps/ )
@@ -181,7 +222,7 @@ In 2022, [Bocoup](https://www.w3.org/community/maps4html/participants?search=boc
181
222
conducted HTTP Archive and Web developer research on the subject of Web platform maps,
182
223
which revealed that there is strong support among developers for simple, accessible
183
224
Web platform maps. Their research also revealed that maps exist on about ** 16%**
184
- of the pages included in the HTTP Archive.
225
+ of the pages included in the HTTP Archive [ 1 ] .
185
226
186
227
Bocoup also received the feedback from browser developers that support from map
187
228
framework developers would be important in any browser team’s decision to implement
@@ -191,10 +232,14 @@ evaluate the proposal.
191
232
192
233
<h2 id =" references-and-acknowledgements " >References and Acknowledgements</h2 >
193
234
235
+ [ 1] [ Web Maps Research Summary] ( https://docs.google.com/document/d/e/2PACX-1vRXTxEOqP6xmdgPEmqir8r-kDvwVfA8oTC4vvv_XhoRk9mClLtzMx0BdoMaPIctwftkWI3U7yTS3Bkq/pub )
236
+ [ 2] [ The Rule of Least Power] ( https://www.w3.org/2001/tag/doc/leastPower.html )
237
+
238
+
194
239
Contributions, advice and support from the following people are gratefully acknowledged:
195
240
196
241
Robert Linder, Simon Pieters, Anssi Kostiainen, Amelia Bellamy-Royds, Doug Schepers,
197
242
Brian Kardell, Boaz Sender, Ahmad Ayubi, Anshpreet Sandhu, Ben Lu, Aliyan Haq,
198
243
Michael<sup >tm</sup > Smith, Benoît Chagnon, Joan Masó, Keith Pomakis, Gil Heo,
199
244
Jérôme St-Louis, Nic Chan, Nick Fitzsimmons, Tom Kralidis, Daniel Morissette,
200
- Chris Hodgson, Bennett Feely
245
+ Chris Hodgson, Bennett Feely, the GeoServer project
0 commit comments