var APIkey="in5wghdufn0gn8d7g0394dsg";
 //clé API obtenue sur le site geoportail après la création d'un compte et d'une demande de clé

function randomInt(mini, maxi)
{
	var nb = mini + (maxi+1-mini)*Math.random();
	return Math.floor(nb);  // return max nb
}
//Cette fonction permet de donner une entier aléatoire entre deux entiers donnés




var rowbegin = randomInt(500,1000);
//on cherche une tuile aléatoire (ligne et colonne) sur le service WMTS
//du géoportail. Les bornes ont été trouvé grace à une requête GetFeatures 
//que l'on à decouvert en cours de web avancé avec Thibaud Couppin
var colbegin = randomInt(500,1000); 


// niveau de zoom choisi subjectivement 
var zoom =10;


function generateURL(r,c)
{
	
var zoom = 10 ;
	liens =  'http://wxs.ign.fr/'+'in5wghdufn0gn8d7g0394dsg'+'/geoportail/wmts?';
	liens += 'service=WMTS';
	liens += '&request=GetTile';
	liens += '&version=1.0.0'
	liens += '&layer=GEOGRAPHICALGRIDSYSTEMS.MAPS';
	liens += '&style=normal';
	liens += '&format=image/jpeg';
	liens += '&TileMatrixSet=PM';
	liens += '&TileMatrix='+zoom;
	liens += '&TileRow='+row;
	liens += '&TileCol='+col;
	console.log(liens);
	return liens;

}
// cette fonction permet de créer la requete vers le geoportail en utilisant les entiers aléatoires générés 


URL =  generateURL(rowbegin,colbegin);
//adresse crée pour recuperer l'image
console.log(URL);

// création de l'image à partir de l'url générer
function creer_img(URL){
var img = document.createElement("img");
img.setAttribute("height", "256");
img.setAttribute("width", "256");
img.setAttribute("src", URL);
//Les tuiles du service WMTS du geoportail sont toujours des images carrées de dimension 256 pixels
return img
}

//on crée l'objet image liée à l'url générée précédement
img1 = creer_img(URL);
console.log(img1);
/*

function dessine_case(img,n,x,y){
	canvas = document.getElementById('canvas');
	context = canvas.getContext('2d');
	canvas.innerHTML = img1;	
	
	col_f=n%4;
	row_f=Math.floor((n-col_f)/4);
	context.drawImage(img,row_f*64,col_f*64,64,64,x,y,125,125);
}
*/
window.onload = function() {		
		
		var canvas = document.getElementById('canvas');	
		var context = canvas.getContext("2d");
		canvas.width=515;
		canvas.height=515;
		context.fillStyle = 'white';
		context.fillRect(0, 0, 515, 515);
		/*for (i = 0; i < 15; i++){		
			x = [i] ;
			y= [i]; 
			dessine_case(img1,16,x,y);
		};*/
		context.drawImage(img1, 0, 0);
		console.log('okok');
	}
console.log('okokok');