Custom F11 Map Zoom in

[Flower ☠ Power]

I'm trying to make a custom F11 map but when I zoom in my blips get screwed up because I cannot guess the right formula to calculate their position in the screen when zoomed in.

local fullMapZoom = 1
local xfullMapOffset = 0
local yfullMapOffset = 0

function renderFullMap()
	dxSetRenderTarget(fullMapRender, true)
	dxDrawImage((dxD_fullMapRT[3]/2) - (dxD_fullMapRT[3]/2) * fullMapZoom + xfullMapOffset, (dxD_fullMapRT[4]/2) - (dxD_fullMapRT[4]/2) * fullMapZoom + yfullMapOffset, dxD_fullMapRT[3] * fullMapZoom, dxD_fullMapRT[4] * fullMapZoom, radar_full, 0, 0, 0, -1, false) --Render the big map
	for _, v in pairs(nearbyPlayers) do --Loop in a table of players
		if (v[6] == myDim) then
			local x, y = getElementPosition(v[1]) -- Players x, y
			local blipX, blipY = (x + 3000) * (dxD_fullMapRT[3]/6000), (y - 3000) * (-dxD_fullMapRT[4]/6000)
			local blipX = blipX + (blipX - blipX*fullMapZoom)/2 + xfullMapOffset
			local blipY = blipY + (blipY - blipY*fullMapZoom)/2 + yfullMapOffset
			dxDrawImage(blipX - radar_icons[1][2], blipY - radar_icons[1][3], radar_icons[1][4], radar_icons[1][5], radar_icons[1][1], 0, 0, 0, v[5])
		end
	end
	dxSetRenderTarget()
	dxDrawImage(dxD_fullMapRT[1], dxD_fullMapRT[2], dxD_fullMapRT[3], dxD_fullMapRT[4], fullMapRender, 0, 0, 0, -1, false)
end

Look at the small white icon in the map and then when zoomed in it's displaced and I'm really struggling to get the formula to calculate the position on the screen after zoomed in,  please help me.

[Master_MTA]

4 hours ago, Flower ☠ Power said:

zoomed

display ur click zoom in btn code

[Flower ☠ Power]

9 hours ago, Master_MTA said:

display ur click zoom in btn code

That really doesn't matter but here it is

local zoomSensitivity = 0.05

function zoomFullMap(button, press)
	if (button == 'mouse_wheel_up') and (press == true) then
		fullMapZoom = fullMapZoom + zoomSensitivity
	elseif (button == 'mouse_wheel_down') and (press == true) then
		fullMapZoom = fullMapZoom - zoomSensitivity
	end
end
addEventHandler("onClientKey", root, zoomFullMap)

It just adds or subtracks 0.05 to the fullMapZoom variable depending you scroll down/up, if you want the formula used to zoom in/out the map look at this:

dxDrawImage((dxD_fullMapRT[3]/2) - (dxD_fullMapRT[3]/2) * fullMapZoom + xfullMapOffset, (dxD_fullMapRT[4]/2) - (dxD_fullMapRT[4]/2) * fullMapZoom + yfullMapOffset, dxD_fullMapRT[3] * fullMapZoom, dxD_fullMapRT[4] * fullMapZoom, radar_full, 0, 0, 0, -1, false) --Render the big map

I just center the map image multiply by the amount of zoom then add offset to move the map

[Master_MTA]

On 22/04/2020 at 00:45, Flower ☠ Power said:

• dxDrawImage((dxD_fullMapRT[3]/2) - (dxD_fullMapRT[3]/2) * fullMapZoom + xfullMapOffset, (dxD_fullMapRT[4]/2) - (dxD_fullMapRT[4]/2) * fullMapZoom + yfullMapOffset, dxD_fullMapRT[3] * fullMapZoom, dxD_fullMapRT[4] * fullMapZoom, radar_full, 0, 0, 0, -1, false) --Render the big map
•  

i need u to declare each parameter of this so am being able to help u 

[Flower ☠ Power]

11 hours ago, Master_MTA said:

i need u to declare each parameter of this so am being able to help u 

dxD_fullMapRT = {screenW * 0.2677, screenH * 0.0870, screenW * 0.4646, screenH * 0.8259}

This are just numbers the first two are x, y positions of where the render target must be in the the screen, then the other two are the size of the render target width and height respectively, all in relative numbers, if u want the exact number well just do the math: 1920 * 0.4646 ~= 892

[Master_MTA]

11 hours ago, Flower ☠ Power said:

math

actually i don't understand what did u do in the drawing method so i will suppose my x,y,width,height

and u can replace it later

local mapPath = "image.png"
local blipPath = "blip.png"
local scx,scy = guiGetScreenSize()
local width = 500
local height = 500
local x=( scx/2 ) - (width/2)
local y=( scy/2 ) - (height/2)
local blipWidth = 32
local blipHeight = 32
--let's start with the zoom in variables
local zoomSensitivity = 1-- each scroll will zoom in 20 px of width and 10px of height
local fullMapZoom = 0
function zoomFullMap(button, press)
	if (button == 'mouse_wheel_up') and (press == true) then
		fullMapZoom = fullMapZoom + zoomSensitivity
	elseif (button == 'mouse_wheel_down') and (press == true) then
		fullMapZoom = fullMapZoom - zoomSensitivity
	end
end
addEventHandler("onClientKey", root, zoomFullMap)

addEventHandler("onClientRender", root, function()
	if fullMapZoom > 0 then
    	dxDrawImageSection(x,y,width,height, fullMapZoom*10, fullMapZoom*5, width - (fullMapZoom*10), height - (fullMapZoom*5), imagePath)
      --now we done dealing with image so let's start work on blip am gonna do it for local player and u can do it for all players
      	local worldPos = {getElementPosition(localPlayer)}
      	local pos = {getScreenFromWorldPosition(unpack(worldPos))}
      	local ratio = {(pos[1]/scx)*100,(pos[2]/scy)*100}
		local fPos = {ratio[1]*width,ratio[2]*height}
      	dxDrawImage(x+fPos[1]-(fullMapZoom*10*2),y+fPos[2]-(fullMapZoom*5*2),blipWidth,blipHeight, blipPath, 0, 0, 0, -1, true)       
      	
	else
		dxDrawImage(x,y,width,height, imagePath, 0, 0, 0, -1, false)       
        --now we done dealing with image so let's start work on blip am gonna do it for local player and u can do it for all players
      	local worldPos = {getElementPosition(localPlayer)}
      	local pos = {getScreenFromWorldPosition(unpack(worldPos))}
      	local ratio = {(pos[1]/scx)*100,(pos[2]/scy)*100}
		local fPos = {ratio[1]*width,ratio[2]*height}
      	dxDrawImage(x+fPos[1],y+fPos[2],blipWidth,blipHeight, blipPath, 0, 0, 0, -1, true)  
    end
end)
  
  

try this am actually don't know if it's gonna work or not but test it

and if there is any mistakes please post photo   

Edited April 24, 2020 by Master_MTA

[Flower ☠ Power]

21 minutes ago, Master_MTA said:

actually i don't understand what did u do in the drawing method so i will suppose my x,y,width,height

and u can replace it later

local mapPath = "image.png"
local blipPath = "blip.png"
local scx,scy = guiGetScreenSize()
local width = 500
local height = 500
local x=( scx/2 ) - (width/2)
local y=( scy/2 ) - (height/2)
local blipWidth = 32
local blipHeight = 32
--let's start with the zoom in variables
local zoomSensitivity = 1-- each scroll will zoom in 20 px of width and 10px of height
local fullMapZoom = 0
function zoomFullMap(button, press)
	if (button == 'mouse_wheel_up') and (press == true) then
		fullMapZoom = fullMapZoom + zoomSensitivity
	elseif (button == 'mouse_wheel_down') and (press == true) then
		fullMapZoom = fullMapZoom - zoomSensitivity
	end
end
addEventHandler("onClientKey", root, zoomFullMap)

addEventHandler("onClientRender", root, function()
	if fullMapZoom > 0 then
    	dxDrawImageSection(x,y,width,height, fullMapZoom*10, fullMapZoom*5, width - (fullMapZoom*10), height - (fullMapZoom*5), imagePath)
      --now we done dealing with image so let's start work on blip am gonna do it for local player and u can do it for all players
      	local worldPos = {getElementPosition(localPlayer)}
      	local pos = {getScreenFromWorldPosition(unpack(worldPos))}
      	local ratio = {(pos[1]/scx)*100,(pos[2]/scy)*100}
		local fPos = {ratio[1]*width,ratio[2]*height}
      	dxDrawImage(x+fPos[1]-(fullMapZoom*10*2),y+fPos[2]-(fullMapZoom*5*2),blipWidth,blipHeight, blipPath, 0, 0, 0, -1, true)       
      	
	else
		dxDrawImage(x,y,width,height, imagePath, 0, 0, 0, -1, false)       
        --now we done dealing with image so let's start work on blip am gonna do it for local player and u can do it for all players
      	local worldPos = {getElementPosition(localPlayer)}
      	local pos = {getScreenFromWorldPosition(unpack(worldPos))}
      	local ratio = {(pos[1]/scx)*100,(pos[2]/scy)*100}
		local fPos = {ratio[1]*width,ratio[2]*height}
      	dxDrawImage(x+fPos[1],y+fPos[2],blipWidth,blipHeight, blipPath, 0, 0, 0, -1, true)  
    end
end)
  
  

try this am actually don't know if it's gonna work or not but test it

and if there is any mistakes please post photo   

I am so sorry for making you waste your time I figured it out right now and by right now I mean right now at this moment.

local x, y = getElementPosition(v[1])
			local blipX, blipY = (x + 3000) * (dxD_fullMapRT[3] * fullMapZoom/6000), (y - 3000) * ((-dxD_fullMapRT[4]*fullMapZoom)/6000)
			local blipX = blipX + (dxD_fullMapRT[3]/2) - (dxD_fullMapRT[3]/2 * fullMapZoom) + xfullMapOffset
			local blipY = blipY + (dxD_fullMapRT[4]/2) - (dxD_fullMapRT[4]/2 * fullMapZoom) + yfullMapOffset
			dxDrawImage(blipX - radar_icons[1][2], blipY - radar_icons[1][3], radar_icons[1][4], radar_icons[1][5], radar_icons[1][1], 0, 0, 0, v[5])

This is the correct way to calculate it, the reason why it wasn't working it was because when I was dividing the map width with 6000 I wasn't taking into account that when zoomed in it has to be multiplied with the zoom factor, and then after that it's just adding the same amount of X or Y added in the previously in the zoomed map.

 

I have really thank you for your time and effort you spent trying to help me I really apreciate, thanks buddy.

[Master_MTA]

13 minutes ago, Flower ☠ Power said:

thanks

ur welcome friend happy to help u  

[mathewzika]

Can you give me the map  PNG/JPG Image file please? maybe it is HD?

Edit: if anyone have any link or F11 Map Images / PNG/JPG can give me IT? i wanna use some new maps FOR F11, thanks!

 

Ik this is an old topic.

Edited July 13, 2021 by mathewzika