It sounds like you are looking at an unusual problem for games: given a bunch of rectangles with connecting edges, lay them out so that no rectangles or edges (I'm guessing) overlap. Usually the layout happens during map generation, which means it's trivial.
The general problem, of laying out a planar graph with a set of goals (minimise overlaps, edge lengths as even as possible) is a major field of study within Graph Drawing. People write papers on this stuff, and that may be cool, but might be a bit heavy for someone new to game development.
Therefore I suggest you take an existing graph layout algorithm, and modify it to include the rectangle overlap criterion. Depending on how well you want to do it, it might be trivial, or you might need to dive into the bowels of the algorithm.
Keep in mind that you are by no means guaranteed no overlaps; recall the three utilities puzzle that has no solution (but never fails to confound the internet).
Here's one way you could do it; one of the simplest graph layout algorithms to understand are force-directed ones - they simulate the graph as nodes that repel each other and edges that are spring-like and try to become as short as possible. There's even an open source javascript version called springy.js here (GitHub, demo):
You could do one of two things with this:
- Add edges with lengths long enough to guarantee the rectangles don't overlap. You may end up with a very sparse layout if you have elongated rectangles, however.
- In the
tick function, add a function that applies a large repelling force if you detect that rectangles overlap.
Unfortunately, classic force-directed graph layout algos don't resolve edge overlaps well. Fortunately due to its dynamic nature, it's sensitive to initial conditions, so you can run the algorithm repeatedly until you get a nice result.
