Post on 03-Aug-2020
INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION
Styling on the Web(CSS & SLD)
1.0 - Barend Köbben <b.j.kobben@utwente.nl>
© ITC Dept. of GeoInformation Processing
Barend Köbben 2
THE CARTOGRAPHIC COMMUNICATION PROCESS
3
Steps in cartographic design
Application of choices
Choice of representationmethod (type of map)
Translation:geospatial data characteristics
=> choice of visual variables
Geospatial data analysis
cartographicgrammar
(thematic/topographic)mapping
Barend Köbben 4
CARTOGRAPHIC GRAMMAR
Rules of thumb for effective cartographiccommunication
Why do we actually bother to usevisualisation rules...?
5
6
7
8
Barend Köbben 9
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 10
Cartographic Grammar
After JH Geels (1988)
11
TOPOGRAPHIC MAPS
12
THEMATIC MAPS
13
ROAD MAPS – TOPO OR THEME?
14
WebCartographyWebCartography
© ITC - University of Twente / Barend Köbben; GIP dept. 15
separating style from content
Part of “separation of concerns”:in computer science, separation of concerns is adesign principle for separating a computerprogram into distinct sections, such that eachsection addresses a separate concern.
© ITC - University of Twente / Barend Köbben; GIP dept. 16
separating style from content
In webpages:● HTML is used for organization of webpagecontent
● CSS is used for definition of contentpresentation style
(and Javascript defines how the contentinteracts with the user)
Note that we can also include styling directly inthe HTML definitions - a relic of older versions
© ITC - University of Twente / Barend Köbben; GIP dept. 17
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 stylingdirectly in the WMS definition, or have a fixeddefault style
© ITC - University of Twente / Barend Köbben; GIP dept. 18
why separate style & content?
● publication of same content in multiplepresentation formats
– based on user preferences, different webbrowsers, the type of device being used, thegeographic location of the user, etc.
– devices not able to understand the stylingstill display the content
● Site-wide consistency● Bandwidth● Accessibility
© ITC - University of Twente / Barend Köbben; GIP dept. 19
Implementations of this concept
Many implementations exist. For “ourwork” 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. 20
CSS: Cascading Style Sheets
● CSS defines how HTML elements are tobe displayed
● CSS Styles were added to HTML 4.0● CSS is a cascading series of stylingrules
© ITC - University of Twente / Barend Köbben; GIP dept. 21
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 elementsto red, you can write the following CSSrule:
h1 { color: red }
© ITC - University of Twente / Barend Köbben; GIP dept. 22
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. 23
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. 24
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. 25
CSS principle: “cascading”
A CSS rule inherits from the rules on its parents, and canadd 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. 26
A set of Implementation Specifications for
OWS: Open Web Services & related Encodings
(vector)data encoding:– Geographic Markup Language
(GML)
– Keyhole ML (KML)
Data Access:– Web Feature Service (WFS)
– Web Coverage Service (WCS)
Portrayal:– Web Mapping Service (WMS)
– Symbology Encoding & StyledLayer Descriptor for WMS (SE-SLD)
Metadata:– Catalog Service
Web (CSW)
Service configurations:– OWS Context
27
Preserving and describing styles
In “basic” WMS, styling is done by WMSserver
Information about styling is not availableseperately
XML formatting for describing styles: StyledXML formatting for describing styles: StyledLayer Descriptor (SLD)Layer Descriptor (SLD)
28
Styled Layer Descriptor (SLD)
– Specification for an XML file to apply styles based onselection criteria against a map or feature service(typically WFS or WMS)
– Style sheet for symbolizing vector or raster data– Not an interface specification
29
Web Browser
WMS Client
WebFeatureServer
SLDDoc
WebMapServer
GetMap
Map Features
GetFeature
FetchReference XML
Using an SLD
references Add to WMS “get” request:SLD=reference_SLD_URL
30
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
31
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
© ITC - University of Twente / Barend Köbben; GIP dept. 32
Portrayal specifications: SLD
The OGC Styled Layer Descriptor (SLD)standard defines a language forexpressing styling of geospatial data:
XML format to allow user-definedsymbolizationCan be used to portray the output of WMS,WFS & WCS
© ITC - University of Twente / Barend Köbben; GIP dept. 33
Portrayal specifications: SLD
SLD was defined in:● OGC Styled Layer Descriptor Implementation
Specification, Version 1.0.0
Subsequently the functionality of SLD has been splitinto two specifications:
● OGC Symbology Encoding ImplementationSpecification, Version 1.1.0
● OGC Styled Layer Descriptor profile of the WebMap Service Implementation Specification,Version 1.1.0
GeoServer implements the SLD 1.0.0 standard, aswell as some parts of the SE 1.1.0 and WMS-SLD 1.1.0standards.
© ITC - University of Twente / Barend Köbben; GIP dept. 34
Elements of SLD
The root element for anSLD is<StyledLayerDescriptor>.
It contains Layers andStyles elements whichdescribe how a map is tobe composed and styled.
There are several Layerstypes:● 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> <CssParametername="stroke">#FF0000</CssParameter> <CssParameter name="stroke-width">6px</CssParameter> </Stroke> </LineSymbolizer> </Rule> </FeatureTypeStyle> </UserStyle> </NamedLayer></StyledLayerDescriptor>
© ITC - University of Twente / Barend Köbben; GIP dept. 35
Elements of SLD
Layers contain one ormore Style elementswhich describe how amap is to be composedand styled.
Styles in turn contain oneor 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> <CssParametername="stroke">#FF0000</CssParameter> <CssParameter name="stroke-width">6px</CssParameter> </Stroke> </LineSymbolizer> </Rule> </FeatureTypeStyle> </UserStyle> </NamedLayer></StyledLayerDescriptor>
36
OGC:Filter
Custom XML query language
“SQL in XML” (almost)
Spatial and non-spatial query capabilities:– Logical– Spatial– Comparative
37
OGC:Filter
SQL:select * from roads where roadtype = 1
OGC:Filter:<Filter>
<PropertyIsEqualTo>
<PropertyName>roadtype</PropertyName>
<Literal>1</Literal>
</PropertyIsEqualTo>
</Filter>
© ITC - University of Twente / Barend Köbben; GIP dept. 38
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'spopulation attribute value > 100000
© ITC - University of Twente / Barend Köbben; GIP dept. 39
<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. 40
<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> </Rule> </FeatureTypeStyle>
© ITC - University of Twente / Barend Köbben; GIP dept. 41
<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. 42
More information
● CSS reference and tutorial:http://www.w3schools.com/css/
● Creating SLDs can be done using QGIS: anylayer style can be exported to an SLD file
● Validating these styles can be done in theGeoserver interface
● Geoserver SLD Cookbook:docs.geoserver.org/stable/en/user/styling/sld-cookbook/