Zooming on click position issue

[Dharmesh1979]

Hi Bumbu,

Really lovely work you all have done. I am using this code in my one project for demo. I have a few issues, but one main issue is moving the zooming image on a given coordinate. I have prepared SVG programmatically based on data. Now, I had indicated an error in SVG and those coordinate I have stored as a hyperlink and when the user will click on that link SVG move to that position in the current zoom scale.

Eg. I have an object or element drawn on a position 100, 399 and 230,344 accordingly. I would like when clicking on the link user will get that position I mean image to move to that coordinate with respect current zoom scale or another way in the minor zoom ratio.

The Example link looks like this. Is there a way to get this result?

Text is missing with element

Out of room element

These coordinates are original coordinates how can I or which function will use it like zoom at a given point but zoom level will be disturbing it. If I have zoomed 5 times and I will call it not working properly at the given point in the middle of DIV.

[FrankBuchholz]

I've the impression that I do something similar in my project:

• view a huge generated svg in one tab of the browser
• click on a link on a page in another window of the browser
• center the svg view onto the point indicated by the link

Here is the function which takes the x and y coordinates out of a 3D vector "Position" and pans the (mirrored) svg view to that point:

function centerPosition(Position) {
	const width 	= panZoom.getSizes().width;
	const height	= panZoom.getSizes().height;
	const realZoom	= panZoom.getSizes().realZoom;

	const posX = 12, posY = 13, posZ = 14;
	const panX 		= width/2	- Position[posX] * realZoom;
	const panY 		= height/2	- (-Position[posY]) * realZoom;	// svg: mirrored y-coordinate

	panZoom.pan({x: panX, y: panY});
}

The calculation ensures the current zoom level does not dirturb anything.

Greeting
Frank

You find the code in this file: https://github.com/FrankBuchholz/EEP_convert_anl3_file/blob/master/EEP_Gleisplan.html