How does styling MapML with CSS work?

[zcorpan]

4.3 Styling
MapML documents can be styled with Cascading Style Sheets.

How does this work?

What is the rendering model of MapML? If it's intended to be stylable with CSS, I assume the rendering model should be in terms of CSS. Does CSS have the primitives that maps need?

How does the geometry element map to CSS?

How does tile map to CSS?

How is zooming and panning explained by CSS's model? Panning is kinda like scrolling, except with a map you could pan around in both directions and get back where you started. CSS doesn't have a zooming primitive I believe.

For <layer src=somemap.mapml>, how do you style that content? Does the MapML document need to provide its own CSS to style itself? Can the parent document style it?

[prushforth]

Thank you for these questions. I will do my best to answer them over the next few days, and action them in the specifications as required.

4.3 Styling
MapML documents can be styled with Cascading Style Sheets.

How does this work?

So far, not even a complete theory to describe how it works generally, but the idea is that because MapML would be HTML, it would be part of the DOM when included inline in a <layer>_mapml goes here_</layer> element, so, elements in the DOM would have style properties similar to most HTML elements. The "MapML" elements could be targeted/selected and styled by CSS in the page. When included by reference by a <layer src="mapml document reference here"></layer> element, the stylesheets that are referenced from that document would apply to that document only. If I understand correctly, the <img src="SVG document reference here"> works like that.

What is the rendering model of MapML? If it's intended to be stylable with CSS, I assume the rendering model should be in terms of CSS.

Yes, I think so. The consequence is getting CSS to support the TCRS concept. I think it comes down to a difference in rendering model. Within the map extent, the rendering model should be layers, drawn according to the painters model, one "on top" of the other, in document order. Within a layer, the tiled coordinate reference system would drive rendering, in that elements would be drawn according to their coordinates in the TCRS space as well as according to document order. Outside the map extent, the standard CSS rendering is down the page, according to the CSS coordinate system layout I think, with scrollbars being created by the browser automatically, to allow the user to scroll to the content in its position. Within the map extent, in contrast, the TCRS space is managed by the user by zooming and panning, not scrolling. I think that's the major difference.

Does CSS have the primitives that maps need?

I believe it has (many/most of) the primitives, but the rendering model of maps is the painters model (I think) which may be different than standard CSS which draws stuff in document order and provides scrollbars. Although, maybe the MapML templated content model could prove useful for driving document virtual scrollers without having to load an infinite document (Maps are effectively infinite documents, and the template-driven approach works well for us).

How does the geometry element map to CSS?

The thing about geometries is that they have a standard model which lends itself to markup-based encoding, similar but not identical to human-readable text/prose. Each geometry part should be separately targeted/selectable by CSS, so that a) it can be styled and b) it can be linked (<a href="...">_coordinate pairs OR whole geometries here_</a>) so that we don't have to serve the whole of a geometry to a simple web map that is only looking at a small portion of the map (geometries can be huge).

How does tile map to CSS?

A <tile> element is another kind of geographic feature, I think; just a square, regular one whose coordinates are specified entirely by zoom,row,column coordinates. CSS would have to: positioning it relative to other tiles and zoom levels; adjust its opacity and visibility; use it as a "location" relative to which we would have to generate location events, at positions on its surface/exterior: top-left; bottom-left; top-right; bottom-right; center-left; center-right; center.

How is zooming and panning explained by CSS's model? Panning is kinda like scrolling, except with a map you could pan around in both directions and get back where you started. CSS doesn't have a zooming primitive I believe.

I believe you're right. I believe that support for the concept of "Tiled Coordinate Reference System" (TCRS) would make maps understandable for CSS developers. At least, I tried to consolidate all the ideas about geospatial coordinate reference systems that seemed relevant to a standard map widget into the concept I called "TCRS". This concept isn't radically different from similar concepts in other de facto standards/libraries such as Leaflet, OpenStreetMap, TileCache, GeoWebCache, WMTS etc., it just tries to put all the terminology into a coherent whole thing YMMV, inside the MapML specification.

For <layer src=somemap.mapml>, how do you style that content? Does the MapML document need to provide its own CSS to style itself?

Yes, that's the idea.

Can the parent document style it?

As mentioned earlier, I don't think you want to allow a web dev to override the style of a remote MapML document. That would be like allowing the same thing for an iframe's HTML content from a third party. Let the map author provide styles, if they like, or provide default styles if the map author doesn't. If it's open data and if the html author wants to do that, they can harvest the data and style it themselves. If it's not open data, don't make it too easy.