search

manubb / Leaflet.PixiOverlay

Bring Pixi.js power to Leaflet maps
MIT License
463 stars 85 forks source link

Using Vue3 #89

Open nigelPam opened 1 year ago

nigelPam commented 1 year ago

Not an issue, but this may help somebody.

I was having some problems using Vue3 with pixi layer, but have overcome them, so anybody else using Vue may be interested.

The pure Javascript demos have a document.addEventListener("DOMContentLoaded", event handler, so pixis are drawn after loading.

With Vue, I had two methods. One to draw the basic map, and load textures, and another to draw the pixels.

Then, after drawing the map, I used nexttick to draw the pixels.

nexttick is a very useful Vue function which waits until the next time the DOM is loaded. It replaces the DOMContentLoaded event.

nigelPam commented 1 year ago

More advice. Make the Vue very 'light'. Use javascript variables rather than Vue properties, for example do not have a Vue property for the map, using a plain Javascript variable.

I tore my hair out for several days until I moved some properties to Javascript variables.