styling on the web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/modern...

INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION

Styling on the Web(CSS & SLD)

1.0 - Barend Köbben <[email protected]>

© 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...?

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.



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



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


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


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


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


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 }



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>



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



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'


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.


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


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


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.


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>


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>


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


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


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


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


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/

http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/

styling on the web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/modern...

Documents