search

manubb / Leaflet.PixiOverlay

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

what to do in order to draw different markers? #35

Closed novaknole closed 1 year ago

novaknole commented 4 years ago

Hi, Thanks for this plugin.

Let's say I have a component which I pass markers. And use your code to draw them. Now, parent component's data might change, so prop will change too and on watcher, I want to remove old markers and draw new passed data again.

what do I need to do to achieve this?

What I have tried - created 2 containers,parent and child and put sprites into the child . and add pixilayer to map. This was for the first time. Now when parent data changes, what I do is remove child container from parent container. and run redraw again with my custom event type which does the same thing as if sprites were being added to child container but for new passed array.

Question 1) is It the correct logic of what I mentioned above? I mean removing the whole child container, and when event changes to my event, i add this children into pixicontainer again and then adding new sprites into this child container.

manubb commented 4 years ago

You do not need two containers to achieve this. You can add/update/remove your sprites to/from main pixi container. For example, to clear everything:

container.removeChildren()

Anyway, using parent/child containers as you propose should be ok too. Do not forget to add child container to parent container though.

slydor commented 4 years ago

This might help you: Rendering things in computer graphics is often based on some kind of data model and a 'render' or 'update' loop which provides this awesome plugin in the first place. This loop might clear its canvas first from old data and simply redraw everything.

So for instance your model could be a simple array of marker data with a structure. The loop knows this structure and draws shapes or colors based on the data inside.

Some months ago I created a simple example drawing some random shapes, you might have a look: https://github.com/slydor/map

The important thing I needed to add was calling the public redraw() on change of my data. This triggers the render loop on change of my data besides the normal updates after mouse move events.