Setting viewport to specific box

[cpaczek]

Hi,

I am using this library to make a virtual map (sfsumap.com) and I have a search box that highlights certain buildings.

What I am trying to do is automatically set the view port to fit the selected buildings. What I can do is calculate a box that surrounds all of the selected buildings by doing some simple math. I can then use the midpoint formula to get the center of that box and set the pan() to that coordinate. However I am having 2 issues.

I can use https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect in order to get the cordinate of a specific building however these cordinates (I believe) are corresponding to the viewbox. How can I convert these coordinates to somthing that I can set the pan to.

The second issue is getSizes() doesn't seem to match what I get with getPan() for example on my device I get a width of 1378 using getSizes() however when I use getPan and pan all the way to the left and subtract that from going all the way to the right i get 1714. Why are these numbers different? I though it could be because of my panning gutter but that would make getPan only 600 wider not 336

Basically if anyone of you have played super smash bros the viewport of the camera automatically shifts to keep all characters in view. Basically what i wan to do is match that to make it so all of the selected buildings are in view.

I have the general math worked out howoever I need to figure out how to match the coordinates of the svg to the coordnate system used by svg pan zoom.