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

OpenLayers and Vue

00:00

Formal Metadata

Title
OpenLayers and Vue
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
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
There are many ways to include an OpenLayers map into a Vue web application. This presentation will explore a few techniques such as vue3-openlayers, vue-ol-comp, and Wegue. The primary emphasis is on how the state of the OpenLayers map and its layers can be reactively accessed across all components of the web application.
Keywords
127
Process (computing)Streaming mediaView (database)Open setComputer animation
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
Stiff equationComputer animation
Transcript: English(auto-generated)
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