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

   function IntersectOvTile2(rectoverview, tile)
	{
	root = document.getRootElement();
	svg = document.getElementById('mainMap');
	var rect = root.createSVGRect();
	setRect(rect, rectoverview.x, rectoverview.y, rectoverview.w, rectoverview.h);
   	var el;
	el = root.getElementById(tile);
	if (checkTheIntersection(root,rect,el)) return true;
	else return false
	}

    function checkTheIntersection(lesvg, rect, elem) 
	{
   	if (lesvg.checkIntersection(elem, rect)) 
		{
        return true;
		}
	else 
		{
		return false
		}
       
    }

    function checkForTiles(evt)
	{
	tablayers = layers.split(';');	
	nblayer = tablayers.length - 1;
	var nbtiles;
	var nblincol;
	var rectov;
	
	rectov = new Rectangle(parseFloat(intvbx + (-tx)*(svgzoomfactor)/scale),parseFloat(intvby + (-ty)*(svgzoomfactor)/scale),parseFloat(svg_width*svgzoomfactor/scale),parseFloat(svg_height*svgzoomfactor/scale));
	
	
	for (var klayer = 0;klayer <= nblayer-1; klayer++)
		{
		objlayer = svgdoc.getElementById(tablayers[klayer]);
		layername = tablayers[klayer];
		
		if ((objlayer.getAttributeNS(dbxns,'tiled') == 'true') && (objlayer.getStyle().getPropertyValue('visibility') == 'visible'))
			{
			nbtiles = parseInt(objlayer.getAttributeNS(dbxns,'nbTiles'));
			nblincol = Math.sqrt(nbtiles);
			for (var klin=1; klin<=nblincol; klin++)
				{
				for (var kcol=1; kcol<=nblincol; kcol++)			
					{
					if (IntersectOvTile2(rectov,layername+klin+'_'+kcol+'_tile') == true)
						{
						if (svgdoc.getElementById(layername+klin+'_'+kcol+'_tile').getAttributeNS(dbxns,'tileloaded')=='false')		 
							{
							if (svgdoc.getElementById(layername+klin+'_'+kcol+'_tile').getAttributeNS(dbxns,'compressed') == 'true')
								{
								addLayer(layername + klin+'_'+kcol+'.svgz',layername);
								}
							else addLayer(layername + klin+'_'+kcol +'.svg',layername);
							svgdoc.getElementById(layername+klin+'_'+kcol+'_tile').setAttributeNS(dbxns,'tileloaded','true');
							}
						}
					else
						{
						if (svgdoc.getElementById(layername+klin+'_'+kcol+'_tile').getAttributeNS(dbxns,'tileloaded')=='true')
							{
							removeLayer(layername+klin+'_'+kcol,layername);
							svgdoc.getElementById(layername+klin+'_'+kcol+'_tile').setAttributeNS(dbxns,'tileloaded','false');
							}
						}
					}
				}
			}
		}
	}

function init(evt)
	{
	svgdoc = evt.target.getOwnerDocument();
	var svgroot = svgdoc.getDocumentElement();
	var viewbox = new String(svgroot.getAttribute('viewBox'));
	var viewboxes = viewbox.split(' ');

	intvbx = parseInt(viewboxes[0]);
	intvby = parseInt(viewboxes[1]);
	intvbxu = parseInt(viewboxes[2]);
	intvbyu = parseInt(viewboxes[3]);
	svg_width = parseInt(svgroot.getAttribute('width'));
	svg_height = parseInt(svgroot.getAttribute('height'));
	svgzoomfactor = intvbxu/svg_width;
	tablayers = layers.split(';');
	nblayer = tablayers.length - 1;
	loadcoord(evt);
	}

function setRect(rect, x, y, w, h)
	{
    rect.x      = x;
    rect.y      = y;
    rect.width  = w;
    rect.height = h;
    }

var scale;
var tx,ty ;
var intvbx, intvby, intvbxu, intvbyu;
var svg_width, svg_height;
var svgzoomfactor;
var svgdoc;
var zoom = 1710;
var dbxns = 'http://www.dbxgeomatics.com/ns';
var tablayers;
var nblayer;
var svgns = "http://www.w3.org/2000/svg";
var root;
var rect;
var svg;

function loadcoord(evt)
	{
	var svgroot = svgdoc.getDocumentElement();
	tx= svgroot.currentTranslate.x;
	ty= svgroot.currentTranslate.y;
	scale= parseFloat(svgroot.getCurrentScale());

	for (var klayer = 0;klayer <= nblayer-1; klayer++)
		{
		objlayer = svgdoc.getElementById(tablayers[klayer]);
		layername = tablayers[klayer];
			if 	(objlayer.getAttributeNS(dbxns,'zoomLayer') == 'true')
			{
			if ((zoom/scale > parseFloat(objlayer.getAttributeNS(dbxns,'zoomMin'))) && (zoom/scale  < parseFloat(objlayer.getAttributeNS(dbxns,'zoomMax'))))
				{
				objlayer.setAttribute("style","visibility:visible;")
				}
			else 
				{
				objlayer.setAttribute("style","visibility:hidden;")
				}
			}
		}
	}


function panning(evt)   
	{
	loadcoord(evt);
	checkForTiles(evt);
	}

function getCallbackHandler(grp)
	{
	var cb = function(urlRequestStatus)
		{
		var string='';
		if (urlRequestStatus.success)
			{
			string=urlRequestStatus.content;
			}
		else{return;}
		var docFragment=parseXML(string, document);
		var content = document.getElementById (cb.insertAfter);
		content.appendChild (docFragment);
		}
	cb.insertAfter=grp;
	return cb;
	}

function addLayer(url, grp)
	{
	getURL(url,getCallbackHandler(grp));
	}

function removeLayer(id,from) 
	{
	
	var nodeToRemove = document.getElementById(id);
	var parent=document.getElementById(from);
	parent.removeChild(nodeToRemove);
	}