Styling on the Web (CSS & SLD)

Styling on the Web (CSS & SLD) 1.0 - Barend Köbben <b.j.kobben@utwente.nl> ITC Dept. of GeoInformation Processing INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION

THE CARTOGRAPHIC COMMUNICATION PROCESS Barend Köbben 2

Steps in cartographic design Geospatial data analysis Translation: geospatial data characteristics => choice of visual variables Choice of representation method (type of map) cartographic grammar (thematic/topographic) mapping Application of choices 3

CARTOGRAPHIC GRAMMAR Rules of thumb for effective cartographic communication Why do we actually bother to use visualisation rules...? Barend Köbben 4

Based on the semiology of graphics Jacques Bertin: Sémiologie Graphique. (Mouton, Paris/Den Haag, 1967) First to systematically describe how graphics work : How the human mind finds meaning in graphical symbols Barend Köbben 9

Cartographic Grammar Barend Köbben After JH Geels (1988) 10

TOPOGRAPHIC MAPS 11

THEMATIC MAPS 12

ROAD MAPS TOPO OR THEME? 13

WebCartography 14

separating style from content Part of separation of concerns : in computer science, separation of concerns is a design principle for separating a computer program into distinct sections, such that each section addresses a separate concern. ITC - University of Twente / Barend Köbben; GIP dept. 15

separating style from content In webpages: HTML is used for organization of webpage content CSS is used for definition of content presentation style (and Javascript defines how the content interacts with the user) Note that we can also include styling directly in the HTML definitions - a relic of older versions ITC - University of Twente / Barend Köbben; GIP dept. 16

separating style from content In OGC geo-webservices: WMS, WFS or WCS is used for the content SLD is used for definition of content presentation style Note that in WMS we can also include styling directly in the WMS definition, or have a fixed default style ITC - University of Twente / Barend Köbben; GIP dept. 17

why separate style & content? publication of same content in multiple presentation formats based on user preferences, different web browsers, the type of device being used, the geographic location of the user, etc. devices not able to understand the styling still display the content Site-wide consistency Bandwidth Accessibility ITC - University of Twente / Barend Köbben; GIP dept. 18

Implementations of this concept Many implementations exist. For our work the most relevant are: CSS = Cascading Style Sheet standard from W3C specifically for webpages in conjunction with HTML SLD = Styled Layer Descriptors standard from OGC specifically for geowebservices in conjunction with WMS & WFS ITC - University of Twente / Barend Köbben; GIP dept. 19

CSS: Cascading Style Sheets CSS defines how HTML elements are to be displayed CSS Styles were added to HTML 4.0 CSS is a cascading series of styling rules ITC - University of Twente / Barend Köbben; GIP dept. 20

CSS principle: Rules A small HTML document: <HTML> <HEAD> </HEAD> <BODY> <H1>Bach's home page</h1> <P>Bach was a prolific composer. </BODY> </HTML> To set the text color of the H1 elements to red, you can write the following CSS rule: h1 { color: red } ITC - University of Twente / Barend Köbben; GIP dept. 21

CSS principle: Rules The rule can be added 'inline'... <HTML> <HEAD> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1>Bach's home page</h1> <P>Bach was a prolific composer. </BODY> </HTML> ITC - University of Twente / Barend Köbben; GIP dept. 22

CSS principle: Rules...or can be referenced in an external file <HTML> <HEAD> <LINK rel="stylesheet" href="bach.css" type="text/css"> </HEAD> <BODY> <H1>Bach's home page</h1> <P>Bach was a prolific composer. </BODY> </HTML> ITC - University of Twente / Barend Köbben; GIP dept. 23

CSS principle: Rules h1 { color: red } A CSS rule consists of two parts: selector 'h1' (not case-sensitive!) declaration 'color: red' the declaration has two parts: property name 'color' property value 'red' ITC - University of Twente / Barend Köbben; GIP dept. 24

CSS principle: cascading A CSS rule inherits from the rules on its parents, and can add to (or override) parts of it: body { font-family: "Courier"; font-size: 12pt; } h1 { font-size: 16pt; color: red; } This will result in all the text in the page being 12pt black (the default colour), except the H1, that will be 16pt red. ITC - University of Twente / Barend Köbben; GIP dept. 25

OWS: Open Web Services & related Encodings A set of Implementation Specifications for (vector)data encoding: Geographic Markup Language (GML) Keyhole ML (KML) Data Access: Metadata: Catalog Service Web (CSW) Service configurations: OWS Context Web Feature Service (WFS) Web Coverage Service (WCS) Portrayal: Web Mapping Service (WMS) Symbology Encoding & Styled Layer Descriptor for WMS (SESLD) ITC - University of Twente / Barend Köbben; GIP dept. 26

Preserving and describing styles In basic WMS, styling is done by WMS server Information about styling is not available seperately XML formatting for describing styles: Styled Layer Descriptor (SLD) 27

Styled Layer Descriptor (SLD) Specification for an XML file to apply styles based on selection criteria against a map or feature service (typically WFS or WMS) Style sheet for symbolizing vector or raster data Not an interface specification 28

Using an SLD WMS Client Web Browser GetMap Map Fetch Reference references GetFeature Web Map Server Features Web Feature Server XML SLD Doc Add to WMS get request: SLD=reference_SLD_URL 29

OGC:SLD = Styled Layer Descriptor Add-on specification to OGC:WMS SLD-enabled WMS Enables custom styling Data at the server does not have to change Client software either: sends SLD XML document refers to SLD on server 30

SLDs as Digital Cartographic Models DCMs stored seperately from data XML: processing by XML tools (as with GML, GetCapabilties, SVG, etc) classification rules using Filters most usual cartographic symbology supported: casing for roads patterned fills text labelling symbol libraries in raster (GIF, PNG) orvector (SVG) minimum- & maximum-scales for visualisation 31

Portrayal specifications: SLD The OGC Styled Layer Descriptor (SLD) standard defines a language for expressing styling of geospatial data: XML format to allow user-defined symbolization Can be used to portray the output of WMS, WFS & WCS ITC - University of Twente / Barend Köbben; GIP dept. 32

Portrayal specifications: SLD SLD was defined in: OGC Styled Layer Descriptor Implementation Specification, Version 1.0.0 Subsequently the functionality of SLD has been split into two specifications: OGC Symbology Encoding Implementation Specification, Version 1.1.0 OGC Styled Layer Descriptor profile of the Web Map Service Implementation Specification, Version 1.1.0 GeoServer implements the SLD 1.0.0 standard, as well as some parts of the SE 1.1.0 and WMS-SLD 1.1.0 standards. ITC - University of Twente / Barend Köbben; GIP dept. 33

Elements of SLD The root element for an SLD is <StyledLayerDescriptor>. It contains Layers and Styles elements which describe how a map is to be composed and styled. There are several Layers types: NamedLayer UserLayer InlineFeature <StyledLayerDescriptor version="1.0.0"> <NamedLayer> <Name>Walking Route</Name> <UserStyle> <Title>Walking Route</Title> <FeatureTypeStyle> <Rule> <Title>My Routes</Title> <LineSymbolizer> <Stroke> <CssParameter name="stroke">#ff0000</cssparameter> <CssParameter name="strokewidth">6px</cssparameter> </Stroke> </LineSymbolizer> </Rule> </FeatureTypeStyle> </UserStyle> </NamedLayer> </StyledLayerDescriptor> ITC - University of Twente / Barend Köbben; GIP dept. 34

Elements of SLD Layers contain one or more Style elements which describe how a map is to be composed and styled. Styles in turn contain one or more Rules and Filters. <StyledLayerDescriptor version="1.0.0"> <NamedLayer> <Name>Walking Route</Name> <UserStyle> <Title>Walking Route</Title> <FeatureTypeStyle> <Rule> <Title>My Routes</Title> <LineSymbolizer> <Stroke> <CssParameter name="stroke">#ff0000</cssparameter> <CssParameter name="strokewidth">6px</cssparameter> </Stroke> </LineSymbolizer> </Rule> </FeatureTypeStyle> </UserStyle> </NamedLayer> </StyledLayerDescriptor> ITC - University of Twente / Barend Köbben; GIP dept. 35

OGC:Filter Custom XML query language SQL in XML (almost) Spatial and non-spatial query capabilities: Logical Spatial Comparative 36

OGC:Filter SQL: select * from roads where roadtype = 1 OGC:Filter: <Filter> <PropertyIsEqualTo> <PropertyName>roadtype</PropertyName> <Literal>1</Literal> </PropertyIsEqualTo> </Filter> 37

Rules & Filters A <Rule> is applied when its filter condition (if any) is true for a feature: <Rule> <Filter> <PropertyIsGreaterThan> <PropertyName>POPULATION</PropertyName> <Literal>100000</Literal> </PropertyIsGreaterThan> </Filter> This rule will be applied when the feature's population attribute value > 100000 ITC - University of Twente / Barend Köbben; GIP dept. 38

<Rule> element contains: Tag Req? Description <Name> No Specifies a name for the rule. <Title> No Specifies a title for the rule. The title is used in display lists and legends. <Abstract> No Specifies an abstract describing the rule. <Filter> No Specifies a filter controlling when the rule is applied. <MinScaleDenominat or> No Specifies the minimum scale denominator (inclusive) for the scale range in which this rule applies. If present, the rule applies at the given scale and all smaller scales. <MaxScaleDenominat or> No Specifies the maximum scale denominator (exclusive) for the scale range in which this rule applies. If present, the rule applies at scales larger than the given scale. <PointSymbolizer> 0..N Specifies styling as points. <LineSymbolizer> 0..N Specifies styling as lines. <PolygonSymbolizer > 0..N Specifies styling as polygons. <TextSymbolizer> 0..N Specifies styling for text labels. <RasterSymbolizer> 0..N Specifies styling for raster data. ITC - University of Twente / Barend Köbben; GIP dept. 39

<Symbolizer> acts like a painter <FeatureTypeStyle > <Rule> <Title>My Routes</Title> <LineSymbolizer> <Stroke> <CssParameter name="stroke">#ff0000</cssparameter> <CssParameter name="stroke-width">6px</cssparameter> </Stroke> </LineSymbolizer> <LineSymbolizer> <Stroke> <CssParameter name="stroke">#ffffff</cssparameter> <CssParameter name="stroke-width">5px</cssparameter> </Stroke> </LineSymbolizer> </Rule> </FeatureTypeStyle> ITC - University of Twente / Barend Köbben; GIP dept. 41

More information CSS reference and tutorial: http://www.w3schools.com/css/ Creating SLDs can be done using QGIS: any layer style can be exported to an SLD file Validating these styles can be done in the Geoserver interface Geoserver SLD Cookbook: docs.geoserver.org/stable/en/user/styling/sld-cookbook/ ITC - University of Twente / Barend Köbben; GIP dept. 42