Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern...
Transcript of Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern...
![Page 1: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/1.jpg)
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
![Page 2: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/2.jpg)
Barend Köbben 2
THE CARTOGRAPHIC COMMUNICATION PROCESS
![Page 3: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/3.jpg)
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
![Page 4: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/4.jpg)
Barend Köbben 4
CARTOGRAPHIC GRAMMAR
Rules of thumb for effective cartographiccommunication
Why do we actually bother to usevisualisation rules...?
![Page 5: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/5.jpg)
5
![Page 6: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/6.jpg)
6
![Page 7: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/7.jpg)
7
![Page 8: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/8.jpg)
8
![Page 9: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/9.jpg)
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
![Page 10: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/10.jpg)
Barend Köbben 10
Cartographic Grammar
After JH Geels (1988)
![Page 11: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/11.jpg)
11
TOPOGRAPHIC MAPS
![Page 12: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/12.jpg)
12
THEMATIC MAPS
![Page 13: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/13.jpg)
13
ROAD MAPS – TOPO OR THEME?
![Page 14: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/14.jpg)
14
WebCartographyWebCartography
![Page 15: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/15.jpg)
© 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.
![Page 16: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/16.jpg)
© 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
![Page 17: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/17.jpg)
© 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
![Page 18: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/18.jpg)
© 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
![Page 19: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/19.jpg)
© 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
![Page 20: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/20.jpg)
© 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
![Page 21: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/21.jpg)
© 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 }
![Page 22: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/22.jpg)
© 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>
![Page 23: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/23.jpg)
© 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>
![Page 24: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/24.jpg)
© 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'
![Page 25: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/25.jpg)
© 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.
![Page 26: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/26.jpg)
© 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
![Page 27: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/27.jpg)
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)
![Page 28: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/28.jpg)
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
![Page 29: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/29.jpg)
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
![Page 30: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/30.jpg)
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
![Page 31: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/31.jpg)
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
![Page 32: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/32.jpg)
© 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
![Page 33: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/33.jpg)
© 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.
![Page 34: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/34.jpg)
© 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>
![Page 35: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/35.jpg)
© 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>
![Page 36: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/36.jpg)
36
OGC:Filter
Custom XML query language
“SQL in XML” (almost)
Spatial and non-spatial query capabilities:– Logical– Spatial– Comparative
![Page 37: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/37.jpg)
37
OGC:Filter
SQL:select * from roads where roadtype = 1
OGC:Filter:<Filter>
<PropertyIsEqualTo>
<PropertyName>roadtype</PropertyName>
<Literal>1</Literal>
</PropertyIsEqualTo>
</Filter>
![Page 38: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/38.jpg)
© 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
![Page 39: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/39.jpg)
© 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.
![Page 40: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/40.jpg)
© 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>
![Page 41: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/41.jpg)
© 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>
![Page 42: Styling on the Web - docs.fct.unesp.brdocs.fct.unesp.br/docentes/carto/ivanova/workshops/Modern Web... · INTERNATIONAL INSTITUTE FOR GEO-INFORMATION SCIENCE AND EARTH OBSERVATION](https://reader034.fdocuments.in/reader034/viewer/2022050415/5f8bb04b205b87367f187b45/html5/thumbnails/42.jpg)
© 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/