Visualizing geographical data made extremely easy by SLD Editor! Hanna Visuri 16.9.2015, FOSS4G

Visualizing geographical data made extremely easy by SLD Editor!

Hanna Visuri

16.9.2015, FOSS4G

Agenda

• What is SLD Editor?• About SLD• Technical background• SLD Editor Features• Demo• Current limitations• How to make use of SLD Editor? 

What is SLD Editor?

• Developed in NLS FI as part of the European Location Framework (ELF) project

• Aims to provide easy way for editing SLD files visually

• First version released in February 2015• http://www.oskari.org/sld-editor/

• Open source and available in Github• https://github.com/elf-oskari/NOSE 

Background

• Developed for authorities with limited knowledge of geospatial data…

• …and to be exploited by other developers!• Developed in only couple of months as part of

the ELF project• Offers great base for editing SLD files

visually!

About SLD• The OGC Styled Layer Descriptor standard• Specifies how layers should be rendered• XML-based markup language

DO I HAVE TO EDIT XML TO CHANGE THE STYLING OF GEOGRAPHICAL DATA…?

SLD EDITOR ENABLES YOU TO EDIT SLD FILES VISUALLY!

This is how it works:

Import SLD

Create visualization

Edit visualization

Save visualization

Upload visualization

Style.sld

Style_v1.sld

Style_v1.sld

Style_v1.sld

Style_v1.sld

Technical background

• Development is done using Node.js and OpenLayers 3

• Responsive and works even with mobile devices

• Used libraries include e. g. Bootstrap, Backbone, Lodash…

• Uses PostgreSQL database to store SLD file structure and values

SLD Editor Features• Import and upload SLD files• Create copies of original SLD to make

different versions• Search specific rules to edit• Edit existing tags visually

• Point: wellknownname, fill, opacity, stroke, size…

• Line: stroke, width, linecap, color…• Polygon: stroke, fill, opacity… • Label: font-family, font-size, font-style,

font-weight…

• Own preview for symbolizer and rule• View SLD against corresponding WMS

DEMO

9

10Login page

FOSS4G

SLDeditor

11

TEMPLATES

VISUALIZATIONS

User UI – available templates and visualizations

12Creating new visualization

13Editing the visualization

14

Rules can be searched for by typing some letters or by browsing the Featuretype tree

Searching for rules

15Rule preview

16Changing style parameter

17

Star marks unsaved changes

Changing parameters, saving

18Label style

19WMS preview

20WMS preview, basic authentication possible

21WMS preview

Current limitations22

• No self-registration or user management interface

• XML is not validated when importing SLD general error

• Symbolizer attributes are not validated before saving to database

• Rule preview on map

• The rule preview map uses example point, line and polygon lines on top of Helsinki, not any real WMS service

• It is not possible to show different shapes of point symbolizers yet

• All editable attributes cannot yet be seen in rule preview

• No support for adding tags, rules or entire symbolizers

How to make use of it?

Individual applicationPart of your application

23

Requirements: Node.js and PostgreSQL

Clone source code from GitHub and follow instructions!

Development

SLD Parser

UI components

Thank you!Questions?