Thank you for this article! Very interesting and a great introduction into how to use OpenLayers with Vue! – Question: OpenLayers has several async functions, too, like "geolocation.on('change' ...". How can those function be used in a Vue component?
It might be tempting to put all map-related logic in the MapContainer component, and for example do:
geolocation.on('change',(event)=>{// we have direct access to the OpenLayers map herethis.olMap.getView().setCenter(...)})
I would personally try to split concerns a bit more and maybe create a specific component for the geolocation logic for example. Event if this component does not output any HTML, it will be responsible for encapsulating the logic and simply output for example a center and radius (or a geometry).
IMO the main pitfall when integrating a library such as OpenLayers in a JS framework would be to end up with a large "black box" component which ends up being almost impossible to split up as complexity grows.
First of all: Thank you s much for your reply! Highly appreciated!
I am still not sure how you think of implementing it. When you say "in the MapContainer component" - where exactly do you mean? All the Vue logic live within the "export default {}" object. Usually, methods are put in the "methods" parameter of that object, but I cannot just put a function with an event handler there. At least I didn't get it to work. And even if: they won't cause any reactions since they are, at that point, simply methods that aren't called from anywhere...
I was thinking of using watchers, but watchers – as far as I know – are fired on each $tick and therefore not very performant if there is a huge number of events to be observed...
So I am still in the dark about using OL's event system in Vue...
Thank you again! I tried your solution already, but I unfortunately I did not achieve a "beautiful" result. The whole code organisation soon gets clunky and things need to be duplicated etc.
I only get results when implementing watchers and, since there are more components involved, managing several parameters using vuex (e.g. the current lon-lat values, which a needed in the map component as well as in the "trackNewRoute" component as well as in a sidebar component, where there is a button that zooms into the current location, which is necessary in case the user changed the map's center and zoom manually...)
I wonder if I could motivate you to write another tutorials, where you show how to implement a simple tracker? Something like bikemap, where the app updates you position and draws a line of your route?
Anyway, thank you again for your article and your valuable feedback!
Great! – And I just wanted to let you know that you have provided the path to y solutions. A bit of refactoring, removing the watchers and setting up the listeners in the mounted() cycle already helped me a lot! That's great! Thank you for making this Sunday evening a successful one!
Looking forward to your tutorial!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thank you for this article! Very interesting and a great introduction into how to use OpenLayers with Vue! – Question: OpenLayers has several async functions, too, like "geolocation.on('change' ...". How can those function be used in a Vue component?
Hi, thanks for reading!
It might be tempting to put all map-related logic in the
MapContainercomponent, and for example do:I would personally try to split concerns a bit more and maybe create a specific component for the geolocation logic for example. Event if this component does not output any HTML, it will be responsible for encapsulating the logic and simply output for example a center and radius (or a geometry).
IMO the main pitfall when integrating a library such as OpenLayers in a JS framework would be to end up with a large "black box" component which ends up being almost impossible to split up as complexity grows.
My 2 cents!
First of all: Thank you s much for your reply! Highly appreciated!
I am still not sure how you think of implementing it. When you say "in the MapContainer component" - where exactly do you mean? All the Vue logic live within the "export default {}" object. Usually, methods are put in the "methods" parameter of that object, but I cannot just put a function with an event handler there. At least I didn't get it to work. And even if: they won't cause any reactions since they are, at that point, simply methods that aren't called from anywhere...
I was thinking of using watchers, but watchers – as far as I know – are fired on each $tick and therefore not very performant if there is a huge number of events to be observed...
So I am still in the dark about using OL's event system in Vue...
Ok, I think I see what you mean. Event handlers should be defined in the
mountedcallback, which is also where the OL map is initialized.See vuejs.org/v2/guide/instance.html#I... for more info on Vue components lifecycle. Hope that helps!
Thank you again! I tried your solution already, but I unfortunately I did not achieve a "beautiful" result. The whole code organisation soon gets clunky and things need to be duplicated etc.
I only get results when implementing watchers and, since there are more components involved, managing several parameters using vuex (e.g. the current lon-lat values, which a needed in the map component as well as in the "trackNewRoute" component as well as in a sidebar component, where there is a button that zooms into the current location, which is necessary in case the user changed the map's center and zoom manually...)
I wonder if I could motivate you to write another tutorials, where you show how to implement a simple tracker? Something like bikemap, where the app updates you position and draws a line of your route?
Anyway, thank you again for your article and your valuable feedback!
Hmm, that is a very nice idea for a follow-up tutorial, which I was planning to write sooner than later. Thanks, I'll keep that in mind!
Great! – And I just wanted to let you know that you have provided the path to y solutions. A bit of refactoring, removing the watchers and setting up the listeners in the mounted() cycle already helped me a lot! That's great! Thank you for making this Sunday evening a successful one!
Looking forward to your tutorial!