Zoomed in Perspective as new page

[Remco_Geervliet]

I have a floor plan of the entire facility with all it's equipment layered on top. This allows for a bird's-eye-view of the current state of processes, positions of mobile equipment, etc.

The customer has requested a "zoom"-function. They want to be able to focus on the west-wing of the facility, scaling up the floor plan to only fit the desired wing on the screen. Naturally anything layered on top of this part of the floor plan will also have to scale up.

What would be the best way to go about this, besides rebuilding this part of the floor plan but bigger?

[Alejandro_Alaco]

I would simply do another page with that part but bigger,

use css transform: scale() seem like a good option too

Some zoom links:

Perspective zoom-in and zoom-out with mouse wheel

Hello is there a way to do a zoom in on the page in perspective mode using the mouse wheel? To be clear I’m looking for something like zooming in and out over an area in google maps. I have this SVG map which I would like to zoom with the mouse wheel or wtih the fingers in case of mobile device, and I couldn’t find a way to do that. My problem is that I have another floating SVG “pin” which marks a position and I don’t want this “pin” to change position during the zoom operations. Any help o…

Zoom to mouse position

I have succeeded in panning and zooming a view containing an svg but now it just zooms to the center of the view. I have been trying to figure out what the best way to calculate the required panning while zooming to focus on the mouse. Would anybody have any ideas or experience with this?

[Remco_Geervliet]

I think I've seen pretty much every other post here containing the word "zoom"

It doesn't have to be dynamic, I prefer it to be static. If it was just the SVG, I wouldn't be opposed to just chucking that in there and play around a bit with the viewbox. The problem lies in all the overlaying equipment. I'd have to copy and paste a few dozen elements, rescale them, and recalibrate their position-logic. I was hoping someone had a nifty trick to circumvent that.

[jlandwerlen]

Check out the exchange, there are a few resources that showcase pan and zoom.

[pturmel]

And BIJC's Zoom/Pan 3rd party module...

[Remco_Geervliet]

I think I have mis-phrased my intent.

Although I want to zoom in on a piece of the main view, I don't want it to be literally zoomed in - this would allow the user to scroll and the zoomed-in-view is supposed to be a static page.

My work-around now is to take an embedded view and use the css zoom-property. On a coordinate container I can enter negative values for the x and y so the part of the floor plan I want to focus on will be in view. However, because of the scrollbars, a user will be able to move around the zoomed floorplan, accidentally or on purpose.

Because those scrollbars are browser-generated due to the size of the view, I don't think this can be resolved from the designer. Hence my search for an alternative solution.

[Felipe_CRM]

Maybe set the container overflow: hidden whenever zoomed in? That would theoretically disable scrolling.

EDIT: A quick check and it does work as expected.

[Remco_Geervliet]

I have never gotten the overflow-property to behave like I expect it to, but I always attached it to the element I wanted to manipulate instead of the parent-container. I thought I had a wrong expectation, but I was using it in the wrong place

I learned something new today, ánd got to solve my problem. Thank you all very much for your input