So hello everyone, I will tell you something about open layers and view My name is Jacob mix. You can find me at some place in the Internet and yeah, I work at city come we have an internal GIS very use open layers and view and so I Extracted a little library about it

Just a overview. What is View and open layers. So a view JS is a JavaScript front-end framework, which gives you the structure of your website This has a quite wide adoption. So react is probably the most popular one, but then maybe view is the second one It has reactive data binding

its component based and a very big ecosystem for libraries and everything else Then what is open layers? It's a library for rendering geo data and the web browser is also quite feature-rich So has batteries included so a lot of features are directly built in supports many formats many projections

And it's a ideal for feature-rich web GIS applications Then how is the state Stored in view chairs because that's what I wanted to combine both libraries and

They both have a different way how to store their state So I wanted to find out how how it works and how I can combine it So in a view chairs every component can be like a little drop-down menu or a big map or whatever they have their own state and Then the state is reactive and when the direct state changes it will directly applied to the UI

Components can also share a state and you can also have a global state via so-called composables or using a custom library and In open layers every open layers object has also its own state and

So for example a map has a state a view has a state layers on state and you can React on those states for example if a map Is clicked or a layer is added or removed you can React on this via this events you Have the name of the event and then you can have them callback function

Then something is happening and I tried to combine this and I checked there's some other libraries before so there's view three open layers, which is more like a really big component library and It is also nice, but I wanted to have something more lightweight then there's also weku which is more is like an

Application template which already has the connection built in but I still wanted to have something more lightweight so I created this little open source library obviously and which connects the state of open layers and view and Yeah, so how does it work so I have a

so-called composable which reacts on this open layers events and then it creates a view state Which are updated on all these events and this views date and this composable can be imported by all of the View components and this the state is globally accessible and all

Component components can use it, but you can still use all the open layers functions directly, so this is how it looks like It's a demo application where you can see how it's implemented. Let's see if that works

yeah, so here have a map component you have a Info component and I can view the map only and do something and then I still only have the info component and everything is Changing here as well so I can zoom in or out and then it will apply directly to the map even though the map Is not shown, but it's also The state is synced in the background while it is global

composable Alright and here Good here's some links, and then I'm finished. Thanks for your attention