Use Cases and Requirements for Web Maps

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.

1 Like

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.)

1 Like

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

For “3.1.3 Display a region of map data as a static image”,

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.

For “5.2.1 Show pinpoint locations or custom markers on the map”,

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.

1 Like

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

2 Likes

@Malvoz Strange, I thought that was already there… But either way, definitely agree!

For

and

There 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.

1 Like

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. :slight_smile:

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.

1 Like