OpenLayers and Vue
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Title of Series | ||
Number of Parts | 156 | |
Author | ||
License | CC Attribution 3.0 Unported: 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 | 10.5446/68507 (DOI) | |
Publisher | ||
Release Date | ||
Language |
Content Metadata
Subject Area | ||
Genre | ||
Abstract |
| |
Keywords |
FOSS4G Europe 2024 Tartu87 / 156
6
33
35
53
55
59
61
67
70
87
97
99
102
103
104
105
107
111
121
122
123
124
125
126
127
128
134
144
150
151
155
00:00
Process (computing)Streaming mediaView (database)Open setComputer animation
00:09
SoftwareSoftware developerWebsiteEmailService (economics)Computer networkTransformation (genetics)Axonometric projectionEuclidean vectorIdeal (ethics)Library (computing)Keyboard shortcutSoftware frameworkWeb browserFile formatState of matterComponent-based software engineeringCompilation albumElement (mathematics)Template (C++)Variable (mathematics)Open setEvent horizonPointer (computer programming)Coordinate systemPixelZoom lensInformationView (database)Functional (mathematics)Demo (music)Projective planeCartesian coordinate systemIdeal (ethics)Connectivity (graph theory)Level (video gaming)Library (computing)Open setEvent horizonTemplate (C++)State of matterMixed realityFront and back endsData structureInformationGeometryWeb 2.0Menu (computing)Direction (geometry)Web browserFile formatPhase transitionOpen sourceSoftware frameworkWebsiteLink (knot theory)DebuggerInternetworkingData storage deviceComa BerenicesComputer animation
04:11
Stiff equationComputer animation
Transcript: English(auto-generated)
00:03
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
00:22
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
00:42
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
01:01
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
01:21
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
01:44
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
02:00
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
02:22
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
02:43
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
03:02
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
03:25
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
03:40
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
04:03
composable Alright and here Good here's some links, and then I'm finished. Thanks for your attention