This document discusses level of detail (LOD) logic for zoomable maps and images on the web. It notes difficulties standardizing deferred loading and zoom features. It proposes defining zoom concepts in CSS and investigating how LOD logic relates to standards. The document explains how LOD works for maps and images by loading higher resolution resources as zoom increases. It identifies requirements for LOD standards, such as expressing alternative resources and loading status. Finally, it evaluates existing HTML and SVG elements for representing alternative resources to support LOD, finding <switch> may be most suitable if extended to support tiling structures.

1. Level Of Detail(2)
Satoru Takagi
W3C SVGWG
6.21.2016

2. Update on standardization (6.21.2016)
Difficulty
• At webperf WG, the spec. investigation for deferred loading and lazy
loading freezes.*1
• Difficulties in proposal work for putting into Media query at zoom
feature *2
Progressed
• The work for defining the detailed concept of zoom at css sets up*3 ,
*4 in response to a zoom feature proposal.
• Investigation of the relation between complicated but practical Level
od Detail logic and the contents of standardization
(See the following pages)

3. Complicated but practical Level of Detail logic
• Microsoft’s Zoomable High-Res. Photos
http://www.microsoft.com/web/solutions/zoomit.aspx
• Many Maps: google maps, openstreetmap etc.
• And my implementations (Vector Map based on SVG)
http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/airPort_r11.html
Incidentally, such a processing explained on the following pages is already
implemented on all the examples shown last time.
Determine the resource set
which should be used based
on zoom scale
1 < zoom <= 2
2 < zoom
largeImageTiles.svgmidImageTiles.svg
Level Selection step
Chiefly, it is about processing at the Level Selection step based on zooming.
(see part one slide)

4. Zoom-in (Zoom=2.0) Loading(Zoom=2.0) Load completed (Zoom=2.0)
Resources
For zoom <= 1
Without
such
processing
With such
processing
Initial state (Zoom=1.0)
Expands and displays
loaded resources in
spite of out of zoom
range for a while.
Overwrite progressively.
Remove tentative out of
range resources.
Rendering is impossible
for applicable resources
have not been loaded yet.
Complicated but practical Level of Detail logic 2
It is about processing for improving UX during transition until resource fetching
for the applicable level is completed
What loading
completed can be
displayed progressively.
Resorces
for 1 < zoom <= 2

5. Required functionality
The function to just change display status of the element for each zoom
ranges is insufficient.
1. The data structure which can show an alternative resource in case loading
is not completed is required.
2. Of course, it is also required to express and process the conditions that
loading is not completed.
3. There may be many levels of detail. Accordingly, there are cases where
alternative resources are specified for many each levels.
4. Such resources may be divided into tiles. And those tiles may be huge.
5. There may also be a case where the resources expected to be required in
the near future navigation is pre-fetched speculatively.

6. We should advance gradual extension from the existing standards as
much as possible.
Currently, even investigation of the declarative mechanism for deferred
loading has not started yet. Therefore, the measure for requirements
No. 2 and 5 may fall to javascript applications for the time being.
On the other hand, requirements No. 1 and 3 are related with the data
structure of SVG. Where, in order to correspond to requirements No. 4,
such a structure should align the tiling structure by SVG.
Then, elementary search results about the data structure for expressing
alternative resources is shown in the following page.
Standardization

7. <picture> element of HTML
• It is well known and designed.
• Media queries which it uses does not support not only
complicated conditions which were described previously but
zoom ratio.
• It is likely to be applicable only to the image element.
• In order to apply to tiling, a certain support to the hierarchical
structure is required.
<switch> element of SVG
• It is left alone while it had been maintained insufficiently.
• It can support even not only various elements in svg name space
but hierarchical structure.
• Its conditional factors are far from Level of Detail more than
media query.
Existing elements expressing alternative resources