Zoom ImageLabel based on cursor position

[BillPlayzToday (BillPlayz)]

Hello!

I’m currently scripting an interactive map, which functions similar to Google Maps.
My current goal is to make a zoom based on the cursors position as presented in this gif:

(gif found at medium.com)

My available values:

• Mouse position on gui or screen
• Zoom factor (e.g. 1.25)
• Map Image Position (as offset)
• Map Image Size (as offset)

The anchor point of the image is 0,0.

Thanks for helping!

[DataSigh]

So step one would be knowing where on the screen you’re clicking.
Here is a little diagram I drew to familiarize yourself with offset.

The setup is relatively simple, and make sure Parent frame has ClipDescendants on.

From here, you can get an idea for how it’s going to be split up, in 4 corners.

So let’s say the player clicks on the bottom right

You would get the mouse position and get its relative offset to the map frame.

local userInputService = game:GetService("UserInputService")

button.MouseButton1Click:Connect(function()
	local pos = userInputService:GetMouseLocation()
	local relativePosition = pos - MapHolder.AbsolutePosition
	local yourClickedPosition = UDim2.fromOffset(relativePosition.X, relativePosition.Y)
end)

From here, you know the end position in offset. Then you convert it to scale and you can either immediately change the MapHolder frames position to that new position, or tween it to the new position. Once you have the new position in, you can change its “zoom”. This is a matter of changing the MapHolder frame size to a new “zoomed” in offset.

Example:

local zoomIn = 1.1
local zoomOut = 0.9

local newMapHolderSize = UDim2.fromScale(MapHolder.Size.X.Scale * zoomIn, MapHolder.Size.Y.Scale * zoomIn)
MapHolder.Size = mapHolderFrameSize 

The example above zooms the size in, but you can also zoom it out by multiplying the current size by 0.9, or however much you want to zoom it out by.