Easy way to create Styling in Geoserver (GeoStyler)
Video of the blog is available here: https://youtu.be/UzEorIBgbQA
Geoserver is absolutely amazing tool. It allows us to host our data and share it using OGC standards such as WMS, WFS, etc. Geoserver also has amazing security features where we can create sets of rules, roles, users, groups, etc. to define security for reading, writing data. Geoserver also has the capability to extend its functionality based on external plugins.
But..
Geoserver lags at one thing. Styling. Geoserver supports SLD, YSLD, CSS styling languages, but the problem is if we want to write styling we have to type it in XML format (for SLD), which might be okay if you are from a development background, but if you are not, then it is a nightmare. Sample Point SLD showing simple red color point looks like this
Scary right!! 👻
The solution to this is to use YSLD or CSS Styling. The above code in CSS looks like this.
But still, it looks like writing code. The solution to this is 🥁 🥁
Geostyler
Geostyler is an OSGEO project which helps us to create styling using a GUI. Geostyler also supports CLI and also has multiple npm packages which can help us to use the core logic in our own code as well. Geostyler is Open source, thus we can take components of it and plug them into our website as well.
Head over to the demo link for Geostyler GUI
GUI has the following key components :
- Language — We can switch between 4 major languages
- Compact — We can change Graphical editor to compact and expanded mode
- Symbolizer Rendered — Displaying Symbol in Graphical Editor using Openlayers or Geoserver standard
- Load Style — Upload .sld files to make changes in it
- Load Data — Upload Shapefile, GeoJSON or WFS connection to load the data based on which we can create rules
- Graphical Editor — We write our rules for the styles over here. These rules contain information such as Symbol ( Color, Fill, Opacity, Border, shape, etc.), Rule name, Rule Filter (Comparison and logical operations), Min Scale after which data will be shows, Max Scale after which data should be hidden, Count, Duplicates.
- Code editor — We can preview SLD code over here, we can also make changes inside this and those will be reflected in Graphical editor as well
- Preview Map — Map is available for us to preview styling on data
In this GUI, we can create the style however we want and then either download it as .sld using Save as File button simply copy it to Clipboard. Once this is done, we can import it into GeoServer and use it.
A better way to do this is 🥁 🥁
Geostyler Plugin for GeoServer
Geostyler has built a plugin that can allow us to open the graphical editor inside the GeoServer styling page directly, thus eliminating the need to export the SLD and import it again. Using plugin we can also see the result directly on the data.
Head over to https://build.geoserver.org/geoserver/ and depending upon what version of GeoServer are you using click on the link (2.17.x, 2.18.x, etc.), head over to the community module’s link, and search for geostyler and download the plugin and unzip it.
Paste the plugin in geoserver/webapps/geoserver/WEB-INF/lib/ folder and restart geoserver.
Once restarted, head over to the styling tab and open any styling and you’ll see geostyler option available inside it
This GeoStyler will also have the same graphical editor which will be linked with the SLD code editor available traditionally in geoserver.
Head over to the layer preview tab in Style and click on the Layer preview enabled checkbox in the GeoServer tab
We can now again make changes in this editor and it will be reflected to the layer immediately. We don’t have to worry about saving this style explicitly, because as we make changes, it it autosaved.
Hurray 🎉🎉
GeoStyler Other capabilities
Geostyler is more than just a graphical editor, Geostyler can be downloaded from GitHub source and changed according to projects as well. Many products allow users to create style on the fly and uses GeoStyler’s npm packages. Check out their docs here
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 https://krishnaglodha.com, to get more information about this code or suggest a better way to do it. ping me on LinkedIn 💼 , Twitter 🐦 , and Youtube📺
Adios!
