Add to Watchlist

GeoStyler – ein generischer grafischer Stileditor für Geodaten


Citation of segment
Embed Code
Purchasing a DVD Cite video

Formal Metadata

Title GeoStyler – ein generischer grafischer Stileditor für Geodaten
Title of Series FOSSGIS 2019
Author Suleiman, Jan
Mayer, Christian
Koch, Kai
Koch, Daniel
License CC Attribution 4.0 International:
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.
DOI 10.5446/40692
Publisher FOSSGIS e.V.
Release Date 2019
Language German

Content Metadata

Subject Area Computer Science
Abstract GeoStyler ist eine react-basierte Open-Source-UI-Bibliothek zur Erstellung von Stileditoren für Web-GIS-Anwendungen. Der Vortrag stellt den aktuellen Stand und mögliche nächste Schritte vor.

Related Material

Video is cited by the following resource
Yes it is
half past twelve on the 10th
we hear something now the bulk of a generic one graphic style editor for geodata and what is that and what the thing can do that's what the christian tells us under jan please yes hello many thanks as well as already we said today we make the bulk before that a generic graphic style
editor for maps and geodata the whole happens on the web and how the whole here in the lecture is constructed so looks We will be brief Introduce it now around the architecture of the monastery we hire few features before and at the end are there Of course, a few examples and a current status and how the whole then just continue short to me my name is so have laimer i'm master student of geoinformatics at the university in Münster bachelor I've done'm Other stores currently under construction student assistant and also too happy developer in the geo styler project as already mentioned , the company is completely I work for we develop open
source kiss are stationed in Bonn and in addition to the development we do too much advice planning Implementation and maintenance more info but also like the bottom of was also halo of my side my name is christian meyer i am from home geoinformatiker and
works as a software developer and architect in the various open source on the way geoex place georges theiler for example, with the various associations active in fund hsg in vdv and when I'm not in dresden and lectures are held on thursday morning then I suffer that my own geoinformatics office maximum We are sitting near the Palatinate mannheim offers services around open source gravel belongs to infrastructures at consulting training software development so back to The actual theme of the whole piece is quite new project that initiated by us has been why short background information is the project in the first place? Cartographic styling of geo data in web is always such a topic so periodically stays on us already longer it comes the come different projects before that customer just relatively demanding part for example, his vector data So, you want to have everything over red dot with 4 pixel diameter Going out always brings a bit headache with because so far there was not generic recyclable editor on the web for styling geodata that we have changed the project most in cooperation with the company maximum and terrestris in summer last This year, that's exactly what it's all about to change next to sld what almost the odyssey standard markup language for Cartographic styles are still there
a lot more part of this part Formats parallel to each other have developed to call map box which I somehow as industry quasi-standard currently interspersed however even the software solutions incubus das kml format or open layers has its own markup language supplies his own markup language accordingly, one has several formats transform between the back and forth It had not been that easy Furthermore , it is never easy to decouple cartographers that is, in top layers, for example i can javascript my styles show functions that is totally great gives me the complete flexibility but also means that my chronograph ultimately would have to write source code or tell me how that part looks and I then almost the change source code if out of the red this is to be the green point somehow uncool you would have to pair that overseas viable formats and that we have tackled in the cinema styler times to solve the problem at last one generic style editor for geodata too have just short on the web
corners of geo steeper as I said that is one
a finished styler you can do it use and you quasi delivered be in the package but basically the whole thing is considered part of the Library means that is not one fix thing but you can do it all configure customize layouts how to just wants to do that seamlessly too in existing applications and more can integrate and just many possibilities can just put together The whole thing is an open source project under the bsd license is written in he sex so javascript now always script and just as typified by script a javascript he is in reasons we build one of the wakes state-of-the-art technologies and also one the currently most used technologies and the components for the find look for the feeling of the monastery we use design and operation star on their components the features even the monastery or the Main features of the bulk leave following the whole is components based means as he already said that one is not a finished thing gets or not only better but just even from very small simple components such as color selection fields input fields for radios, for example or range from attributes to Styles complete finished and share the tour editor everything is just available the whole thing is just like format Independently that means the bulk part works with sld with map box with qml with the vacancy there is a lot of it in there because of us that just designed that that whole should be independent The same is true at some point for the data format there it is so that we maybe not wanted to commit ourselves on a format at the moment we can with there Jason works and so does provide interfaces for wfs In addition, it is also such services we in this whole concept of Independence also not stuck Want to be on a web framework means the whole thing works with open Airs it would basically also with supplies we have not worked yet packed with boxing the whole thing too that means no matter which cards We already have the application Can or you can always do the bulk all over and it works just fine as already said at the beginning whole is completely customizable you can get the components together stuck as you want and that too layout and adjust everything so that you can just has a seamless integration in Existing applications over basic or just in applications the new to be developed the whole is just like that that one does not see that at the end the one additional component is the was added but just one unit forms with the rest of the Application like the whole conceptual level generated in the basics will now be explained briefly christian maybe just in addition to the previous slide or two slides back the trunk project and script that should do not confuse it they can do all that in theirs too geoportal solution without react and without dough script as long as that somehow javascript solution is and of that I go that will be everywhere nowadays on the web you can use the user use so we use internal part script and project for the three components but they are not forced that too to use that means it is completely Compatible have already tested exists in other frameworks and the install Here you can see them for easy architecture and you are right now mentions the independence of various Formats were very important and were actually an elementary feature we work in the conception work on the have taken to heart very early that's why we have the so-called georges theiler core design that are in principle the ui elements where you graphically their styles can click together and the whole formats and the style formats and data formats are in principle single separate software packages the simply via a registration mechanism via plug-and-play to the jacko can be coupled concrete example we have a few very sld then you can pair with we have mapbox if you have the also almost a large part accor They can easily dock between the formats switch back and forth chor does not change as a result just such a plug-in principle is that essentially that is if they have one another own style style format because they may be against ten years against sed decided and many have the format themselves thought Whatever they could in their own parsers write the interface complemented by the deliverer and could that could dock it effortlessly then between spd and your own format switch back and forth we have the same for the data formats which are essentially only needed if you attribute attractive styling So if you want to do so, you want to do it basis of their geodata certain part you can then define rules an example of their geodata in the invite surface and also have here we that is separated from the choir, the quasi We currently believe we have one jason parser below wfs gml Perspective may still come package browser to whatever but that's the architecture already before that is in the core software nothing will change and They are always flexible and upgrade was exactly how the whole looks then Here are a few small examples
you the three components what you left so see is like everything here see are independent components the so ready to be used ready to use on the left you can see for example as example lead a simple quiet where
you just with different balls ames can generate simple symbols and this share can speak one can say that Edit radius or colors a lot color lines color and so on that you can see that all over little So you have many small components all of them in this library too to be provided you can see that up in the middle with the simple two angels that just these little simple components are already usable and by that you can do it all then just adapt very strongly and yourself put together what we offer are for example a filter editor where you also have very complex filters just click together without you now write sexually or something similar but that just has to be over the Graphic surface together can see what many probably a single one Simplification is when you do, though but prefer to provide text-based working
we also have a code editor where you can do that whole then just cell phones can edit and the whole thing works that way together that one at the same time can use that means I can on the one hand Write page bit and that will at the same time in the graphic surface also shown
that means whichever can time me what just prefer I connect both I can to for example, a style at the moment take a sld take something from exists and just by copy pace in insert the editor and then just continue to work on the surface and then just refinement or similar things do the whole thing as already called that the main thing is actually our little choir of the ua includes components and as the vita a jason object The whole thing creates a rule-based many as you know that from sld and basically this style we internally Use are greatly inspired by sld and also map box so that we try the benefits of both just a little bit to combine that the whole is typed by the script that means it is clearly defined which format and which attribute at which may be placed and is flat the lingua franca the casting pronounce that it is our internal Representation of the deal, however, must does not have to be re-learned be used because the whole just is compatible with the other style as sld and qml and so on the features Unfortunately, the chaos is that you just
rule-based can generate many that goes down to a single vote The quieter you actually get together can get stuck we offer very simple to very complex components both graphically and conceptually We have a preview of the different ones stile means when editing what you also see live as an example like that whole then would look like as a special bonus, we also offer classifications so that you look like otherwise in larger addon as in chris actually knows how to regulate can generate by different classification and the whole can generate automated relative simple In addition, we can scale ranges set and also complex filters produce and as yet a little Bonus, we also indicate on how many features in the current one record the rules just grab the that means you have finished at the end An overview takes up this rule is really and really just generated may overlap with one other rules to get there to collisions so that you are relative as well sure you can create your own style Furthermore , it is just that the
the biggest of all was designed that way also relatively simple in existing web projects can be integrated that you can not do that forcibly just the ui must use but just the break itself As I said this architecture was like that It's designed to do the whole thing too can use individually means one can just for example from a sld style you have with the fibers in a different style You can convert that, too use in different applications so for example if you are one But spd has an open source application that one converts and now then pretty simple with it can work In addition, we also offer different layout of the graphic components that means you do the same thing So we just offer different look different layout for same functionality You can also do all this independently change or refine and basically also internationalization currently we support german But you can speak English and Spanish also expand according to simple and Also we would be very happy if would further talked added
that definitely only short here information how to do the whole I can not continue to install to acknowledge that important is here that we do at npm have published this is an example for example if you want the really customer
kept very simple that's the title an editor you just in the reason with can write four lines of code and then the result on the right side as hard as you can see here can of course say okay that is a bit much functionality and many settings so much I do not want my application at all Offer then you can do that yourself too put together just because we have this small components which one now right This budget also offers and offers our library that he then to example so it is only a small one a little else of the codes that one
just this color was missing that is missing put together and his own component generates customer data and the then just as can use around then see the result below that you just have a simplified editor has just with the functionalities which you actually want to offer Here's another example of that basically sees our demo application
That's the way it is when you're all default values ​​and just the the parent component is used Here as an example for classification that you just have a graphical interface has where you classify yourself can plug together and / or can click together and then relative simple without writing any code to have or anything worth something also classifications and new ones can generate rules and then in the background looks like that then you in the case sorted by name for each state then its own
rule would have exactly one more idea we had and we were so initial have implemented a browser Extension for the most part so that you just about your own applications in addition to using the advantages of the monastery For example, if you are in geo server is that has already been them is lecture called this is a problem that geo server itself only which the sld can write by hand and Here is this browser extension Just to offer that one regardless of the site on the man just just be up in the toolbar the new style icon clicks not much together and clicks in that Then the style in the in the Clipboard copied and then easy can insert below the server or then just in any other applications so much the whole when is the one actually times integrated customer project so that is an existing project and there you see then that's what we are different components again Having simplified this is all about it that you make polygons so surfaces can only with these attributes the one sees to it level scale area can set and more filters can define and at the top left you can see it as well for example, this review the preview like her whole thing would be the same and all of this seamlessly into that design of existing applications over for what but the following example probably wondering where this is
trailer is used because of the graphical so from the surface see they are nothing that is wanted so that's actually an example where one without the graphic elements of georges theiler architecture
can make use of namely namely the Separated couple is just in his geoportal or web mapping applications for can bring that a concrete example, simple web does not go with it Project is just open players and on java script basis and the customer came and says yes we have here 10,000 it leds from ten years ago and we do not want to rewrite it to map box or something else can you do that make it easy for us to use them also players can not have one direct it lives yes then I have just the cast parser projects The sld is taken and write it top lakers out again so the open air party styler the whole thing was six lines javascript and I finished that part and can be any slf and customer read in and directly on the map Show only for those for the nerds That's the codename I'm in
seriously what I would show her that is no witchcraft that is really a few lines javascript and you have this complex problem what I described at the beginning I have solved relatively smart and simple exactly currently some information about the stand the monastery was only from 2019 we are at version 3.1.1 had left 43 so far moreover, it is relatively fast they are still very much in conflict with each other quickly add many features because that's just possible have in our repository speaks bulk accor more than 1600 in the last almost made and have scarce year currently ten computers in this project some of them already external Do not belong to our companies and if we are there anyway happy if then a few more to come because the whole just an open source project is and how the whole want to promote that one there finds common solutions and are in any form there in any case thankfully for being that way be that proposals how the whole expand or just directly We are very grateful for all the contributions grateful test it make bug reports this documentation will improve your really every kind of documentation confusion is welcome, we are very happy if the sea would be scattered And that's not so much the case with our companies the project is still a short time what will happen in the future future we do it steadily, especially the young ones programmer quite diligently we want even more components and you the work the graf with the graphic still want to facilitate editor yet of course, implement more style fit the whole thing a bit is more sexy I would say to give me more style format support between we just So it is without friction losses and forth can transform front icons just a little bit more yes also a bit more with the labels to provide comfort for you Raster data is still a big topic we support current events only vector data, that's all works great for grid data is another one history that's what we want in perspective I'm hoping this year too works here too we would think about support from the people who are looking forward to maybe regularly with grid data work and the server plugin you have that just as torn as browser extension maybe but that actually pack as a server plugin to do that with server with jo styler together relatively comfortable his wms and bms services map sharing you can expect to have lots of it we would like to ask them now would answer [Applause]
ok then thank you very much
We like to repeat the question also like that can just call so the question was if a transformation web server to server I must be able to counter a question what exactly are meant so they are can use sld for one microwave well i'll tell you so yes, both nessel use it's about the styles on the web because we could theoretically do that yes we just have to be a couple around the styles from your web file to fit in to convict our correction and then we can transform that to sle and can do it in the compost server insert that does not exist exactly that but through this architecture with this plugin principle relatively easy if you would say if here i am develop that or I charge someone who developed that we would develop a webserver steep pass and then that would be out of the box function if I understood correctly center stands out from tyler choir and between bulk accor and others Formats are transformed back and forth then the question is most of accor is that a smallest common multiple or is that one of the greatest common suppose that's what it's all about What everyone else can do is one thing interception of all features of all formats or is this a junior it is thought that as much as possible the other formats can map what currently not yet the stand is there is still a need for development At the moment I would say that the sl dp is furthest and a majority of sld images basically we try the different functionality with integrate but you always have to look like the whole then in the appropriate can not convict there is on every case exceptions and there will not Everything over one hundred per cent be felt further questions further questions yes i have a question so how do i do that if I understood it correctly one could already one web site where i am working can afford practical sld or others side gets then the other format that is exactly what the website can do it also already we have a demo Application built what I like maybe short on the fly can open
I briefly tell we almost have the key features of trio styler to show what this Library may be because library is
they can then be relatively abstract
We also just try one demo application that pretty much everything what the library is all about
put together what she mentions have this online the link is in the slides are in there and then you can
in fact, I have already done more often because that's one of them a little bit so self relieving that project if you yourself with the sls but it has to work for example cookies started click something together can copy that make your text editor pure then via the graphical interface make the green dots red triangles can save that again and this copy server or wherever they are So it will be here now just performed live by jan exactly So that I had just seen yes we have some predefined ones I'm going to talk about that here now bfs break have only mentioned simple classification made about the names become the attributes read and accordingly can to create different classifications produce and what you do the right thing just this code editor right now on the sld and what is just our offer is for example ours internal style you then here too Seeing the whole thing again 11 times convicted and if we look at for example hamburg who want to change the color then we can do that relatively simple just by rewriting something here On the left you change something maybe a right one and that Whole becomes, for example, black you can see that goes hand in hand that will everything updated very quickly and works very well just together thank you very much during our time
achieved here is also here still available for more ask her you are still a bit at the conference exactly in case of doubt at the bottom it understood or after the break when the gentlemen can have is eaten and drunk also alternatively also like about goes off or just the normal contact ways e-mail twitter everything I could do it easy contact modern media madness [Applause]
YES <Computer>
Software developer
Software developer
Maximum (disambiguation)
Computer programming
Spatial data infrastructure
Mobile app
Scripting language
Open source
FRAMEWORK <Programm>
SIMPL <Programmiersprache>
Default (computer science)
Plug-in (computing)
Software repository
Hospital information system
STYLE <Programmierumgebung>
World Wide Web
Demo (music)


  484 ms - page object


AV-Portal 3.8.0 (dec2fe8b0ce2e718d55d6f23ab68f0b2424a1f3f)