Différences

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

--- asc:rando [2017/01/08 16:08] – jbpuel
+++ asc:rando [2017/01/16 16:01] – jbpuel
@@ Ligne 3: / Ligne 3: @@
 De nombreuses rando, à pied ou à VTT sont possibles aux alentours d'Auzeville.
-Une bonne source d'informations sur le site de la communauté de communes, le [[http://www.sicoval.fr/fr/sortir/partir-a-la-decouverte/promenades-et-randonnees.html|Sicoval]].
+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>
-   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
+	<title>Test carto IGN</title>
-   <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-</head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<body>
+	<!-- Library Leaflet -->
-<center>
+	<link rel="stylesheet" href="leaflet/leaflet.css" />
-<div id="mapid" style="width: 800px; height: 500px;"></div>
+	<script src="cleaflet/leaflet.js"></script>
-<!-- 43.5352, 1.4876 -->
+	<!-- Extension Géoportail pour Leaflet -->
-<script>
+	<script src="ign/GpPluginLeaflet.js"></script>
-   var mymap = L.map('mapid').setView([43.5352, 1.4876], 15);
+	<link rel="stylesheet" href="ign/GpPluginLeaflet.css" />
-   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
+</head>
-		maxZoom: 18,
-		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'
-	}).addTo(mymap);
-   <!-- L.marker([43.5352, 1.4876]).addTo(mymap).bindPopup("<b>Salut !</b><br />Je suis un arbre.").openPopup(); -->
-   L.marker([43.534227 , 1.488545]).addTo(mymap).bindPopup("<b>Salut !</b><br />Je suis le gymnase.");
-   L.circle([43.534864, 1.486942], 11, {
-      color: 'red',
-      fillColor: '#f03',
-      fillOpacity: 0.5
-      }).addTo(mymap).bindPopup("Je suis le cercle.");
-   L.polyline([
+<body>
-      [43.53529218508908, 1.4873224496841428],
+	<div id="map" style="margin: 0 auto; width: 80%; height: 500px; box-shadow: 0 0 10px #999;"></div>
-      [43.53562274375085, 1.4871078729629514],
+	<div id="info" style="padding: 5px; width: 80%; height: 20px; font-family: monospace;"></div>
-      [43.536470521211925, 1.4894628524780271],
-      [43.536050522858545, 1.4897525310516355],
+	<script>
-      [43.53731050914266, 1.4932984113693235],
+	function go() {
-      [43.5373766188072, 1.4937812089920044],
+    map = L.map("map").setView([48.845, 2.424], 10);
-      [43.53682440644249, 1.494027972221374],
+    var lyr = L.geoportalLayer.WMTS({
-      [43.5351560721723, 1.4951652288436883],
+        // layer: "ORTHOIMAGERY.ORTHOPHOTOS",
-      [43.53471661980089, 1.4953529834747314],
+        layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
-      [43.534537726767894, 1.4945107698440552],
+    }, { // leafletParams
-      [43.53443661307975, 1.494237184524536],
+        opacity: 0.8
-      [43.53425771921613, 1.4939421415328975],
+    });
-      [43.53418382811756, 1.4937597513198848],
+    lyr.addTo(map); // ou map.addLayer(lyr);
-      [43.53410215890335, 1.4933842420577998],
+	}
-      [43.53327379348022, 1.4935773611068721],
-      [43.533013225478214, 1.4936739206314085]
-      ]).addTo(mymap).bindPopup("Aller au Bois Joli.");
+	Gp.Services.getConfig({
+    	// apiKey : "jhyvi0fgmnuxvfv0zjzorvdn",
+    	apiKey : "creg33c72cmsdz555il0jl57",
+    	onSuccess : go
+	}) ;
-   var popup = L.popup();
+	var infoDiv= document.getElementById("info") ;
-   function onMapClick(e) {
+	infoDiv.innerHTML= "<p> Extension Leaflet version "+Gp.leafletExtVersion+" ("+Gp.leafletExtDate+") - Leaflet version : "+ L.version +"</p>" ;
-		popup
+	 </script>
-			.setLatLng(e.latlng)
-			.setContent("Coordonnées : " + e.latlng.toString())
-			.openOn(mymap);
-	}
-   mymap.on('click', onMapClick);
-</script>
-</center>
 </body>
 </html>