Proj4js.defs["EPSG:3857"] = "+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
               
      function init() { 
      	
      	map = new OpenLayers.Map("basicMap", {
          		projection: "EPSG:3857",
          		displayProjection: new OpenLayers.Projection("EPSG:4326")
        	});
        	
	    var lat = 48.3771;
  		var lon = 2.5184; 
    
    	var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection 
        var position       = new OpenLayers.LonLat(lon,lat).transform( fromProjection, toProjection);
        var zoom           = 15 ;   
            
        var ghyb = new OpenLayers.Layer.Google( "Google Hybride",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20} ); 
   	
		var options = {
        name: "Cartes IGN",
        url: "http://gpp3-wxs.ign.fr/vodxhaso2buve3dfn33mqcqh/wmts",
        layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
        matrixSet: "PM",
        style: "normal",
        numZoomLevels: 19
    	};

    	var ign = new OpenLayers.Layer.WMTS(options); 
    	  	       
        map.addControl( new OpenLayers.Control.Graticule({ 
        	numPoints: 2, 
        	layerName:"Grille", 
        	labelled: true, 
        	
        		lineSymbolizer:{
 					strokeColor: "red",
					strokeWidth: 1,
					strokeOpacity: 0.5
					},
				labelSymbolizer: {
					fontColor: "white",
					fontSize: 10
					}
			  } ) );
			  
			  
			    // --- Ajout d'un marqueur Position depart circuit pour exemple -------   

		Scale = new OpenLayers.Style({
    	externalGraphic: '../img/marker.png',
    	graphicHeight: "${H}",
    	graphicWidth: "${W}"
    	},
    	{ context: { 
    		H: function() { return 27;},
    		W: function() { return 20;}    	
    		} }    	
		);
		
 
       var depart = new OpenLayers.Layer.Vector("Depart", {
       styleMap: new OpenLayers.StyleMap(Scale) }
            );
       var feature = new OpenLayers.Feature.Vector(
       new OpenLayers.Geometry.Point(lon,lat).transform(
       new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
       new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
            	),
       {some:'data'}
            );
       depart.addFeatures(feature); 
       
       // --- Ajout d'une trace pour exemple -------   
            
     
				             
        map.addLayer(ign);             
    	map.addLayer(ghyb); 
    	
    	map.addLayer(depart);
    	            
        map.setCenter(position, zoom ); 
        map.addControl(new OpenLayers.Control.ScaleLine());
        map.addControl(new OpenLayers.Control.LayerSwitcher()); 	//controle des couches
        

   //----affichage de la position souris dans la carte sur les couches------------------------
     
        //map.addControl (new OpenLayers.Control.MousePosition({ div: document.getElementById("position_souris") }));
        
		map.addControl(new OpenLayers.Control.MousePosition({formatOutput: formatLonlats}));  
        
         function formatLonlats(lonLat) {
            var lat = lonLat.lat;
            var long = lonLat.lon;
            var ns = OpenLayers.Util.getFormattedLonLat(lat);
            var ew = OpenLayers.Util.getFormattedLonLat(long,'lon');
            return ns + ', ' + ew + ' (' + (Math.round(lat * 10000) / 10000) + ', ' + (Math.round(long * 10000) / 10000) + ')'; }    
        
             
   //----Mesures------------------------
  
  
            var sketchSymbolizers = {
                "Point": {
                    pointRadius: 4,
                    graphicName: "square",
                    fillColor: "red",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Line": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    strokeDashstyle: "dash"
                },
                "Polygon": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    fillColor: "orange",
                    fillOpacity: 0.3
                }
            };
            var style = new OpenLayers.Style();
            style.addRules([
                new OpenLayers.Rule({symbolizer: sketchSymbolizers})
            ]);
            
            var styleMap = new OpenLayers.StyleMap({"default": style});
            
            measureControls = {
                line: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Path, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                ),
                polygon: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Polygon, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                )
            };
            
            var control;
            for(var key in measureControls) {
                control = measureControls[key];
                control.events.on({
                    "measure": handleMeasurements,
                    "measurepartial": handleMeasurements
                });
                map.addControl(control);
            }
            
            document.getElementById('noneToggle').checked = true;
        }
        
        function handleMeasurements(event) {
            var geometry = event.geometry;
            var units = event.units;
            var order = event.order;
            var measure = event.measure;
            var element = document.getElementById('output');
            var out = "";
            if(order == 1) {
                out += "Mesure: " + measure.toFixed(3) + " " + units;
            } else {
                out += "Mesure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
            }
            element.innerHTML = out;
        }

        function toggleControl(element) {
            for(key in measureControls) {
                var control = measureControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
         
        function toggleImmediate(element) {
            for(key in measureControls) {
                var control = measureControls[key];
                control.setImmediate(element.checked);
            }
        }