Use of vector and raster tiles for middle-size SVG's mapping applications - Appendix 1

JavaScript Functions used with the SVGMapMaker navigation Interface

Intersection between the viewbox(overview rectangle) and a tile

Return true is the viewbox rectangle is intersecting a tile

function IntersectOvTile(objinterRectsvg,idtile)
	{
	var svgTile = svgdoc.getElementById(idtile);
	var objTile = new Rectangle(svgTile.getAttributeNS(null,'x'),svgTile.getAttributeNS(null,'y'),svgTile.getAttributeNS(null,'width'),svgTile.getAttributeNS(null,'height'));
	if (intersectrect(objinterRectsvg,objTile))
		{
		return true;
		}
	else return false;
	}
				

Check the Intersection between 2 rectangles 

Return true if there is intersection between the rectangles rect1 and rect2

    function intersectrect(rect1,rect2)
		{
		var A = new Point(parseFloat(rect1.x),parseFloat(rect1.y));
		var B = new Point(parseFloat(rect1.x)+parseFloat(rect1.w),parseFloat(rect1.y));
		var C = new Point(parseFloat(rect1.x)+parseFloat(rect1.w),parseFloat(rect1.y)+parseFloat(rect1.h));
		var D = new Point(parseFloat(rect1.x),parseFloat(rect1.y)+parseFloat(rect1.h));
		
		var E = new Point(parseFloat(rect2.x),parseFloat(rect2.y));
		var F = new Point(parseFloat(rect2.x)+parseFloat(rect2.w),parseFloat(rect2.y));
		var G = new Point(parseFloat(rect2.x)+parseFloat(rect2.w),parseFloat(rect2.y)+parseFloat(rect2.h));
		var H = new Point(parseFloat(rect2.x),parseFloat(rect2.y)+parseFloat(rect2.h));
			
		intersection=false;
		if      (pointinRectangle(rect2,A)){ intersection=true; return intersection;}
		else if (pointinRectangle(rect2,B)){ intersection=true; return intersection;}
		else if (pointinRectangle(rect2,C)){ intersection=true; return intersection;}
		else if (pointinRectangle(rect2,D)){ intersection=true; return intersection;}
		
		else if (pointinRectangle(rect1,E)){ intersection=true; return intersection;}
		else if (pointinRectangle(rect1,F)){ intersection=true; return intersection;}
		else if (pointinRectangle(rect1,G)){ intersection=true; return intersection;}
		else if (pointinRectangle(rect1,H)){ intersection=true; return intersection;}
		
		else if (intersect2segment(A,B,E,F)) { intersection=true; return intersection;}
		else if (intersect2segment(A,B,F,G)) { intersection=true; return intersection;}
		else if (intersect2segment(A,B,G,H)) { intersection=true; return intersection;}
		else if (intersect2segment(A,B,H,E)) { intersection=true; return intersection;}
		else if (intersect2segment(B,C,E,F)) { intersection=true; return intersection;}
		else if (intersect2segment(B,C,F,G)) { intersection=true; return intersection;}
		else if (intersect2segment(B,C,G,H)) { intersection=true; return intersection;}
		else if (intersect2segment(B,C,H,E)) { intersection=true; return intersection;}
		else if (intersect2segment(C,D,E,F)) { intersection=true; return intersection;}
		else if (intersect2segment(C,D,F,G)) { intersection=true; return intersection;}
		else if (intersect2segment(C,D,G,H)) { intersection=true; return intersection;}
		else if (intersect2segment(C,D,H,E)) { intersection=true; return intersection;}
		else if (intersect2segment(D,A,E,F)) { intersection=true; return intersection;}
		else if (intersect2segment(D,A,F,G)) { intersection=true; return intersection;}
		else if (intersect2segment(D,A,G,H)) { intersection=true; return intersection;}
		else if (intersect2segment(D,A,H,E)) { intersection=true; return intersection;}
		
		return intersection;
		}

Creation of point object

   
function Point(x,y)
	{
	this.x = x;
	this.y = y;
	}

Creation of a rectangle object

function Rectangle(x,y,w,h)
	{
	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;
	}

Check if a point is inside a Rectangle

Return true is the point checkPoint is inside the rectangle rectobj

function pointinRectangle(rectobj,checkPoint)
	{
	var A = new Point(parseFloat(rectobj.x),parseFloat(rectobj.y));
	var B = new Point(parseFloat(rectobj.x)+parseFloat(rectobj.w),parseFloat(rectobj.y));
	var C = new Point(parseFloat(rectobj.x)+parseFloat(rectobj.w),parseFloat(rectobj.y)+parseFloat(rectobj.h));
	var D = new Point(parseFloat(rectobj.x),parseFloat(rectobj.y)+parseFloat(rectobj.h)); 
		
	tabd = new Array();
	
	tabd[0] = A.x;	tabd[1] = A.y;
	tabd[2] = B.x;	tabd[3] = B.y;
	tabd[4] = C.x;	tabd[5] = C.y;
	tabd[6] = D.x;	tabd[7] = D.y;
	tabd[8] = A.x;	tabd[9] = A.y;
	var lentabd;	
	lentabd = 11;
	
	var counter = 0;
	for (i=0; i< lentabd-3; i=i+2)
		{
		p1x = parseFloat(tabd[i]);
		p1y = parseFloat(tabd[i+1]);
		p2x = parseFloat(tabd[i+2]);
		p2y = parseFloat(tabd[i+3]);
		if(checkPoint.y>Math.min(p1y,p2y))
			{
			if(checkPoint.y<=Math.max(p1y,p2y))
				{
				if(checkPoint.x<=Math.max(p1x,p2x))
					{
					if(p1y!=p2y)
						{
						x_inter=(checkPoint.y-p1y)*(p2x-p1x)/(p2y-p1y)+p1x;
						if(p1x==p2x||checkPoint.x<=x_inter){counter++;}
						}
					}
				}
			}
		}
return counter%2==1;
}


Check the intersection between 2 segments

Return true if there is intersection between the segment [point1, point2] and the segment [point3, point4]

function intersect2segment(point1,point2,point3,point4)
	{
	var afirst;
	var asec;
	var bfirst;
	var bsec;
	var intersection;
	var vector1vert = false;
	var vector2vert = false;
	
	if (point2.x != point1.x)
		{
		afirst = parseFloat(point2.y-point1.y)/parseFloat(point2.x-point1.x);
		bfirst = parseFloat(point1.y) - parseFloat(afirst*point1.x);
		}
	else vector1vert = true;
	
	if (point3.x != point4.x)
		{
		asec = parseFloat(point4.y-point3.y)/parseFloat(point4.x-point3.x);
		bsec = parseFloat(point3.y) - parseFloat(asec*point3.x);
		}
	else vector2vert = true;
		
	intersection=false;
	if (!vector1vert || !vector2vert)
		{
		if (!vector1vert && !vector2vert)
			{
			if (afirst != asec)
				{
				y_inter = parseFloat(afirst*(bsec-bfirst)/(afirst-asec)) + parseFloat(bfirst);
				x_inter = parseFloat((bfirst-bsec)/(asec-afirst));
				if ((y_inter >= Math.min(point1.y,point2.y)) && (y_inter <= Math.max(point1.y,point2.y)))
					{
					if ((y_inter >= Math.min(point3.y,point4.y)) && (y_inter <= Math.max(point3.y,point4.y)))
						{
						if ((x_inter >= Math.min(point1.x,point2.x)) && (x_inter <= Math.max(point1.x,point2.x)) )
							{
							if ((x_inter >= Math.min(point3.x,point4.x)) && (x_inter <= Math.max(point3.x,point4.x)))
								{
								intersection = true;
								}
							}
						}
					}
				}
			else
				{
				if (bfirst == bsec)
					{
					if (Math.min(point3.x,point4.x) <= Math.max(point1.x,point2.x))
						{
						if (Math.max(point3.x,point4.x) >= Math.min(point1.x,point2.x))
							{
							intersection = true;
							}
						}
					}
				}
			}
		else
			{
			if (vector1vert)
				{
				if ((point1.x >= Math.min(point3.x,point4.x)) && (point1.x <= Math.max(point3.x,point4.x)))
					{
					y_inter = parseFloat(asec*point3.x + bsec);
					if ((bsec >= Math.min(point1.y,point2.y)) && (bsec <= Math.max(point1.y,point2.y)))
						{
						intersection = true;
						}
					}
				}
			if (vector2vert)
				{
				if ((point3.x >= Math.min(point1.x,point2.x)) && (point3.x <= Math.max(point1.x,point2.x)))
					{
					y_inter = parseFloat(afirst*point1.x + bfirst);
					if ((y_inter >= Math.min(point3.y,point4.y)) && (y_inter <= Math.max(point3.y,point4.y)))
						{
						intersection = true;
						}
					}
				}
			}
		}
	else
		{
		if (point1.x == point3.x)
			{
			if (Math.min(point3.y,point4.y) <= Math.max(point1.y,point2.y))
				{
				if (Math.max(point3.y,point4.y) >= Math.min(point1.y,point2.y))
					{
					intersection = true;
					}
				}
			}
		}
	return intersection;
	}

Valid XHTML 1.1!