Description
See Maps4HTML/MapML-Specification#71
The Maps for HTML Community Group explores ways to make web maps a first-class feature on the web platform. Styling with CSS is desired, but is not yet fleshed out how it would work.
From what I can tell, web maps commonly use an interaction model that the web doesn't support natively: panning and zooming a single element.
Panning is similar to scrolling, but not quite. Scrolling areas have edges. Panning a web map can wrap around the edges. On desktop, panning a web map is typically done by a drag and drop gesture, and zooming is done by scrolling gesture. On touch-based devices, panning is typically done by swipe gesture with one or two fingers, and zooming by pinch gesture.
While browsers support “page zoom” and “pinch zoom”, there is no per-element zooming primitive.
Currently, JS-based implementations of web maps solve this by using touch/mouse events and preventing the default action (such as page scrolling and pinch zooming). For example, leaflet.js calls stopPropagation() for mousewheel events.
Instead of web maps having to hijack events and implement a custom interaction model, I wonder if this could be supported as a first-class feature that you can opt into. This could have various benefits:
- improved performance
- the UA could perform panning and zooming in the composition thread, like scrolling. Today's JS-based solutions that respond to events will lag behind with a tick of the event loop, and are subject to jank if another task occupies the main thread.
- non-passive mousewheel/touch event listeners negatively impact scrolling performance. (Also see https://developers.google.com/web/updates/2016/06/passive-event-listeners )
- with the implementation being part of the UA, the amount of necessary JS is reduced, which lowers network transfer sizes and JS compilation time.
- support for different/new device form factors: similar to
<video controls>or<select>, the UA can adapt the experience to make sense for new device form factors (desktop vs phone vs watch vs in-car navigation system). - accessibility: a first-class interaction model on the web should be usable for everyone, including when using assistive technologies. I don't know what the current situation is like or what the challenges are. But custom JS-based implementations might neglect this aspect, potentially leaving web maps inaccessible.
- better web developer ergonomics
Also see https://maps4html.org/HTML-Map-Element-UseCases-Requirements/#use-case-set-view-zoom for documentation on this use case and the required capabilities.