Différences

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

--- geo:carto_ri [2017/06/07 09:47] – jbpuel
+++ geo:carto_ri [2017/06/07 20:03] (Version actuelle) – jbpuel
@@ Ligne 1: / Ligne 1: @@
 ====== Carto RI ENSFEA ======
 <html>
 <head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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" />
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
-	<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
-<!-- Attention : normalement lien vers image.ensfea.fr mais en https
+     <!-- Attention : normalement lien vers image.ensfea.fr mais en https
-<link rel="stylesheet" href="http://image.ensfea.fr/opp/lib/leaflet/leaflet.css" />
+     <link rel="stylesheet" href="http://image.ensfea.fr/opp/lib/leaflet/leaflet.css" />
-<script src="http://image.ensfea.fr/opp/lib/leaflet/leaflet.js"></script>
+     <script src="http://image.ensfea.fr/opp/lib/leaflet/leaflet.js"></script>
--->
+     -->
 </head>
 <body>
   <div id="mapid" style="margin: 0 auto; width: 95%; height: 600px; box-shadow: 0 0 10px #999;"></div>
   <script>
-	var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+    var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {attribution: '<a href="https://wiki.ensfea.fr/doku.php?id=geo:credits_carto">Credits</a>'});
-		attribution: '<a href="https://wiki.ensfea.fr/doku.php?id=geo:credits_carto">Credits</a>'
-                });
-var Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
-	attribution: '<a href="https://wiki.ensfea.fr/doku.php?id=geo:credits_carto">Credits</a>'
-});
-var HERE_hybridDay = L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/{type}/{mapID}/hybrid.day/{z}/{x}/{y}/{size}/{format}?app_id={app_id}&app_code={app_code}&lg={language}', {
+  var HERE_hybridDay = L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/{type}/{mapID}/hybrid.day/{z}/{x}/{y}/{size}/{format}?app_id={app_id}&app_code={app_code}&lg={language}', {
 	attribution: '<a href="https://wiki.ensfea.fr/doku.php?id=geo:credits_carto">Credits</a>',
 	subdomains: '1234',
@@ Ligne 42: / Ligne 33: @@
 });
+<!--
+var Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {attribution: '<a href="https://wiki.ensfea.fr/doku.php?id=geo:credits_carto">Credits</a>'});
+-->
+  var url_carto = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoiamlib3VpbGxlIiwiYSI6ImNqMjgyc3phOTAwMmIzMm5zc3BhYWFxMXkifQ.K8NLVNDa8P8tROjrQ45mVg";
-  	var url_carto = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoiamlib3VpbGxlIiwiYSI6ImNqMjgyc3phOTAwMmIzMm5zc3BhYWFxMXkifQ.K8NLVNDa8P8tROjrQ45mVg";
+  var carto = new L.tileLayer(url_carto,
-	var carto = new L.tileLayer(url_carto,
 	{
 		maxZoom: 20,
@@ Ligne 52: / Ligne 45: @@
 	});
-	<!-- Gestion des spots -->
+  <!-- Gestion des spots -->
-		// var url_spots = "http://opp.jibouille.net/spot.php?spotName=Spot";
+  var greenIcon = new L.Icon({
-		var url_spots = "http://image.ensfea.fr/opp/spot.php?spotName=Spot";
+    iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
-		var coordo = [];
+    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
-		var nbspots=0;
+    iconSize: [25, 41],
-coordo.push(-36.8523378,174.76910729999997);
+    iconAnchor: [12, 41],
-coordo.push(31.90375409999999,34.80803149999997);
+    popupAnchor: [1, -34],
-coordo.push(50.598572,4.354998000000023);
+    shadowSize: [41, 41]
-coordo.push(50.5588327,4.685219599999982);
+  });
-coordo.push(60.20775740196886,24.870160818099976);
+  var coordo = [];
-coordo.push(62.889201,27.629466800000046);
+  var nbspots=0;
-coordo.push(37.98266660000001,23.70546020000006);
+  coordo.push(-36.8523378,174.76910729999997);
-coordo.push(40.656953,22.80383400000005);
+  coordo.push(31.90375409999999,34.80803149999997);
-coordo.push(53.345771,-6.279072700000029);
+  coordo.push(50.598572,4.354998000000023);
-coordo.push(52.137577,20.744332999999983);
+  coordo.push(50.5588327,4.685219599999982);
-coordo.push(41.7979921,-6.765417699999944);
+  coordo.push(60.20775740196886,24.870160818099976);
-coordo.push(51.5167711,-0.1308695999999827);
+  coordo.push(62.889201,27.629466800000046);
-coordo.push(51.4709286,-3.176788600000009);
+  coordo.push(37.98266660000001,23.70546020000006);
-coordo.push(45.7771896,14.217396300000019);
+  coordo.push(40.656953,22.80383400000005);
-coordo.push(50.8494596,4.460360000000037);
+  coordo.push(53.345771,-6.279072700000029);
-coordo.push(46.0275786,16.551121500000022);
+  coordo.push(52.137577,20.744332999999983);
-coordo.push(61.50321679999999,23.80883940000001);
+  coordo.push(41.7979921,-6.765417699999944);
-coordo.push(50.130001,14.373442999999952);
+  coordo.push(51.5167711,-0.1308695999999827);
-coordo.push(48.22927300000001,16.358947100000023);
+  coordo.push(51.4709286,-3.176788600000009);
-coordo.push(50.30767,5.098283000000038);
+  coordo.push(45.7771896,14.217396300000019);
+  coordo.push(50.8494596,4.460360000000037);
+  coordo.push(46.0275786,16.551121500000022);
-                nbspots = 20;
+  coordo.push(61.50321679999999,23.80883940000001);
-                var spots = new L.layerGroup();
+  coordo.push(50.130001,14.373442999999952);
+  coordo.push(48.22927300000001,16.358947100000023);
+  coordo.push(50.30767,5.098283000000038);
+  nbspots = 20;
+  var spots = new L.layerGroup();
-		sp=1;
+  sp=1;
-                var url_ri = "https://www.auckland.ac.nz/en.html";
+  var url_ri = "https://www.auckland.ac.nz/en.html";
-		L.marker({[coordo[2*sp-2] , coordo[2*sp-1]]}, {color: 'red'}).bindPopup("<b>Université d'Auckland</b><br />UMR EFTS<br />Thème : <br /><a href=" + url_ri + ">Lien</a>").addTo(spots);
+  L.marker([coordo[2*sp-2] , coordo[2*sp-1]], {icon: greenIcon}).bindPopup("<b>Université d'Auckland</b><br />UMR EFTS<br />Thème : <br /><a href=" + url_ri + ">Lien</a>").addTo(spots);
-	        sp=2;
+  sp=2;
-                url_ri = "https://www.weizmann.ac.il/pages/";
+  url_ri = "https://www.weizmann.ac.il/pages/";
-		L.marker([coordo[2*sp-2] , coordo[2*sp-1]]).bindPopup("<b>Institut Weizmann</b><br />UMR EFTS<br />Thème : <br /><a href=" + url_ri + ">Lien</a>").addTo(spots);
+  L.marker([coordo[2*sp-2] , coordo[2*sp-1]]).bindPopup("<b>Institut Weizmann</b><br />UMR EFTS<br />Thème : <br /><a href=" + url_ri + ">Lien</a>").addTo(spots);
-                sp=3;
+  sp=3;
-                url_ri = "http://www.crossfitnivelles.be/";
+  url_ri = "http://www.crossfitnivelles.be/";
-		L.marker([coordo[2*sp-2] , coordo[2*sp-1]]).bindPopup("<b>Crossfit Nivelles</b><br />Service RI<br />Thème : <br /><a href=" + url_ri + ">Lien</a>").addTo(spots);
+  L.marker([coordo[2*sp-2] , coordo[2*sp-1]]).bindPopup("<b>Crossfit Nivelles</b><br />Service RI<br />Thème : <br /><a href=" + url_ri + ">Lien</a>").addTo(spots);
-                sp=4;
+  sp=4;
-                url_ri = "http://www.hech.be/fr/isia-gembloux";
+  url_ri = "http://www.hech.be/fr/isia-gembloux";
-		L.marker([coordo[2*sp-2] , coordo[2*sp-1]]).bindPopup("<b>Institut supérieur Industriel agronomique ISIA-Huy-Gembloux</b><br />Service RI<br />Thème : <br /><a href=" + url_ri + ">Lien</a>").addTo(spots);
+  L.marker([coordo[2*sp-2] , coordo[2*sp-1]]).bindPopup("<b>Institut supérieur Industriel agronomique ISIA-Huy-Gembloux</b><br />Service RI<br />Thème : <br /><a href=" + url_ri + ">Lien</a>").addTo(spots);
                 sp=5;
@@ Ligne 162: / Ligne 159: @@
 		L.marker([coordo[2*sp-2] , coordo[2*sp-1]]).bindPopup("<b>Association Wallone de l'élevage</b><br />Service RI<br />Thème : <br /><a href=" + url_ri + ">Lien</a>").addTo(spots);
-		var overlayMaps = {
+  var overlayMaps = {
-			"Spots": spots
+    "Spots": spots
-		};
+  };
-		<!-- Gestion des cartes de base -->
-		var baseMaps = {
+  <!-- Gestion des cartes de base -->
-			"Raster": Esri_WorldImagery,
+  var baseMaps = {
-                        "Mixte": HERE_hybridDay,
+  // "Raster": Esri_WorldImagery,
-			"Topo": Esri_WorldTopoMap,
+  "Mixte": HERE_hybridDay,
-			"Carto": carto
+  // "Topo": Esri_WorldTopoMap,
-		};
+  "Carto": carto
+  };
+  var mymap = L.map('mapid',
+  {
+    center: [30.0,30],
+    zoom: 2,
+    layers: [carto,Esri_WorldTopoMap,Esri_WorldImagery]
+  });
+  mymap.addLayer(spots);
-		var mymap = L.map('mapid',
+  L.control.layers(baseMaps, overlayMaps).addTo(mymap);
-		{
+  L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(mymap);
-		center: [30.0,30],
+</script>
-		zoom: 2,
-		layers: [carto,Esri_WorldTopoMap,Esri_WorldImagery]
-		});
-		mymap.addLayer(spots);
-                <!-- En 2 fois pour que les 2 soient cochées par défaut -->
-		L.control.layers(baseMaps, overlayMaps).addTo(mymap);
-		L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(mymap);
-	</script>
 </body>
 </html>