Skip to content

Instantly share code, notes, and snippets.

@tmcw
Last active September 15, 2022 03:03
Show Gist options
  • Save tmcw/c17eec41deaec8f8f7b3d8bd38420a27 to your computer and use it in GitHub Desktop.
Save tmcw/c17eec41deaec8f8f7b3d8bd38420a27 to your computer and use it in GitHub Desktop.

Maps4HTML

So I read the Maps4HTML report, explainer, and usecases and played with some of the demos. Here are some thoughts. Before I dive in, some caveats:

  • The people involved with this project seem extremely friendly and well-intentioned and my guess is that regardless of whether this spec takes off, the process will have a positive long-term impact.
  • I have lots and lots of historical grudges and biases and priors
  • And, as Murray Kempton put it,

A critic enters the battlefield after the war and shoots the wounded

So, anyway:

Is there any advantage to having a simple web map tag in #HTML?

Thoughts.

There are intertwined goals and beliefs involved in this effort. Some I can pick out:

  • Making maps more like HTML: user-side styling, document authoring.
  • Making a specification, to encourage multiple implementations targeting the same thing. It would be cool if maps were easier to scrape or compose.
  • Accessibility
  • Performance
  • Making it easier to make maps

Then there's approach-driven stuff:

  • This being a W3C/OGC joint effort in which the result is a browser implementation

I'll review these, then address some other qualms

Making maps like HTML

Think about an HTML5 "range" input. You can style the sub-parts of it, target those little bits and pieces.

input[type='range'] {
    -webkit-appearance: none !important;
    background:red;
    height:7px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:blue;
    height:10px;
    width:10px;
}

Very cool. When I look at the Maps4HTML… HTML, the first question I have is "is it real". Like this this markup, can I address the ID on the page, in HTML, girl12, and style it with CSS?

      <mapml-viewer projection="WGS84" zoom="2" lon="-111.062839" lat="-8.059046" controls>
        <layer- label="Painting" checked>
          <map-meta name="zoom" content="min=0,max=7"></map-meta>
          <map-extent units="WGS84">
              <map-input  name="zoomLevel" type="zoom" value="1" min="0" max="4"></map-input>
              <map-input  name="row" type="location" axis="row" units="tilematrix" min="0" max="2"></map-input>
              <map-input  name="col" type="location" axis="column" units="tilematrix" min="0" max="2"></map-input>
              <map-link tms rel="tile" tref="https://maps4html.org/TiledArt-Rousseau/TheBanksOfTheBièvreNearBicêtre/{zoomLevel}/{col}/{row}.png" />
          </map-extent>
          </layer->
          <layer- label="People" checked>
            <map-meta name="projection" content="WGS84"></map-meta>
            <map-feature id="girl2" class="child" zoom="2">
              <map-featurecaption>Girl - zoom=2</map-featurecaption>
              <map-geometry>
                <map-a href="#5,-158.518400,-74.697610">
                  <map-polygon>
                    <map-coordinates>-158.561948 -69.558455 -159.440739 -70.832538 -162.384689 -75.709198 -160.890744 -78.916371 -159.371228 -80.304936 -154.563449 -79.751115 -157.683157 -69.646323 -158.561948 -69.558455</map-coordinates>
                  </map-polygon>
                </map-a>
              </map-geometry>
              <map-properties></map-properties>
            </map-feature>

In the current Maps4HTML implementation, the answer is no - the map-feature element is parsed and thrown on a Leaflet map as a usual element. In the future, I'd guess the answer is still a very flat no - if you use modern Google Maps, Maplibre, or Mapbox GL, most features are not elements. They're not nodes in HTML. They're just in memory, and written as pixels with WebGL.

Which just makes me wonder how much like HTML is this - is HTML a useful metaphor for map data? Can users reasonably expect to style their map features like HTML, or manipulate this sub-DOM and get interesting things out of it?

Making a specification

It's hard to make a specification. Ethically, it's dangerous to specify something without casting a wide net and getting lots of opinions. Practically, it's almost impossible to make a spec if you cast a wide net and get lots of opinions. The sheer number of usecases and parties involved scares me.

Simplicity is really, really hard, and the difficulty lies on a power and human level, not a technical level. You have to say no, a lot, to deal with pissing people off, and so on. You have lots of people who want their feature, and not enough people afraid of too many features.

Accessibility

This is a weird one. Why not create a test rig and ARIA standards for how maps should be accessible, make a big webpage like "aremapsaccessibleyet.com", score the map frameworks, try to make them improve?

I fear that part of this confusion is about elements - that putting map features or map details in an initial HTML document structure on the first load looks accessible. This really isn't how accessibility works in 2022: highly dynamic JavaScript applications can be thoroughly accessible by changing the DOM in real-time and following both ARIA specs and real-world screenreader behavior religiously. Screenreaders all work with dynamic webpages. There's no point in putting map features in the initial DOM when you could add them as a hidden accessible element that knows to announce to screenreaders.

Performance

Kind of, I guess - this sort of makes sense. It does remind me of the idea of just "putting React in the browser", which is still appealing to me. Browser performance is good, but taking existing client-side libraries in userland and moving them into the browser platform, in order to avoid their javascript payload, is not that appealing a notion. You trade the fast release cycle and high level of control and debuggability of userland code for the relatively slower release cycle and black-box debuggability of a browser API.

Making it easier to make maps

This one seems fishy - the experience with a Web Component polyfilling the Maps4HTML spec should be roughly the same as the experience once the browser implements it. If "maps as HTML elements" are a good idea, you can push hard on a Web Component, make it super popular, and then have an easy sell to browser vendors.


Other stuff:

The elephant in the room: vendors

A lot of Maps4HTML examples use OpenStreetMap tiles. If Google Chrome started pointing every user to OSM's servers, you would have a lot of angry people - even angrier than they are today, and trust me, OSM users are angry.

In the general, average case, maps require basemaps. Basemaps require servers and upkeep and systems of trust and licenses. This is a big deal, and if you don't engage directly with this challenge, there is no chance of success.

The endgame I'd guess is that this standard goes live, Apple embeds Apple Maps (like they do for iOS apps) and Google embeds Google Maps (like they do for Android apps) and Linux embeds… not sure. Anyway, this is a really hard problem.

This is where the maps-as-images-or-videos metaphor does not work. Embedding a basemap isn't like embedding an image. You aren't pointing to a "source" that you control. You're asking the provider for a background image. So either this challenge gets pushed in a weird direction (HTML maps include… API token support), or?


Complexity

It's complex. I'm seeing multiple projection support. Lots of references to heatmaps. Animation. So on. This is a complex standard.

Ideally, a lot of that stuff would be pushed into the userspace - if you want heatmaps, you have some custom JavaScript. Why are map controls in the spec, and not in userland?


Anyway, the goals are noble and if I were the king of Maps4HTML I'd probably just focus on:

  • Going deep on accessibility, create some rigorous testcases, and improve the state of the industry.
  • If we believe in maps-as-elements, focus 100% on making a web component so good that people will want to use it, standard or not, and marketing that web component as just a way to make maps, not part of a larger effort.
  • Punt on standardization indefinitely: old-school standards bodies and brainstorming do not produce good things.
@mourner
Copy link

mourner commented Feb 10, 2022

Why not create a test rig and ARIA standards for how maps should be accessible, make a big webpage like "aremapsaccessibleyet.com", score the map frameworks, try to make them improve?
...
Going deep on accessibility, create some rigorous testcases, and improve the state of the industry.

@tmcw This actually happened: https://github.com/Malvoz/web-maps-wcag-evaluation

And it's been an extremely valuable effort — dozens of accessibility contributions landed to Leaflet & GL JS as the direct result of this amazing work by @Malvoz, with many more to come.

@tmcw
Copy link
Author

tmcw commented Feb 10, 2022

(Oddly I can't add a thumbs-up to Gist comments, but 👍 that is very cool!)

@Malvoz
Copy link

Malvoz commented Feb 11, 2022

Thank you so much for your thoughts and feedback @tmcw, much appreciated! And thanks to @mourner for bringing this to my attention.

#making-maps-like-html:

Think about an HTML5 "range" input. You can style the sub-parts of it

When I look at the Maps4HTML… HTML, the first question I have is "is it real". Like this this markup, can I address the ID on the page, in HTML, girl12, and style it with CSS?

We currently do not have a complete answer on how styling MapML with CSS should work.

See the (experiments) page: MapML vector tiles styled with external CSS stylesheet which uses vector-tile.css (you can right-click the map to open a context menu and "View map source" to see the stylesheet's link relation).

#making-a-specification:

The sheer number of usecases and parties involved scares me.

If there's a standard to be written for maps, it needs to evaluate use cases and requirements to establish the required browser capabilities. Though I think everyone can agree that not every use case can and should be built in, the map element must be extensible and allow developers to enhance the functionality with JS.

#accessibility:

highly dynamic JavaScript applications can be thoroughly accessible by changing the DOM in real-time and following both ARIA specs and real-world screenreader behavior religiously.

It's problematic that popular JS maps for the most part aren't very accessible, especially that spatial relations aren't conveyed to non-visual users (see related WIP for Mapbox and MapML-viewer). But even if they were, the DOM structure, the (default) labelling of elements, commands (gestures/keyboard shortcuts), etc., can all differ, so there's essentially a learning curve to each map for (some) users. That's just the nature of conventions, as opposed to a standard.

A standard would also allow conformance checkers to shout at devs for not labelling map features etc, similar to missing alt on images.

#making-it-easier-to-make-maps

If "maps as HTML elements" are a good idea, you can push hard on a Web Component, make it super popular, and then have an easy sell to browser vendors.

Yes, that's the idea. That's also the advice from WHATWG.

#the-elephant-in-the-room-vendors

A lot of Maps4HTML examples use OpenStreetMap tiles. If Google Chrome started pointing every user to OSM's servers, you would have a lot of angry people

I don't think the idea is that Google would point users to OSM's servers. Hopefully @prushforth can clarify this.

The endgame I'd guess is that this standard goes live, Apple embeds Apple Maps (like they do for iOS apps) and Google embeds Google Maps (like they do for Android apps)

I personally don't see that as a problem. Similar to how browsers have default search engines, but allow users to change it.
Related issue: Capability: Default map provider.


Again, thanks for sharing this. I'm sure @prushforth appreciates it as well.

@tmcw
Copy link
Author

tmcw commented Feb 11, 2022

Thanks for the feedback, Robert! I do still think the map-provider problem is fundamental, scary, and the whole success or failure of the effort rests on it. What good is the privacy goal if Google Maps is recording all map interactions? How does this client interact with different pricing models for APIs - Google Maps and Mapbox doing view-based billing and others doing tile-based? Does the map-provider standard include a turnstile API call for metered billing? And is the client going to be upgradable to support vector tiles, or 2.5D tiles like Mapbox, or 3D mesh tiles like Google?

The same goes for styling and element control and CSS. We know that nearly all map clients are moving away from SVG because of its performance attributes, and it looks like the proposed styling experiments use SVG. Styling Canvas or WebGL with CSS is a no-go, and SVG is a dead end.

These two things seem like technical realities that stand in the way of any standard being established. They can't be left to the implementation, or expected to materialize once a standard is established.

@prushforth
Copy link

Hi Tom, Thanks for reading our stuff - that takes time and we really appreciate it. Thanks also to @Malvoz for pinging me. There's lots to reply to, but I guess we can try to take it as a conversation. Bottom up.

the map-provider problem is fundamental, scary, and the whole success or failure of the effort rests on it.

Yeah, I agree. That's why I'm personally against default map providers. I mean maybe there could be a level 0-1 mercator cache built into the actual code of the browser, but I think it would be counterproductive to have (say) chrome ship with google maps built in and so on.

That's why efforts have been made to integrate tiles and services (e.g. WMTS, WMS or other similar). So that it is easy to see a beginner using a public tile cache on their web site, but professionals could serve their own. We have built an extension to GeoServer that tracks the functionality of the viewer (with a significant lag time due to time constraints).

As far as SVG goes, we have specified the <map-feature> so that there's an accessibility / real-world CRS semantics angle to maps, not so that everything can be rendered as features. As you point out, rendering is best left to high performance code. There have been suggestions that codecs for vector tile formats might be viable. In any case, it would be quite cool to figure out how to polyfill that codec behaviour in our custom element suite, to show it could be done.

On the other hand, we would want to be able to render any DOM element that has the right coordinates, I think, whether it's a <map-feature> or <path or other. This all needs some more work.

For controls, from the outset, we figured that browser-provided controls would not cover all use cases, so we followed the <video controls> model, on the theory that the map element(s) API would provide enough hooks for applications to provide their own. As our experience with the Web platform grows, we may get more sophisticated.

As far as making a successful custom element suite, we've been a bit reticent to do that, because the goal is native implementation, and a wildly successful polyfill might get in the way of implementation, certainly if improperly namespaced, or if it carried poorly designed APIs. I don't really want to get people to invest their $ / time into making web sites with a polyfill that is a dead-end. Besides, there are already fantastic open source libraries from Leaflet and OpenLayers and I don't want us to compete with them, I want to work with them.

Cheers

@prushforth
Copy link

How does this client interact with different pricing models for APIs - Google Maps and Mapbox doing view-based billing and others doing tile-based? Does the map-provider standard include a turnstile API call for metered billing?

Good questions, all. My knee-jerk response is to say the map API would enable Google or Mapbox to control the URLs that are generated, not to mention other methods of user tracking, so it would be up to their libraries. We would certainly welcome participants from those companies to help us figure out what the right map API would be to enable that.

@prushforth
Copy link

I said:

As far as making a successful custom element suite,

On the other hand, I think we're at a point where it is worthwhile considering / designing the library completely based on custom element behaviours, so that we can establish what being an element really means for maps and features, from a dynamic DOM perspective, as well as modularity benefits. It's all a learning curve...

@prushforth
Copy link

prushforth commented Sep 9, 2022

Hi @tmcw and @mourner, sorry to contact you in this comment. We are holding a couple of public meetings [1],[2] of the m4h community next week. There will be some presentations that you may find of interest, please have a look; it would be really wonderful to have you both there if at all possible, especially Monday!!

[1] https://www.w3.org/events/meetings/fb756485-134f-4989-b1b6-9864fbc935e3
[2] https://www.w3.org/events/meetings/e6f18f37-9fb8-4a33-b5ee-c1d5e0dc6d58

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment