Amelia Bellamy-Royds is giving a presentation on the ongoing development of the Use Cases and Requirements for Web Maps, on behalf of the Maps for HTML community, and she and they would appreciate any discussion about the presentation and the contents of the document.
Hello all. I didn’t have any prepared slides, but here are the web pages I shared:
The demos and the report are still works in progress! If you have suggestions on simpler code for the examples (or ways to achieve the effect in the other libraries), do let us know in the report GitHub issues.
The GitHub issues are also where we have open discussion on what to include for each use case and capability description, and where to suggest additional use cases and capabilities to add! (Web maps are complex! But hopefully we’ll eventually finish listing all the features they include… one day.)
In considering “standardized solutions that could be built in to HTML and web browsers,” Please respect the existence of an official document submitted to the W3C on the introduction of map functionality in web browsers and the discussions that have followed. At least we submitted this member submission in 2011, and in response the SVGWG has been discussing the aforementioned issues for several years. These previous discussions should be very useful for future discussions. I would like to see those references in the report.
“Display drawings or schematics without geographic coordinates” should be explicitly stated that there have been maps and independent efforts for a long time.
For example, Microsoft had this project, which continues to exist today as OpenSeadragon.
Also, here are my comments on each chapter of the report
It’s not enough to have a sample of the output from a dynamic web service. This is because it could be misleading to think that a dynamic server is essential to the realization of this case.
In particular, map tiles are often used for static servers and examples of their use should be shown.
I will show this by republishing the examples described in my paper.
Generated a DOM tree output from the following simple WebApps
<!doctype html>
<html>
<head>
<title>tile generation test</title>
</head>
<script>
var baseURL="https://tile.openstreetmap.org/[level]/[tx]/[ty].png";
var level = 8;
var d2r = Math.PI / 180;
viewPort = {x0:133 , y0:33 , x1:138 , y1:38 }; // in y:lat, x:lng
onload=function(){
generateTilsURLs(level,viewPort);
}
function lat2y(lat) { return(Math.log(Math.tan((lat / 90 + 1) * (Math.PI / 4) )) * 180 / Math.PI); }
function crd2tile(crd,zoom) { return(Math.floor((crd+180)/360*Math.pow(2,zoom))); }
function lng2tile(lng,zoom) { return(crd2tile(lng,zoom)); }
function lat2tile(lat,zoom) { return(Math.pow(2,zoom) -1 -crd2tile(lat2y(lat),zoom) ); }
function generateTilsURLs(zoom,viewPort){
var tileSpan = 360 / Math.pow(2,zoom);
var tl = {x:lng2tile(viewPort.x0, zoom), y:lat2tile(viewPort.y1, zoom)}
var br = {x:lng2tile(viewPort.x1, zoom), y:lat2tile(viewPort.y0, zoom)}
var svgmap = document.getElementById("svgMap");
svgmap.setAttribute("viewBox",viewPort.x0+" "+(-lat2y(viewPort.y1))+" "+(viewPort.x1-viewPort.x0)+" "+(lat2y(viewPort.y1)-lat2y(viewPort.y0)));
var contents='<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="mercator" />';
for ( var ty = tl.y ; ty <= br.y ; ty++ ){
for ( var tx = tl.x ; tx <= br.x ; tx++ ){
var tileURL = ((baseURL.replace("[level]",zoom)).replace("[ty]",ty)).replace("[tx]",tx);
var mecratorCoordinatesBox = {x:tx*tileSpan-180, y:180-ty*tileSpan, width:tileSpan, height:tileSpan};
contents+='<image x="'+ mecratorCoordinatesBox.x +'" y="'+(-mecratorCoordinatesBox.y)+'" width="'+mecratorCoordinatesBox.width+'" height="'+mecratorCoordinatesBox.height+'" xlink:href="'+tileURL+'"/>';
}
}
svgmap.innerHTML=contents;
}
</script>
<body>
<svg id="svgMap" width="800" height="800">
</svg>
</body>
</html>
If you copy the result for them, it’s easily achievable.
<!doctype html>
<html>
<head>
<title>tile generation test</title>
</head>
<body>
<svg id="svgMap" width="800" height="800" viewBox="133 -41.13768200192672 5 6.145571135845877">
<image x="132.1875" y="-42.1875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/222/98.png"></image>
<image x="133.59375" y="-42.1875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/223/98.png"></image>
<image x="135" y="-42.1875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/224/98.png"></image>
<image x="136.40625" y="-42.1875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/225/98.png"></image>
<image x="137.8125" y="-42.1875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/226/98.png"></image>
<image x="132.1875" y="-40.78125" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/222/99.png"></image>
<image x="133.59375" y="-40.78125" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/223/99.png"></image>
<image x="135" y="-40.78125" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/224/99.png"></image>
<image x="136.40625" y="-40.78125" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/225/99.png"></image>
<image x="137.8125" y="-40.78125" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/226/99.png"></image>
<image x="132.1875" y="-39.375" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/222/100.png"></image>
<image x="133.59375" y="-39.375" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/223/100.png"></image>
<image x="135" y="-39.375" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/224/100.png"></image>
<image x="136.40625" y="-39.375" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/225/100.png"></image>
<image x="137.8125" y="-39.375" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/226/100.png"></image>
<image x="132.1875" y="-37.96875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/222/101.png"></image>
<image x="133.59375" y="-37.96875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/223/101.png"></image>
<image x="135" y="-37.96875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/224/101.png"></image>
<image x="136.40625" y="-37.96875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/225/101.png"></image>
<image x="137.8125" y="-37.96875" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/226/101.png"></image>
<image x="132.1875" y="-36.5625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/222/102.png"></image>
<image x="133.59375" y="-36.5625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/223/102.png"></image>
<image x="135" y="-36.5625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/224/102.png"></image>
<image x="136.40625" y="-36.5625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/225/102.png"></image>
<image x="137.8125" y="-36.5625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/226/102.png"></image>
<image x="132.1875" y="-35.15625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/222/103.png"></image>
<image x="133.59375" y="-35.15625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/223/103.png"></image>
<image x="135" y="-35.15625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/224/103.png"></image>
<image x="136.40625" y="-35.15625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/225/103.png"></image>
<image x="137.8125" y="-35.15625" width="1.40625" height="1.40625" xlink:href="https://tile.openstreetmap.org/8/226/103.png"></image>
</svg>
</body>
</html>
Of course, the center position will not be gridded by the tiles.
Because I like SVG :-), this example uses SVG element as container, but maybe you could write without them if you make full use of css.
The markers are characterized by the fact that the size of the markers remains constant and independent of the zoom. One of the web specifications related to this is SVG’s Vector Effect.
Thank you for these detailed responses, Takagi-san! Yes, we do need to add more SVG cross-references, including to proposals which have not been implemented in browsers (yet!) .
Your point about the static map case is good, too. A reminder that there are multiple ways to achieve the same use case.
From the live chat during the presentation:
Satoru Takagi @satakagi:
The ability to dynamically retrieve a tiled image according to its viewport is commonly used not only for maps, but also for general websites. https://www.w3.org/TR/resource-priorities/Doug Schepers @shepazu: Zooming and panning medical scans is another related case And for that case, you’d want to be able to tag a relative location/feature (a discoloration or a mass), and annotate it Both things useful for a map
Bryan Haberberger @thehabes: Both are also useful for images in general…Image of a Map and Image of an X-Ray can be treated with the same considerations. Annotation as Features is also very key
More links from the workshop chat:
Satoru Takagi @satakagi: https://www.dublincore.org/specifications/dublin-core/dcmi-terms/terms/Location/
Bryan Haberberger @thehabes: Heck yea. I can target all your data with GeoJSON-LD Web Annotations…
Satoru Takagi @satakagi: @thehabes , Where is the specification link for GeoJSON-LD Web Annotations?
Bryan Haberberger @thehabes: @satakagi https://www.w3.org/TR/annotation-model/ with GeoJSON bodies + https://www.w3.org/TR/json-ld11/ context control. LD context is at https://geojson.org/geojson-ld/. It isn’t all put together as an official solution, but is very possible : https://preview.iiif.io/cookbook/0182-geolocated-simple-manifest/recipe/0182-geolocated-simple-manifest/. This is what I will talk about on the Wednesday breakout, so no more spoilers.
When we talk about lazy-loading we should reference the living standard definition (the loading attribute): https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:lazy-loading-attribute
@Malvoz Strange, I thought that was already there… But either way, definitely agree!
For
andThere are special requirements for interactivity in maps. In many cases, it is required to be able to hit test against objects that have been overlapped due to layering or data congestion.
<svg viewBox="0,0,100,100">
<a href="hitBlue.html">
<circle cx="30" cy="30" r="20" fill="blue"/>
</a>
<a href="hitGreen.html">
<circle cx="50" cy="30" r="20" fill="green" opacity="0.6"/>
</a>
</svg>
In this example, it is required to be able to choose two links for the overlapping part in the middle.
Strange, I thought that was already there…
@AmeliaBR Yes there is for lazy-loading tiles. I’ve opened a new issue for the use case of lazy-loading the map viewer. 
edited
In your presentation, you demonstrated that client side image maps are used for geographic weather maps in Canada (even though there are non-geographic [yet accessible] semantics implied), and you conversely showed that modern Web mapping frameworks are used for non-geographic “deep zoom” applications. This is a comment, not a question, but I believe this demonstrates that Web maps are a “shared primitive” of the Web platform.
We have such a strong interest in geographical maps that we tend to focus on them. I agree that deep zooming is becoming one of the fundamental features of web content. But if you mean by “Web Map” a geographical map, then it seems to me that this is a geographic industry-centric view.
We should recognize that deep zooming is not used primarily just in frameworks for geographic web maps, and that there are many features and services out there that are not for geographic maps that have deep zooming capabilities. And many of them use frameworks and libraries that are not specifically focused on geographical maps.
For example, we see a lot of deep zoom functionality in electronic publishing, especially in large flyers and catalogs, whiteboard services like miro, and there are many well-known frameworks that are not for geographic maps, such as OpenSeadragon, which I pointed out before.