I have implemented a FlightRadar API in TouchDesigner and I’m focusing on creating an interactive London map with the dots representing the live flights with the code being ran every three seconds and updating the flight info.
Currently, my project looks like this - using the scroll bars you can navigate around the map and click on the dot to find out more information about the flight.
This was done by combining two containers, one being the image of the London map and the other container representing all the dots from the render top.
How can I make it so that I can introduce mouse interactivity within the container so I’m able to use it like google maps, being able to zoom in and out, being able to click and drag in the desired direction?
Easy (but limited) solution: Use the Drag to Reposition parameters of the children (content) container. No zooming.
Here’s an example tox: container_drag_example.tox (7.7 KB)
More involved solution: Roll your own logic to add zoom into the equation. It’s probably easier to do this with Extension code, Panel Execute events (or Panel CHOP) and Geometry + Instancing + Render TOP + Render Pick, this way you can derive the zoom + pan transform and apply it to your geometry before render.
Thanks for the swift reply, I really appreciate it.
The more involved solution does sound quite compelling but I’d need to look more into panels as I have very limited understanding of that and wouldn’t know how to execute that solution.
For now, I’ll probably work with the easier solution you’ve provided. Seeing how I have two containers, how can I make it so that they both move at the same time when dragging? It’s only moving the container that contains the dots but not the map.
