Différences

Ci-dessous, les différences entre deux révisions de la page.

--- asc:rando [2017/01/12 22:12] – jbpuel
+++ asc:rando [2017/01/16 16:01] – jbpuel
@@ Ligne 4: / Ligne 4: @@
 Une bonne source d'informations sur le site de la communauté de communes, le [[http://www.sicoval.fr/fr/sortir/promenades-et-randonnees.html|Sicoval]].
-Carte des environs de l'ENSFEA. Pour obtenir les coordonnées d'un point, cliquer sur la carte.
 <html>
 <head>
-	<title>Test carto</title>
+	<title>Test carto IGN</title>
 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
+	<!-- Library Leaflet -->
-	<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
+	<link rel="stylesheet" href="leaflet/leaflet.css" />
-	<script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script> <!-- Script pour calque IGN -->
+	<script src="cleaflet/leaflet.js"></script>
-</head>
+	<!-- Extension Géoportail pour Leaflet -->
+	<script src="ign/GpPluginLeaflet.js"></script>
+	<link rel="stylesheet" href="ign/GpPluginLeaflet.css" />
+</head>
 <body>
-	<div id="mapid" style="margin: 0 auto; width: 800px; height: 500px;"></div>  <!-- div de la carte, centré -->
+	<div id="map" style="margin: 0 auto; width: 80%; height: 500px; box-shadow: 0 0 10px #999;"></div>
+	<div id="info" style="padding: 5px; width: 80%; height: 20px; font-family: monospace;"></div>
 	<script>
-		var ignKey = "creg33c72cmsdz555il0jl57";
+	function go() {
-<!--		var layerIGNScanStd = "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD"; -->
+    map = L.map("map").setView([48.845, 2.424], 10);
-		var layerIGNScanStd = "ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO";
+    var lyr = L.geoportalLayer.WMTS({
-		var url_ign = "http://wxs.ign.fr/" + ignKey + "/geoportail/wmts";
+        // layer: "ORTHOIMAGERY.ORTHOPHOTOS",
-		var ign = new L.TileLayer.WMTS(url_ign,
+        layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
-		{
+    }, { // leafletParams
-		layer: layerIGNScanStd,
+        opacity: 0.8
-		style: "normal",
+    });
-		tilematrixSet: "PM",
+    lyr.addTo(map); // ou map.addLayer(lyr);
-		format: "image/jpeg",
+	}
-		attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>&copy; <a href='http://www.ign.fr'>IGN</a>"
-		});
-		var url_carto = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw";
+	Gp.Services.getConfig({
-		var carto = new L.tileLayer(url_carto,
+    	// apiKey : "jhyvi0fgmnuxvfv0zjzorvdn",
-		{
+    	apiKey : "creg33c72cmsdz555il0jl57",
-		maxZoom: 18,
+    	onSuccess : go
-		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+	}) ;
-		'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
-		'Imagery © <a href="http://mapbox.com">Mapbox</a>',
-		id: 'mapbox.streets'
-		});
-<!-- Gestion des spots -->
-		var url_spot1 = "http://wiki.ensfea.fr/";
-		var spots = new L.layerGroup();
-		L.marker([43.534227 , 1.488545]).bindPopup("<b>Point de vue N°1</b><br /><a href=" + url_spot1 + ">Lien</a>").addTo(spots);
-		L.marker([43.534227 , 1.487845]).bindPopup("<b>Point de vue N°2</b><br /><a href=" + url_spot1 + ">Lien</a>").addTo(spots);
-		var overlayMaps = {
-			"POI": spots
-		};
-<!-- Gestion des cartes de base -->
-		var baseMaps = {
-			"IGN": ign,
-			"Carto": carto
-		};
-		var mymap = L.map('mapid',
+	var infoDiv= document.getElementById("info") ;
-		{
+	infoDiv.innerHTML= "<p> Extension Leaflet version "+Gp.leafletExtVersion+" ("+Gp.leafletExtDate+") - Leaflet version : "+ L.version +"</p>" ;
-		center: [43.5352, 1.4876],
+	 </script>
-		zoom: 15,
-		layers: [carto, ign]
-		});
-		L.control.layers(baseMaps, overlayMaps).addTo(mymap);
-		L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(mymap);
-	</script>
 </body>
 </html>