DEV Community

Discussion on: Integrating an OpenLayers map in Vue.js, a step-by-step guide

Collapse
rowild profile image
Robert Wildling

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...

Thread Thread
jahow profile image
Olivier Guyot Author

Ok, I think I see what you mean. Event handlers should be defined in the mounted callback, 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!

Thread Thread
rowild profile image
Robert Wildling

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!

Thread Thread
jahow profile image
Olivier Guyot Author

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!

Thread Thread
rowild profile image
Robert Wildling

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!