We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

GeoStyler - Generic Styler for geodata

00:00

Formal Metadata

Title
GeoStyler - Generic Styler for geodata
Alternative Title
GeoStyler - a generic graphical style editor for geodata
Title of Series
Number of Parts
295
Author
Contributors
License
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
GeoStyler is a react-based Open Source UI library for creating style editors for WebGIS applications. Cartographic styling of geodata on the web has been a recurring topic in the geoinformatics world. There are various standards - official standards as well as industry standards and project-related styling rules. However, we think that an interactive web-based software is the best solution to enable users to easily style their geodata. There are isolated solutions for some of the above mentioned standards, but no comprehensive web interface for converting styling rules into various formatshas been lacking so far. This universal web interface has been in development since mid-2018. Under the project name "GeoStyler", a web-based Open Source tool for the interactive creation of cartographic style regulations for geodata is being developed. Currently the following formats can be used: Style regulations are OGC SLD, OpenLayers Styles, QML * and Mapbox Style * (* in development). Supported geodata formats are GeoJSON, OGC WFS and Shapefiles. We want to present the current project status and show the general functionality of GeoStyler. We hope to attract the project to users and developers and to contribute to the Community.
Keywords
Generic programmingSharewareArchitectureOpen sourceImplementationInformation technology consultingPlanningSoftware developerSoftwareOpen setService (economics)Office suiteGenetic programmingDigital filterCodierung <Programmierung>User interfaceMilitary operationParsingModul <Datentyp>Component-based software engineeringIndependence (probability theory)File formatSoftware frameworkGeneric programmingCore dumpSymbol tableWeb 2.0Codierung <Programmierung>Maxima and minimaLevel (video gaming)Software developerMappingAbsolute time and spaceWritingLink (knot theory)Open setUniverse (mathematics)BitPhysical systemWeb portalGeometryComputer architectureOpen sourceMultiplication signProjective planeWordData conversionUser interfaceSoftwareCuboidIntegrated development environmentMoment (mathematics)Internet service providerInformationUltraviolet photoelectron spectroscopyVideo gameCodeGoodness of fitPresentation of a groupSound effectSoftware testingLecture/ConferenceComputer animation
Core dumpData typeRule of inferenceFile formatReading (process)ParsingDisintegrationParsingRaster graphicsComponent-based software engineeringSymbol tableElement (mathematics)User interfaceScale (map)Revision controlStructural loadCompact spaceFormal languageGenetic programmingGoogolGraphics softwareCodeLink (knot theory)Form (programming)EmailProgrammable read-only memoryDigital filterInformation privacyCategory of beingProcess (computing)Moment (mathematics)Shape (magazine)CASE <Informatik>TouchscreenComponent-based software engineeringProjective planeImplementationTerm (mathematics)Uniform resource locatorUser interfaceGraph coloringInstance (computer science)Element (mathematics)Complete metric spaceSoftware frameworkRight angleText editorFile formatComputer fontForm (programming)Server (computing)Point (geometry)Symbol tableCuboidFilter <Stochastik>BitCue sportsCore dumpReading (process)CodeWeb 2.0MathematicsCartesian coordinate systemSharewareSlide ruleComplex (psychology)ParsingOpen setWritingParsingGeometryField (computer science)Vector spaceComputer animation
Digital filterRule of inferenceCalculationGenetic programmingScale (map)Software frameworkElement (mathematics)Wrapper (data mining)Formal languageServer (computing)DisintegrationField (computer science)Computer iconSicExtension (kinesiology)SharewareStructural loadFile formatCompact spaceGraphics softwareGoogolInformation privacyPointer (computer programming)ParsingSocial classSpacetimePiScaling (geometry)Cartesian coordinate systemFilter <Stochastik>KnotSpacetimeMappingRule of inferenceVideo gameElement (mathematics)Default (computer science)CalculationView (database)Projective planeGame theoryField (computer science)Software frameworkComplex (psychology)Term (mathematics)Attribute grammarObject (grammar)RoutingText editorExtension (kinesiology)RootINTEGRALNatural numberMobile appPhysical systemData storage deviceMoment (mathematics)Information systemsLevel (video gaming)SharewareInsertion lossFormal languageInformationWeb 2.0Front and back endsComputer animation
GoogolInformationInstance (computer science)Default (computer science)PasswordServer (computing)System administratorVideo GenieLevel (video gaming)Graphics softwareFormal grammarContent (media)File formatElectric currentText editorFormal verificationAttribute grammarElectronic mailing listSample (statistics)RectangleData typeStructural loadMultiplication signTerm (mathematics)Server (computing)Figurate numberMoment (mathematics)PolygonComputer animation
Computer fontDefault (computer science)Graphics softwareText editorElectric currentFormal verificationFormal grammarContent (media)File formatStatisticsAttribute grammarServer (computing)Mountain passInformation securityRevision controlInstance (computer science)PolygonGoogolCache (computing)Scale (map)Digital filterService (economics)QuantileGraph coloringText editorComputer animation
Component-based software engineeringParsingStrategy gameExtension (kinesiology)Computer iconWeb browserSource codeCodeComponent-based software engineeringSource codeStrategy gamePlug-in (computing)BitSharewareOpen sourceComputer iconLink (knot theory)Moment (mathematics)ParsingProjective planeMereologyLevel (video gaming)Presentation of a groupFamilyDataflowWordWebsiteSlide ruleTerm (mathematics)Natural numberComputer animation
CASE <Informatik>ParsingEquivalence relationDisk read-and-write headQuicksortCartesian coordinate systemFile formatSquare numberGraph coloringGoodness of fitRight angleSharewareTouchscreenOpen setLine (geometry)Dot productServer (computing)Instance (computer science)Presentation of a groupReading (process)Data conversionScripting languagePoint (geometry)Forcing (mathematics)User interfaceProcess (computing)Form (programming)Position operatorMereology40 (number)Hydraulic jumpLevel (video gaming)Back-face cullingLecture/Conference
Transcript: English(auto-generated)
So I can just step over these styling details and talk about GeoStyler, a generic styler for geodata. Interesting detail, normally I wanted to help the talk
with Christian Meyer, who is unfortunately not here, but would have been interesting because at the same time there's a GeoEXT talk and he's also the presenter, so somebody else is presenting there and I present that. Maybe better for you if the two guys on the right side
would present that because they are the core developers of the software, I'm just more or less a presenter. But that's pretty cool for me because if you have any detailed technical question don't ask me, I have no clue. You can come, we have a booth down there with Trestris and Modialis and one of our developers will be there after the session.
So no technical questions please, or you can try. Okay, what I'm going to talk about, what was our motivation? Maybe Andrea lined it already out, he said okay, you have to write a lot of SLD by hand. I'm going to have a look on that a little bit deeper.
I present you the project, GeoStyler, talk a little bit about the architecture, the features. I have a small live demo, a very, very small live demo, hope to keep that really small in time, but the good thing is it's all online so you can do it on your own later and give you a short outlook
what is planned next in the project. So first of all, just some words to me, maybe just as a background, I'm founder of Trestris. We founded Trestris in 2002. So we acquired a lot of time doing web mapping stuff
and writing SLD by hand. So it was really absolute time to find something who can really ease that thing. Short introduction to Christian Meyer. I know him for about 10 years now. He's a geospatial software developer and architect.
And yeah, that's a good thing. He's from, he opened his own company somewhere in southwest Germany. Just for you, it's closer to Bucharest than Bonn. So that's enough information on that. Don't want to show the geography of Germany here.
And if you look at what he's doing, it's very interesting because he's doing more or less the same things than we do at Trestris. But that's a really cool thing at open source. You don't compete each other, you work together. And that what we did in that project here. And yeah, that was the idea. What was our motivation?
If you look out and if you heard the talk of Andrea already, there are various standards of cartographic symbolization of geodata available out there. So there are the official standards, like SLD with filter encoding. Or there are the industrial standards like Mapbox. So industrial standard is somewhat like,
people tend to say what document is the standard and in map environment, somebody says it's Mapbox. Something like that. But I don't want to say that Mapbox is equal to word document. Don't forget that. And you have some more project-related styling, like QGIS has a style, OpenLayers has styles
and stuff like that. And if you look at the mark, there's no universal style. You always have to style in QGIS. What we learned, okay, you can export QGIS styles to SLD. But what if you want to convert Mapbox styles to QGIS, stuff like that?
You always have to figure out a solution on that. And for us as web developers, because we do, mainly we do geo portals and stuff like that. And we don't have people who use the systems who are developers, so you really actually could write SLD or OpenLayers styles and stuff like that. So for them, we were looking for a solution,
how to give them a tool to really easy create styles for their maps. And so we created GeoStyler as a universal web interface. And GeoStyler in general is a ready-to-use map styling library. Its development is for about one and a half years now, nearly two years, something like that.
It's open source, BSD license. It's on GitHub, I'm going to show the link later. And in the moment, it's mainly a cooperation between investors and maximum. But there is already one external coder and maybe you think it's so wonderful after I've finished my talk,
you want to jump into that project. We are absolutely open to that as any open source project, I think. So let's talk a little bit about the architecture we have. We have something that we call GeoStyler Core, which has a data provider, which has a styler. So we founded our own styler, our own style.
I'm going to talk on that on the next slide. And we have, in this Core, we have something we call components. And these components, for instance, are UI elements, user interface elements. So you have a symbolizer, you can choose your symbol and detect the outline of the symbol,
the size of the symbol, transparency, and stuff like that. And we have some special features, which is very important for us. We are independent from the format of the style. So as you can see here, we have the Core and on the right-handed side, we have a data parser
that's needed to get knowledge about the data we want to style, and we have style parser, and they're completely independent. So in the moment, we have style parsers for SLD, for open layers. There's a more or less rudimentary implementation for Mapbox, but you can roll your own. So if you have your own style, just create your style parser,
connect it to Geo Styler, and then you can convert it via the internal style to your style. Makes it quite easy. So it's also independent from the framework. I'm going to show some examples later, where we integrated Geo Styler in a project,
and stuff like that, and it's fully customizable. So you can use the UI elements of Geo Styler, but you don't have to use them like they are. You can configure them. So for instance, if you have a Styler for a point symbol, and you can detect the outline size, outline color,
and transparency, and all the stuff like that, and you don't want to have that for your users, you just can customize it, use the UI element, and you just use the fields you want to use. That's quite easy. Just short note on this internal style, so it's a little bit about inspired by SLD and Mapbox. It's a JSON-based style, and when you wonder
why we do that, and create our own style, it makes us much more flexible, because we are not stuck to any standard or any other things, so we can do what we want internally, but you don't, as user of Geo Styler, you don't have to learn this style. Just forget about it, have it in your back mind, and just use Geo Styler.
As said, read and write of various style formats is included, we already can read various data, vector data formats, like WFS, GeoJSON, and Shapefile at the moment, but you can develop and integrate your own process for data and for style,
and we have the basic support for us to data also, including now. This gives you some ideas about the user interfaces, what I was talking about earlier, so we have a component which is a symbolizer editor, as you can see on the left side,
where you can more or less define what Andrea showed in the SLD, but you can do just by click on it, have a color picker, which is another component we integrated in that. In the middle is a screenshot from a filter editor, so it can really filter
and create complex filters just by clicking on it. By the way, very interesting, because in nearly 20 years, web.js for customers, it's always very often that customers request something like that for a UI element,
and it's always not easy to implement that, because somebody has to use it at the end, and that's sometimes customers tend, they want to have everything, and you explain, okay, we do that and that and that, and they say, oh God, I don't understand it, and that is a more or less standardized way, and I said you can integrate it in your application.
And the good thing is you always have the code editor, so you can also, if you like to, you can go in the code editor and it is connected. I can show that by a short example, just switch over to the, I give you the URLs for that demo application here. I just click on any example here,
and as you can see here, we have the style, we have a preview of the style, and you have the code editor, and if I find any column like that, and you change something here,
it's directly changed here, and vice versa. So if you go back here, and change it to another color, it's changed here, and it's changed over here. So that makes it quite easy for you.
There is the next style, so we have some features, and that's really cool, because I don't have to explain anything of that. That was explained in the talk before, so we have rule-based styles, including symbolizers, we have an editor for complex filters, as I told you before, we have preview,
we can classifications, that's my short example, I'm going to show you live. You can insert scale ranges, scale dominators, calculation of overlapping rules, which is quite important. So if you have two rules, and you put in objects into the second rule, which are already in the first one, the system will tell you.
That's presumably you made a fault, something like that. And you can use it just by API, so you don't have to use the UI elements, but you can use the UI elements. And you can also integrate it in any other framework. There are already some different layouts for the UI elements available, but you can style it.
So in the end, if you create a styler for map store, and you use dual styler, you can just make it like a look and feel to your map store, and nobody will even see that it's dual styler in the backend. So maybe it's worth thinking about that. I don't know, I'm not a developer.
So yeah, and it has language support, in the moment we have English, German, Spanish, maybe we get Romanian after the conference, would be cool. Yeah, possible fields of application. It eases your life, and it enables cartographers
to style the maps, and not developers to do that. So you can use it at standalone application, what you've seen at the short view at the demo. You can integrate it in web.js projects, and very recently, I was really fearing at your talk that you present something like that.
We created it as a GeoServer plugin, so you can, I will show you in a minute, you can use it inside GeoServer for styling GeoServer, you can use GeoStyler, which is quite cool, I think. So this is a standalone, I already showed you. And this is an integration, you see it looks completely different.
And this is a project we are running in Germany. It's about a soil information system, and the customer wanted to style its own data. And so we integrated GeoStyler, looks completely different from here. So, and as said, we have a GeoServer extension. So if we switch over here,
I just can give you another short demo how you can work with that. So that was quite cool. Our developer prepared, I wrote him a ticket, please make a demo for me. And he really prepared it step by step. Do that, do that, do that. And if I fail, I printed it out.
So I have to load some data. This is pre-configured, so I don't have to do anything. And hopefully it's loaded. And then I click on classification.
And I look directly on the attributes of the data, which was magically loaded in the background. And take an attribute, which are the names of German countries I know. And maybe you not, but I as a German should know that we have 16 of them in Germany.
So, and then I click on classify. And then I have my classification, which is basically the first classification I have. Nothing fancy, you can find that in QGIS or any other things, but this is independent here. And yeah, as you can see. What we can do here, of course,
we can just copy that to clipboard. And go over, have it in, for instance, in Endure Server. Session timed out. And if I go to that layer in style in Endure Server,
which is just an orange polygon in the moment. So I can show you. If I go to the layer preview, I figure out that layer. And open layers. So you can see, that's our country in orange.
And of course, no surprise, but when I invert the style now, here in refresh that, it's styled cool. And really cool is that you now also can go
in the style editor and use style. And in Gstyle, you can do the same things. And you see, it's absolutely the same. Like I showed you in the standalone. And I could change any color here now to whatever. I don't know.
And I'm not sure whether I have to press apply or not. For true, I do. And then it's styled. That's quite cool. Okay, so that was more or less what I wanted to show you about Geostyler. Of course, you want to get more UI components
in the future, more parses for more styles. So, feel engaged, come on. And yeah, some more better extension, assembling strategy for customizing the UIs, support for icons from forms,
which is not included yet in the moment. And we had the idea to create something like a browser plugin. So you just have it on your site, can just create your style if you need it while developing or whatever, and can just get over the style. And yes, that's more or less about the story. So you can find the slides,
I think somewhere on the conference website. Here are the links to the demo. You can play around with the demo. You find the source code on github.com, tresters slash geostyler. There's also documentation, which really was improved before the conference.
So this is very seldom, because normally you say, I developed something totally cool and crazy, but forgot the documentation. Other guys really, really did it. And I said all contributions are missing, are really welcome. So thank you.
Questions. Thank you. Thank you Till for your presentation. I was wondering for years, the natural workflow has been for a lot of us
from creating a map in QGIS, export an SLD and import that into a GeoServer. As we all know, there have been some improvements in that workflow over the past two or three years, but still that workflow isn't 100% complete.
There are parts missing. What makes you think that this is the solution that will reach 100% of the SLD capabilities? I think this is a question for developers.
No, just to be honest, I think it's always like open source is driven mainly by requirements you have in projects or stuff like that. Maybe you find somebody who really pays for that for implementing 105% SLD in that,
but normally it doesn't happen. So I think it's always quite a little bit of work left and then it comes the next SLD standard and stuff like that. So you forget about the old stuff and head to the new stuff. So I promise never 100%. I'm realistic, but I really can't answer that.
It's just as long as it makes our customers happy, it's for us, it's cool. And then let's see what happens on top. If GeoSolutions jumps in, maybe we reach 100% earlier, I don't know.
Hello, hi. Hi. Can it be used to translate styles from one format to another one? Let's say for example, you have a style in SLD,
can you import it and export it and get the equivalent Mapbox style or whatever? Yes, as long as the parser is there, you can use it exactly for that. And you don't have to use the UI, there's an API. I know Christian did it for a customer.
He transferred just by AP call, I think 500 QGIS styles to open layers or something like that. Okay, that's great, thanks. There's one in the back.
Hi, Till, this is great work again. So, I wanted, yeah, right. So we just presented in the previous session, maybe some of you were here. So we have 15 minutes left, I can do it again. No, no, no, I sneaked in while you were starting
from that other session, but then we presented a Python library for GeoStyler. So we also have a Python library now for GeoStyler. Ah, cool, cool, good news. And that one also has a command line interface to do style-to-style conversions, so that's nice. That would be, thanks.
Thank you for your presentation. You said there is an API, but is it possible, you only show the demo in polygons,
but there's the swatches, I mean the colorful squares shows in lines and dots when there's a line standpoint. Can it be used to just render the legend of the map, just a read-only on the user front-end? It's just for create the style,
and we render the preview. I don't know whether you can just make a screen chart or something like that, but normally the legend is more rendered by the application who actually presents the data, and not by GeoStyler. That's not what it is made for. So for instance, you have any style, and you convert it to SLD, throw it into GeoServer,
and then you get your Legion request to GeoServer. Yeah, I know there is a get legend graphic request, but I sometimes want to, how do I say, build a legend and apply CSS or JavaScript to modify the layouts and those sorts of things.
I find it very useful in that use case. If you come to our booth, there's Johannes, our developer. I think it's better if you talk to him directly about that. Maybe he can figure out some things for you. Okay, thank you very much.