A georeferenced, quasi-static, but responsive, client side image map

[prushforth]

Since <map> is already a shared primitive of the Web Platform, albeit neglected and accumulating technical debt with each passing year, we should prototype the following basic progressive enhancement / graceful degradation scenario, in which the shared primitives <img> <map> and <area> are progressively enhanced into a pannable, zoomable georeferenced resource:

<img usemap="#themap" src="https://example.org/world-map-image.jpg" alt="A picture of a zoomable, pannable world map image">
<map name="themap" projection="OSMTILE" lat="0" lon="0" zoom="0" is="web-map">
  <area href="https://www.openstreetmap.org/">
</map>

In this scenario, although the only 'layers' are the <img> and the <area>, we should make it so that the image is pannable and zoomable, perhaps by converting it dynamically to a <layer->, as we do with <area>.

In a (future) native element, it would be the presence of the projection, lat, lon and zoom attributes that trigger this behaviour, since without those attributes, it is just a plain non-responsive / progressive client side image map.

[prushforth]

Relates to Technical Drawings Use Case

[Malvoz]

Admittedly this is a bit confusing to me as I had only considered img to be used for graceful degradation. Enabling this may impact the current "pre-styling" approach (which I have come to suspect may have issues in Safari), which is not only used to mitigate FOUC/CLS, but also to hide the img element (caveat: adjacent sibling images only) in the progressive enhancement scenario.

Anyhow, I think this implementation would need to consider maps that use multiple images:
https://vintage-tachometer.glitch.me/img-map-interop.html (source for the Glitch: whatwg/html#5054 (comment)).

[prushforth]

I had only considered img to be used for graceful degradation

Indeed I think img is only needed for graceful degradation. I think that means that the existing client side image map behavior should be maintained, including the multiple images use case. I have to say I find the feature of linking a single map to many images to be kind of a dumb feature, and I also find the HTML documentation that I've seen (header/footer menu sharing the same links) to be also a dumb use case. I wonder how many times this feature is actually used in the wild...you can't break the web, as I understand it, but if it's not used, maybe such breakage is actually worth it to get rid of technical debt/code?

In either case I guess that would mean that if you wanted to make the image progressively enhance (pan zoom), you would have to make both / all the images pan and zoom. I don't think that's a deal breaker.

[prushforth]

I think the behaviour should be like this: https://openlayers.org/en/latest/examples/static-image.html