# Zoomed in Perspective as new page **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [August 7, 2024, 7:29am UTC](https://forum.inductiveautomation.com/t/zoomed-in-perspective-as-new-page/94276 "2024-08-07T07:29:46Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\ **Post date:** [August 7, 2024, 7:29am UTC](https://forum.inductiveautomation.com/t/zoomed-in-perspective-as-new-page/94276/1 "2024-08-07T07:29:46Z")
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? ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [August 7, 2024, 10:48am UTC](https://forum.inductiveautomation.com/t/zoomed-in-perspective-as-new-page/94276/2 "2024-08-07T10:48:03Z")
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](https://forum.inductiveautomation.com/t/perspective-zoom-in-and-zoom-out-with-mouse-wheel/30299): > > 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](https://forum.inductiveautomation.com/t/zoom-to-mouse-position/93379): > > 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? ---
**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\ **Post date:** [August 7, 2024, 10:53am UTC](https://forum.inductiveautomation.com/t/zoomed-in-perspective-as-new-page/94276/3 "2024-08-07T10:53:16Z")
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. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [August 7, 2024, 11:27am UTC](https://forum.inductiveautomation.com/t/zoomed-in-perspective-as-new-page/94276/4 "2024-08-07T11:27:27Z")
Check out the exchange, there are a few resources that showcase pan and zoom. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [August 7, 2024, 11:44am UTC](https://forum.inductiveautomation.com/t/zoomed-in-perspective-as-new-page/94276/5 "2024-08-07T11:44:17Z")
And BIJC's Zoom/Pan 3rd party module... ---
**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\ **Post date:** [August 7, 2024, 12:34pm UTC](https://forum.inductiveautomation.com/t/zoomed-in-perspective-as-new-page/94276/6 "2024-08-07T12:34:24Z")
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. ---
**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\ **Post date:** [August 7, 2024, 3:14pm UTC](https://forum.inductiveautomation.com/t/zoomed-in-perspective-as-new-page/94276/7 "2024-08-07T15:14:23Z")
Maybe set the container `overflow: hidden` whenever zoomed in? That would theoretically disable scrolling. EDIT: A quick check and it does work as expected. ---
**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\ **Post date:** [August 8, 2024, 5:25am UTC](https://forum.inductiveautomation.com/t/zoomed-in-perspective-as-new-page/94276/8 "2024-08-08T05:25:55Z")
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 🙂