Map and Radar Customization

[XeroXipher]

Hey guys... I post for help almost everyday and I do feel bad about that... I want to be able to stand on my feet and hopefully after I figure this out I'll be able to focus on things I'm good at.
I downloaded this resource on the MTA SA Community (Resources).
It is a Square Minimap (Radar) and F11 Full Screen Map.

These are pictures of my Server based around the Map so far:
Picture of MTA SA with Minimap (Radar)
Picture of MTA SA with F11 Map (Full Size Map)

I did manage to get the ShowCursor() function to work and it works well, but to move Left (Press Left Button) Right (Press Right Button) Up (Press Up Button) Down (Press Down Button) I need to actually use the Buttons and can't use the Mouse.
ZoomIn is (num_add)
ZoomOut is (num_sub)

I tried to add a keybind for ZoomIn/ZoomOut but it didn't work...
Can someone show me how to Keybind a Function within the F11 Map (Like Zoom In / Out, Grab Map with Mouse and Move it)

This is my code so far:

 

--[[----------------------------------------------------
-- client script main
-- @author Banex
-- @update 24/03/2016 
----------------------------------------------------]]-- 

function onClientResourceStart()	
	map = Map.new():init()
	map:setBounds(x*30,y*30,x*1306,y*708)
	map:setAlpha(200)

	radar = Map.new():init()
	radar:setBounds(x*20, y*560, x*281, y*193)
	radar:setStyle(2)
	radar:setAlpha(200)
	radar:setBlipSize(x*24)
	radar:setVisible(true)

	map.Switch = function()
		toggleCursor() 
		mapKeys()
		map:setVisible(not map:isVisible())
		radar:setVisible(not map:isVisible())
		showChat(not map:isVisible())
	end
	
	bindKey('F11', 'down', map.Switch)
	setPlayerHudComponentVisible("radar",false)
	toggleControl("radar",false)
	
end

function toggleCursor()
    local cursorState = isCursorShowing() -- Retrieve the state of the player's cursor
    local cursorStateOpposite = not cursorState -- The logical opposite of the cursor state
  	showCursor(cursorStateOpposite) -- Setting the new cursor state
end

function mapKeys()
	bindKey("mouse_wheel_up", "down", radar_zoom_in) --This doesn't work
	bindKey("mouse_wheel_down", "down", radar_zoom_out) --And This doesn't work
end

addEventHandler("onClientResourceStart",resourceRoot,onClientResourceStart)

function onClientResourceStop()
	setPlayerHudComponentVisible("radar",true)
	toggleControl("radar",true)
end
addEventHandler("onClientResourceStop",resourceRoot,onClientResourceStop)

I'll stop blowing up this forum after this question has been resolved

[XeroXipher]

Hey guys, I am still having trouble with this... How can I zoom in / zoom out (Mousewheel Up / Mousewheel Down) and move map with (Hold Left Click -> Move Mouse) ?

[P[ow]er]

function onClientResourceStart()  
    map = Map.new():init()
    map:setBounds(x*30, y*30, x*1306, y*708)
    map:setAlpha(200)
    
    radar = Map.new():init()
    radar:setBounds(x*20, y*560, x*281, y*193)
    radar:setStyle(2)
    radar:setAlpha(200)
    radar:setBlipSize(x*24)
    radar:setVisible(true)
    
    -- Variables to track mouse movement
    mouseDown = false
    lastX, lastY = 0, 0
    
    map.Switch = function()
        local wasVisible = map:isVisible()
        map:setVisible(not wasVisible)
        radar:setVisible(not wasVisible)
        showChat(not wasVisible)
        
        -- Only show cursor and bind keys when map is visible
        if not wasVisible then
            showCursor(true)
            addEventHandler("onClientCursorMove", root, handleMouseMovement)
            addEventHandler("onClientMouseWheel", root, handleMouseWheel)
            addEventHandler("onClientClick", root, handleMouseClick)
            bindKey("mouse_wheel_up", "down", function() zoomMap("in") end)
            bindKey("mouse_wheel_down", "down", function() zoomMap("out") end)
        else
            showCursor(false)
            removeEventHandler("onClientCursorMove", root, handleMouseMovement)
            removeEventHandler("onClientMouseWheel", root, handleMouseWheel)
            removeEventHandler("onClientClick", root, handleMouseClick)
            unbindKey("mouse_wheel_up", "down")
            unbindKey("mouse_wheel_down", "down")
        end
    end
    
    bindKey('F11', 'down', map.Switch)
    setPlayerHudComponentVisible("radar", false)
    toggleControl("radar", false)
end

-- Function to handle mouse clicks for dragging
function handleMouseClick(button, state)
    if map:isVisible() and button == "left" then
        if state == "down" then
            mouseDown = true
            local x, y = getCursorPosition()
            lastX, lastY = x, y
        else
            mouseDown = false
        end
    end
end

-- Function to handle mouse movement for dragging the map
function handleMouseMovement(_, _, x, y)
    if map:isVisible() and mouseDown then
        local currentX, currentY = x, y
        local deltaX, deltaY = currentX - lastX, currentY - lastY
        
        -- Move map based on mouse movement
        local mapX, mapY, mapW, mapH = map:getBounds()
        -- Adjust movement sensitivity as needed
        local moveSpeed = 1.5
        map:setBounds(mapX - deltaX * moveSpeed, mapY - deltaY * moveSpeed, mapW, mapH)
        
        lastX, lastY = currentX, currentY
    end
end

-- Function to handle mouse wheel for zooming
function handleMouseWheel(direction)
    if map:isVisible() then
        zoomMap(direction > 0 and "in" or "out")
    end
end

-- Centralized zoom function
function zoomMap(direction)
    if not map:isVisible() then return end
    
    local x, y, width, height = map:getBounds()
    local zoomFactor = 0.1 -- Adjust for faster/slower zooming
    
    if direction == "in" then
        -- Zoom in: decrease size, adjust position to zoom toward center
        local newWidth = width * (1 - zoomFactor)
        local newHeight = height * (1 - zoomFactor)
        local newX = x + (width - newWidth) / 2
        local newY = y + (height - newHeight) / 2
        map:setBounds(newX, newY, newWidth, newHeight)
    else
        -- Zoom out: increase size, adjust position to zoom from center
        local newWidth = width * (1 + zoomFactor)
        local newHeight = height * (1 + zoomFactor)
        local newX = x - (newWidth - width) / 2
        local newY = y - (newHeight - height) / 2
        map:setBounds(newX, newY, newWidth, newHeight)
    end
end

addEventHandler("onClientResourceStart", resourceRoot, onClientResourceStart)

function onClientResourceStop()
    setPlayerHudComponentVisible("radar", true)
    toggleControl("radar", true)
    
    -- Clean up any remaining event handlers
    if map:isVisible() then
        removeEventHandler("onClientCursorMove", root, handleMouseMovement)
        removeEventHandler("onClientMouseWheel", root, handleMouseWheel)
        removeEventHandler("onClientClick", root, handleMouseClick)
    end
end

addEventHandler("onClientResourceStop", resourceRoot, onClientResourceStop)