Différences

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

--- asc:rando [2017/01/08 23:25] – 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>
-   <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" />
-   <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
+	<!-- Library Leaflet -->
-<body>
+	<link rel="stylesheet" href="leaflet/leaflet.css" />
-<center>
+	<script src="cleaflet/leaflet.js"></script>
-<div id="mapid" style="width: 800px; height: 500px;"></div>
+	<!-- Extension Géoportail pour Leaflet -->
-<script>
+	<script src="ign/GpPluginLeaflet.js"></script>
-   var ignKey = "creg33c72cmsdz555il0jl57";
+	<link rel="stylesheet" href="ign/GpPluginLeaflet.css" />
-   var layerIGNScanStd = "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD";
+</head>
-   var url = "http://wxs.ign.fr/" + ignKey + "/geoportail/wmts";
-   var ign = new L.TileLayer.WMTS( url ,
-   {
-   layer: layerIGNScanStd,
-   style: "normal",
-   tilematrixSet: "PM",
-   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 mymap = L.map('mapid').setView([43.5352, 1.4876], 15);
-   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
-		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.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(mapid);
-mapid.addLayer(ign);
-var baseLayers = {"Carte IGN" : ign};
-L.control.layers(baseLayers, {}).addTo(mapid);
-   L.marker([43.534227 , 1.488545]).addTo(mymap).bindPopup("<b>Salut !</b><br />Je suis le gymnase.");
+<body>
-   <!-- Pour ouverture par défaut ajouter .openPopup(); -->
+	<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>
-   L.circle([43.534864, 1.486942], 11, {
-      color: 'red',
+	<script>
-      fillColor: '#f03',
+	function go() {
-      fillOpacity: 0.5
+    map = L.map("map").setView([48.845, 2.424], 10);
-      }).addTo(mymap).bindPopup("Je suis le cercle.");
+    var lyr = L.geoportalLayer.WMTS({
+        // layer: "ORTHOIMAGERY.ORTHOPHOTOS",
+        layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
+    }, { // leafletParams
+        opacity: 0.8
+    });
+    lyr.addTo(map); // ou map.addLayer(lyr);
+	}
-   var trajetBoisJoli = [
+	Gp.Services.getConfig({
-      [43.53529218508908, 1.4873224496841428],
+    	// apiKey : "jhyvi0fgmnuxvfv0zjzorvdn",
-      [43.53562274375085, 1.4871078729629514],
+    	apiKey : "creg33c72cmsdz555il0jl57",
-      [43.536470521211925, 1.4894628524780271],
+    	onSuccess : go
-      [43.536050522858545, 1.4897525310516355],
+	}) ;
-      [43.53731050914266, 1.4932984113693235],
-      [43.5373766188072, 1.4937812089920044],
-      [43.53682440644249, 1.494027972221374],
-      [43.5351560721723, 1.4951652288436883],
-      [43.53471661980089, 1.4953529834747314],
-      [43.534537726767894, 1.4945107698440552],
-      [43.53443661307975, 1.494237184524536],
-      [43.53425771921613, 1.4939421415328975],
-      [43.53418382811756, 1.4937597513198848],
-      [43.53410215890335, 1.4933842420577998],
-      [43.53327379348022, 1.4935773611068721],
-      [43.533013225478214, 1.4936739206314085]
-      ];
-      L.polyline(trajetBoisJoli).addTo(mymap).bindPopup("Aller au Bois Joli.");
+	var infoDiv= document.getElementById("info") ;
+	infoDiv.innerHTML= "<p> Extension Leaflet version "+Gp.leafletExtVersion+" ("+Gp.leafletExtDate+") - Leaflet version : "+ L.version +"</p>" ;
+	 </script>
-   var popup = L.popup();
-   function onMapClick(e) {
-      popup
-      .setLatLng(e.latlng)
-      .setContent("Coordonnées : " + e.latlng.toString())
-      .openOn(mymap);
-      }
-   mymap.on('click', onMapClick);
-</script>
-</center>
 </body>
 </html>