{"id":147,"date":"2023-03-07T17:12:16","date_gmt":"2023-03-07T17:12:16","guid":{"rendered":"https:\/\/www.w3.org\/community\/maps4html\/?p=147"},"modified":"2023-03-07T18:09:53","modified_gmt":"2023-03-07T18:09:53","slug":"winter-works","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/maps4html\/2023\/03\/07\/winter-works\/","title":{"rendered":"Winter Works"},"content":{"rendered":"\n
\"\"<\/a>
Atlas of Canada International Polar Year Wall Map<\/figcaption><\/figure>\n\n\n\n

The Maps for HTML community development has been happening “seasonally” for a few years now, driven in large measure by student internships. We have had excellent experiences with the co-op programs of the University of Waterloo, and Ottawa University here in Canada. Students generally arrive quite new to the field of Web development, and we show them what we know and what we’re working on and let nature take its course, sustained of course by MDN and browser DevTools! The results have been very good so far, and it’s time to review some of the things we’ve undertaken this term.<\/p>\n\n\n\n

Autonomous agents<\/strong><\/p>\n\n\n\n

In September 2022, we held a hybrid meeting of the community group, with some of us physically present and others dialled in from around the globe. There were some interesting discussions and some of those discussions have led directly to activities this term.<\/p>\n\n\n\n

For example, at our F2F, we were talking about map semantics (the subject of an earlier post), and Ed<\/a> noted that the visual character of a map is one thing, but what is the meaning of the thing that is depicted by the map? <\/p>\n\n\n\n

Ed: How do we describe the location semantics in an html web page and make it available to the autonomous agent?<\/p>\n\n\n\n

Now, semantics is a profound topic, one that is perhaps even more relevant in today’s world of AI and generated prose. Anyway, not to go down the AI chatbot rabbithole, I have posited before<\/a> that the central characteristic that makes a map special, and “semantic”, is the shared<\/span> definition of the coordinate reference system used by the map. Clearly, shared<\/span> coordinate reference system definitions are at the heart of geospatial interoperability<\/a>, but are they enough to allow HTML authors and autonomous agents to clearly differentiate, say, Paris, Ontario<\/a>, from Paris, France<\/a>? Certainly! But how does that translate to something meaningful for the user of a map? A visual user can see, perhaps if necessary by zooming in or out, that what is depicted is clearly in one location or the other. Similarly, the markup of a declarative web map<\/a> visually and computationally places the map in Ontario, or France, or wherever. But what of non-visual users, or for that matter, autonomous agents (web crawlers) and, by extension, search engine users? What does the map mean to them? Ed was unequivocal about where the current generation of JavaScript maps leaves them.<\/p>\n\n\n\n

Ed: From the point of view of an autonomous agent, what they see in the JavaScipt (web map) is invisible i.e. nothing<\/p>\n\n\n\n

We strongly agree on this point! To address this problem within the scope of the MapML proposal for the Web, Kevin<\/a> developed a custom element called <map-caption><\/code><\/a>. The <map-caption<\/code>> element is a way of allowing the page author to describe and differentiate the map’s meaning explicitly for accessibility technology and potentially for search engine users, which may be especially important if search engines are incapable of spatial indexing. The tight coupling of the caption with the spatial focus of the map state should allow both users and crawlers to leverage map semantics to the fullest extent possible. Please, don’t be shy, hop onto our topic discussion<\/a> and share your views. Nothing is standardized yet, and we want to ensure we standardize something useful to folks and their autonomous agents.<\/p>\n\n\n\n

Map width<\/code> and height<\/code><\/strong><\/p>\n\n\n\n

A long-standing need has been to lower the getting-started barrier for newcomers to HTML Web mapping, since inclusion is our central objective. Way back in the Polymer days, our polyfill supported the width<\/code> and height<\/code> map viewer attributes, but during Web Components 1.0 refactoring, those attributes were not carried forward. Back in 2021, Eric<\/a> spent some time experimenting with our <mapml-viewer><\/code> and one of the most confusing moments of that experience was the lack of width<\/code> and height<\/code> attribute support, because we had come to rely on CSS being supplied for these values, and the underlying mapping engine that powers our proposal is highly dependent on having a defined container element height to work with. Even though width<\/code> and height<\/code> no longer mean<\/a> what they used to for HTML images<\/a>, for example, they still play a role in the efficiency of the browser layout process. So, Jacky<\/a> brought back the width<\/code> and height<\/code> attributes for use with our <mapml-viewer><\/code>, hopefully making the getting-started process a little less confusing by enabling more paths to success, and perhaps polyfilling a similar role to that played today by the <img><\/code> width<\/code> and height<\/code> attributes<\/a>, for a future HTML map widget. <\/p>\n\n\n\n

GeoJSON is Everywhere<\/strong><\/p>\n\n\n\n

Along the way, many people have suggested that support for GeoJSON might be essential for a standard Web map widget. After some soul searching, because we don’t want to make this proposal any larger in scope than it must be, we decided to implement a speculative polyfill for GeoJSON. <\/p>\n\n\n\n

Aliyan<\/a> did some nice work pulling that together, first as a library function that you had to import and later (currently) as part of the <mapml-viewer><\/code><\/a> and <layer-><\/code><\/a> element WebIDL APIs. These APIs are partly exposed as map viewer context menu option for Paste (P), which, if your clipboard is loaded with a GeoJSON feature or featurecollection<\/a> text blob, will create a map layer with a default graphic and textual representation of the features. If you want to apply custom CSS styles to the map features that are generated by pasting, you can always hook your code directly into these APIs, as shown by this experiment<\/a>.<\/p>\n\n\n\n

Context is Everything<\/strong><\/p>\n\n\n\n

Hanyu<\/a> dived into the CSS pool and made the behaviour of the map and layer controls’ context menus more predictable and testable, not to mention nice looking and accessible to keyboard users.<\/p>\n\n\n\n

\"\"<\/a>
The map context menu, showing the copy submenu, and the layer context menu are shown above<\/figcaption><\/figure>\n\n\n\n

One of our epics<\/a> is to make MapML self-perpetuating and hackable, hopefully following in the footsteps of the “View Source” culture established by HTML. To that end, we have created user documentation<\/a> and tutorials<\/a> that try to help newcomers climb their learning curve. Some of the functions exposed by the right-click \/ Shift+F10 context menus include copying various bits of MapML markup that can be used to help you create your own maps from close to scratch. <\/p>\n\n\n\n

All the user-facing functionality should be localized, and for that we turn to our browser extension<\/a>, which we use to polyfill the browser chrome. In addition to localized UI, we have recently added the French language to our documentation site. Our documentation approximates for the MapML proposal what the Mozilla Developer Network docs do for HTML and Web APIs. If you are interested in making Web maps a global standard, please get in touch and potentially help the initiative by contributing your native language.<\/p>\n\n\n\n

On the Road to 1.0.0<\/strong><\/p>\n\n\n\n

That’s all for now. We’ll have much more to say at the end of our work term, but we think we are heading towards a “1.0.0” release, which will mark a major milestone in this effort. Stay tuned. As always: new community members and contributions are always welcome<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

The Maps for HTML community development has been happening “seasonally” for a few years now, driven in large measure by student internships. We have had excellent experiences with the co-op programs of the University of Waterloo, and Ottawa University here … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2111,"featured_media":168,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[1],"tags":[12,20,8,3],"class_list":["post-147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-html","tag-maps","tag-maps4html","tag-standards"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/posts\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/users\/2111"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/comments?post=147"}],"version-history":[{"count":21,"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/posts\/147\/revisions"}],"predecessor-version":[{"id":174,"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/posts\/147\/revisions\/174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/media\/168"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/media?parent=147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/categories?post=147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/maps4html\/wp-json\/wp\/v2\/tags?post=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}