Styling guide for GeoServer
Geoserver is without a doubt one of the best ways to share spatial data following OGC standards. Geoserver allows us to expose the data in WMS format, making the life of developers and users pretty easy by showing a ton of vector data in a raster (png, jpeg, etc. ) format.
This blog introduces one more area of GeoServer capability, i.e. styling the data on the fly. To begin with, the vector data has no face, it is just a file having coordinate information and metadata of that location. It has no sense of styling itself. Hence it is the responsibility of the client side to render this data. Mapping libraries such as OpenLayers, leafletjs, Mapbox, etc. can also take care of styling, but this means that we need to add vector data on the client (browser) which reduces the performance of an overall application. Geoserver solves this problem by providing an on-the-fly styling component thus reducing the efforts for a client to load and then style the data, and also opens the whole spectrum of permutations and combinations of styling. Some of the most widely used styling combinations can be:
1. Attribute-based styling (Seeing different geometry in different style based on property in the column)
An example of this can be a State boundary map of the country, showing states in a different color based on the population it has. e.g. >10M can be red, between 2M and 10M can be yellow and < 2M can be green.
This gives us instant judgment of states without even going through the data of each state
2. Zoom based styling ( Seeing different geometry based on current zoom level)
An example of this can be basemap, when we look at any basemap from country-level zoom, we can only see country boundaries, as we start zooming in more and more, details start popping up, etc. This styling allows us to speed up the performance of an application by not loading all the data at the same time
3. Combining Multiple symbols ( Putting multiple styling on the same geometry)
An example of this can be creating a custom symbol when we can have a triangle inside a square inside the circle.
This Blogpost will walk you through all the different styling types and methods available in GeoServer to play with. Each method has its own pros and cons and depending upon the use case you can pick up the method. Please note that even though the way of writing styling in each method is different, the logic underneath stays the same.
Once the GeoServer is running, go to the style under the Data tab.
This Tab contains all the existing styles available on GeoServer along with the ability to View, Add, or delete the individual style.
When we click on a specific style, a style editor window pops up, which contains various tabs and information. I’ve numbered some important things to check in the style editor
1. Name — Name of the style
2. Workspace — Which workspace does the style belongs to, if it is empty, it can be accessed in all workspaces
3. Format — Format of writing style, These are the methods of writing styles, most widely used methods are :
3.1 SLD — SLDs are OGC standards of writing styling, which is by default method selected to create style. Although SLDs are most flexible to write, there are certainly some complications attached to it. (More about it can be found below in the blog)
3.2 YSLD — YSLDs are similar to SLDs but written in YAML, making it easier for authoring
3.3 CSS Styling — I think it is safe for me to assume that everyone reading this is familiar with CSS and its basic application, Using this method removed the complex tag writing that is required in SLD, hence this becomes the obvious choice for web developers
3.4 MBStyle(JSON) — In a world full of APIs it becomes important to distill down everything to JSON format and using the MBStyle method of writing style allows developers to continue their same love for JSON to define styling.
4. Default Style — Geoserver allows us to populate some default styles for geometries such as Point, LineString, Polygon, and also raster. This helps in speeding up the process of creating style, since the basic skeleton remains the same most of the time, with a slight change of color, thickness, opacity, etc.
5. Copy Exiting Style — As the name suggests, you can copy a predefined style and then make modifications to it.
An example of this can be if I have a style for different population classification for India, I can copy the same style to create a new style and just change the population number bars, to make it sensible according to USA data.
6. Upload Style file — Geoserver allows users to upload a style file (e.g. .sld file ) created in a 3rd party application (e.g. QGIS ), saving efforts of developers to rewrite the styling, and also providing the ability for cartographers to create styling on QGIS and use in GeoServer.
7. Preview Legend — This area shows the styling legend, (which can also be saved as an image, see this ) Which helps the user to visualize the styling before using it in the actual app.
8. Text Area — This is the actual area where we write the styling in the desired method. Whenever we generate a default style or copy an existing style, it is displayed in the text area for further edits.
9. Button Group — This button group involves 4 buttons
9.1 Validate — Once the desired changes in styling are made, clicking on this button checks whether all the changes are valid, all the tags are closed and the code is in the desired format.
9.2 Save — Once the validation is done, we can save the styling to save it and be on the same page for further changes
9.3 Apply — Once the validation is done, we can click on Apply to save the changes and apply it to the layer and get out of the style editor.
9.4 Cancel — Clicking on cancel will discard all changes and close the style editor.
10 Publishing (Tab) — Publishing tab shows the layer list along with Default & Associated checkboxes.
Layer with default checked represents that those layers use that style as a default style i.e. when that layer is rendered, it will use this style.
Layers checked with Associated checkbox represents a layer that can use this styling, Generally, we should associate layer with similar geometrical shape for a given style.
11. Layer Preview — Layer preview is the quickest way to visualize the style with the actual layer within the style editor, this also allows users to make changes in the style and see it right away.
12. Layer Attributes — GeoServer picks up the layer to show its column on which we can apply styling, these columns can hold information such as string, integer, boolean, etc. which then can be used to create more detailed styling.
These are all the features that we get for an individual style.
Methods of styling in GeoServer
1. SLD Styling (Styled Layer Descriptor)
SLD is the most widely used and also the default method of styling in GeoServer. Standards for SLD are set by OGC, you can read the official documentation 👉here 👈 . In layman's terms, SLD is an XML document holding information about the styling of that data which includes things like thickness, color, dash, opacity, etc.
Geoserver’s official documentation for SLD is the best place to learn it. SLD Cookbook on the above link will walk you through general styling scenarios for all geometry types ( Point, Line, Polygon, Raster) including :
1. Point layer with different shapes and graphics
2. Line and Polygon with different outline properties
3. Zoom Based styling (Toggling Display based on current zoom level)
4. Labelling the feature, etc.
Even though the official doc can walk you through how to write a code, I’ll add some of the tips and tricks while writing SLDs.
1. Using External Images for symbol: Official Doc represents how to write code, but it can get confusing about where to store the image to use in that code.
If you are pointing to the image that is hosted, you can add the link to an image like this
<FeatureTypeStyle>
<Rule>
<PointSymbolizer>
<Graphic>
<ExternalGraphic>
<OnlineResource
xlink:type=”simple”
xlink:href=”http://www.pngall.com/wp-content/uploads/2017/05/Map-Marker-PNG-HD.png” />
<Format>image/png</Format>
</ExternalGraphic>
<Size>6</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>If you want to use the image which is stored on your computer locally, you have to paste that image in ‘geoserver/data_dir/styles/’ then you can refer to the image by its name in the style, like this :
<FeatureTypeStyle>
<Rule>
<PointSymbolizer>
<Graphic>
<ExternalGraphic>
<OnlineResource
xlink:type=”simple”
xlink:href=”marker.png” />
<Format>image/png</Format>
</ExternalGraphic>
<Size>6</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>- Quick Note: Allowed image formats include
image/png,image/jpeg,image/gif, andimage/svg+xml
2. Zoom Based Styling: Official Doc has given a descriptive example about how to create different styles based on Zoom level, but words like MinScaleDenominator, MaxScaleDenominator might confuse you. Zoom based styling is not exactly ✌️Zoom✌️ based, but more like map-scale based. That means you need to write the map scale for which you want to show/hide the styling. Getting the current scale for the map can be tricky depending upon which mapping library you are using. e.g. in Openlayers, ScaleControl can help you add scale on the map, but the quickest way to get the scale is from the style editor.
Once you know the scale at which you want to hide/show the style, next is to put it in either MinScaleDenominator, MaxScaleDenominator. Definition :
MaxScaleDenominator => Max scale at which style will work
MinScaleDenominator => Min scale at which style will work
An example of this can be the following :
<MinScaleDenominator>160000000</MinScaleDenominator>
<MaxScaleDenominator>320000000</MaxScaleDenominator>The style will work when the scale will be in between 1 : 320000000 to 1 : 160000000
2. Multi Styling for a feature:
If you decided to go crazy like me 😛 and add multiple styling to the same feature (e.g. a circle inside a square), you can do that by adding multiple rules in FeatureTypeStyle
<FeatureTypeStyle>
<Rule>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>square</WellKnownName>
<Fill>
<CssParameter name="fill">#ff00ff</CssParameter>
</Fill>
</Mark>
<Size>20</Size>
</Graphic>
</PointSymbolizer>
</Rule>
<Rule>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#0000ff</CssParameter>
</Fill>
</Mark>
<Size>15</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>2. CSS Styling (Cascading Style Sheet)
CSS styling is becoming more and more popular nowadays among developers because it is really easy to write once you understand the gist of it, you can read the official documentation 👉here 👈 . CSS styling is not pre-packed in GeoServer, you will have to install the CSS plugin separately, for 2.18 you can find here. Once the setup is installed, You can see CSS in the format dropdown while creating a new style. General Structure of CSS Styling Looks like this
/* Apply styling to all data */
*{
fill : #ff00ff;
fill-opacity : 0.5;
}‘*’ represents complete selection. If you want to provide any filter, you can write that instead of ‘*’, e.g.
/* filtering data */
[population < 1000000]{
fill : #ff00ff;
fill-opacity : 0.5;
}You can combine multiple filters as follow
/* multiple filters */
[population < 1000000] [high_temp > 25] [badge = 'friendly']{
fill : #ff00ff;
fill-opacity : 0.5;
}Here only feature satisfying all 3 conditions will be show, if you want to put OR conditions, simple add , in between them
/* OR functionality for multiple filters */
[population < 1000000],[high_temp > 25],[badge = 'friendly']{
fill : #ff00ff;
fill-opacity : 0.5;
}To create a zoom based styling in CSS styling is also very simple, We use the special keyword to denote scale denominator, e.g.
/* Only show the stylign when scale is less than 1 : 1000000 */
[@sd < 1000000] {
fill : #ff00ff;
fill-opacity : 0.5;
} You can read more about options available for different geometries styling 👉 Here 👈, You can read more about options available for filtering 👉 Here 👈,
This page 📄 , will give you more understanding about different styling using CSS Styling
I think it is a good time to end this blog and for you to start creating some innovative and unique styles using SLD and CSS methods, Part 2 of this blog post will focus more on YSLD and MBStyle (JSON) methods to create styling.
Happy coding till then 😄.
You can subscribe to me on Youtube📺, to get the video for the similar topic!
Make sure to share your style creation with me on LinkedIn 💼 or Twitter 🐦
About me
Hi, I’m Krishna Lodha, I’m a full-stack Web GIS developer. I’m really enthusiastic about the power of locations and what story it tells us. Read more about me at http://krishnaglodha.com, to get more information about this code or suggest a better way to do it. ping me on LinkedIn 💼 , Twitter 🐦 , and Youtube📺
I write most of my post for the ‘Random GIS Talks’, which is a medium publication dedicated to posts regarding GIS installations, inventions, technologies, Case studies, etc. make sure to hit the subscribe button to stay updated for further posts 👉🏻 here 👈🏻
Make sure to leave 👏🏻 to the posts, this boosts the motivation for me to write more 😄
Adios!
