CODEWITHSUNDEEP
vuejs2leafletopenlayers
Orienteerix
Orienteerix

Reputation: 473

Using libraries such as Leaflet or OpenLayers with Vue.js without breaking DOM?

The JS libraries that are meant for showing maps on the web pages and I guess many other libraries that visualize data on the web pages often modify the DOM quite heavily.

If I want to use such library with Vue.js and there is no fitting library adaption available for Vue.js then what are the best practices for adapting them, so that the DOM is updated properly and I can use the libraries safely?

Upvotes: 1

Views: 729

Answers (1)

Thomas Gratier
Thomas Gratier

Reputation: 2371

Personally, for Vue or for any library, I just play with the lifecycle of the JavaScript framework.

In Vue, I create my map in mounted cycle (see the diagram from the official doc) because Openlayers like Leaflet both need a DOM element mounted to bind the map related elements.

It's the same if using React, you just use componentDidMount (see the React lifecycle diagram)

Upvotes: 2

Related Questions