Subversion Repositories eFlore/Applications.cel

Rev

Rev 573 | Rev 837 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 573 Rev 836
Line 20... Line 20...
20 
		<!-- Favicones -->
 20 
		<!-- Favicones -->
21 
		<link rel="icon" type="image/png" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.png" />
 21 
		<link rel="icon" type="image/png" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.png" />
22 
		<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.ico" />
 22 
		<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.ico" />
Line 23... Line 23...
23
23
- 
 
 24 
		<!-- Javascript : bibliothèques -->
24 
		<!-- Javascript : bibliothèques -->
 25 
		<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
25 
		<!-- 	Google Map v3 -->
 26 
		<!-- 	Google Map v3 -->
26 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=true"></script>
 27 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=true&amp;language=fr&amp;region=FR"></script>
27 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/google/map/3/markerclusterer/1.0/markerclusterer-1.0.pack.js"></script>
 28 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/google/map/3/markerclusterer/1.0/markerclusterer-1.0.pack.js"></script>
28 
		<!-- 	Jquery -->
 29 
		<!-- 	Jquery -->
29 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/<?=$jquery_version?>/jquery-<?=$jquery_version?>.min.js"></script>
 30 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"></script>
30 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/tablesorter/2.0.5/jquery.tablesorter.min.js"></script>
 31 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/tablesorter/2.0.5/jquery.tablesorter.min.js"></script>
Line 31... Line 32...
31 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
 32 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
32
33
Line 33... Line 34...
33 
		<!-- Javascript : données -->
 34 
		<!-- Javascript : données -->
34 
		<script src="<?=$url_json?>" type="text/javascript"></script>
 35 
		<script src="<?=$url_json?>" type="text/javascript"></script>
35
36
36 
		<!-- Javascript : appli carto -->
 - 
 
37 
		<script type="text/javascript">
 37 
		<!-- Javascript : appli carto -->
38 
		//<![CDATA[
 - 
 
39 
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
 - 
 
40 
			var pointsOrigine = null;
 - 
 
41 
			var boundsOrigine = null;
 38 
		<script type="text/javascript">
42 
			var markerClusterer = null;
 - 
 
43 
			var map = null;
 39 
		//<![CDATA[
44 
			var nt = '<?=$num_taxon?>';
 - 
 
45
- 
 
46 
			var infoBulle = new google.maps.InfoWindow();
 40 
			var urlsLimitesCommunales = <?=$url_limites_communales?>;
47 
			google.maps.event.addListener(infoBulle, 'domready', function() {
 - 
 
48 
				// Onglet Tableau : Jquery => TableSorter
 - 
 
49 
				if ($("#observations table").get() != '') {
 - 
 
50 
					// add parser through the tablesorter addParser method
- 
 
51 
					$.tablesorter.addParser({
- 
 
52 
						// Définition d'un id unique pour ce parsseur
- 
 
53 
						id: 'date_cel',
- 
 
54 
						is: function(s) {
- 
 
55 
							// retourne false si le parsseur n'est pas autodétecté
- 
 
56 
							return false;
- 
 
57 
						},
- 
 
58 
						format: function(s) {
- 
 
59 
							// Transformation date jj/mm/aaaa en aaaa/mm/jj
 - 
 
60 
							s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
 - 
 
61 
							// Remplace la date par un nombre de millisecondes pour trier numériquement
 - 
 
62 
							return $.tablesorter.formatFloat(new Date(s).getTime());
 - 
 
63 
						},
- 
 
64 
						// set type, either numeric or text
- 
 
65 
						type: 'numeric'
- 
 
66 
					});
 - 
 
67 
					$("#observations table").tablesorter({
- 
 
68 
			            headers: {
- 
 
69 
			                1: {
- 
 
70 
			                    sorter:'date_cel'
- 
 
71 
			                }
- 
 
72 
			            }
- 
 
73 
			        });
 - 
 
74 
				}
 - 
 
75 
				// Onglet Liste : Jquery => FancyBox
 - 
 
76 
				if ($("#observations ol").get() != '') {
 - 
 
77 
					$("a.cel-img").fancybox({
 - 
 
78 
						transitionIn : 'elastic',
 - 
 
79 
						transitionOut : 'elastic',
 - 
 
80 
						speedIn	 : 600,
- 
 
81 
						speedOut : 200,
- 
 
82 
						overlayShow : true
 - 
 
83 
					}).bind('click', function(e) {
 - 
 
84 
						if (e.stopPropagation) {
 - 
 
85 
							e.stopPropagation();
 - 
 
86 
						}
 - 
 
87 
						return false;
 - 
 
88 
					});
 - 
 
89 
				}
 - 
 
90 
			});
 - 
 
91 
			google.maps.event.addListener(infoBulle, 'closeclick', function() {
 - 
 
92 
				map.panTo(pointClique.position);
 - 
 
93 
			});
 - 
 
94
- 
 
95 
			var pointClique = null;
 41 
			var nt = '<?=$num_taxon?>';
96
- 
 
97 
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
 - 
 
98 
			var carteOptions = {
 - 
 
99 
				zoom: 6,
 - 
 
100 
				mapTypeId: google.maps.MapTypeId.ROADMAP,
 - 
 
101 
				mapTypeControlOptions: {
 - 
 
102 
			        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
 - 
 
103 
			};
 - 
 
104 
			var ctaLayer = null;
 - 
 
105
- 
 
106 
			function refreshMap() {
 - 
 
107 
				var points = [];
 - 
 
108 
				var bounds = new google.maps.LatLngBounds();
 - 
 
109 
				for (var i = 0; i < obs.nombre; ++i) {
 - 
 
110 
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
 - 
 
111 
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
 - 
 
112 
					var point = new google.maps.Marker({
 - 
 
113 
						position: maLatLng,
 - 
 
114 
						map: map,
 - 
 
115 
						icon: pointImage,
 - 
 
116 
						stationId: obs.points[i].id
 - 
 
117 
					});
 - 
 
118 
 
 - 
 
119 
					bounds.extend(maLatLng);
 - 
 
120
- 
 
121 
					google.maps.event.addListener(point, 'click', function() {
 - 
 
122 
						pointClique =  this;
 - 
 
123
- 
 
124 
						infoBulle.open(map, this);
 - 
 
125
- 
 
126 
						var limites = map.getBounds();
 - 
 
127 
						var centre = limites.getCenter();
 - 
 
128 
						var nordEst = limites.getNorthEast();
 - 
 
129 
						var centreSudLatLng = new google.maps.LatLng(nordEst.lat(), centre.lng());
 - 
 
130 
						map.panTo(centreSudLatLng);
 - 
 
131
- 
 
132 
						afficherMsgChargement();
 - 
 
133 
						chargerFormatObs(this.stationId, '*');
 - 
 
134 
					});
 - 
 
135
- 
 
136 
					points.push(point);
 - 
 
137 
				}
 - 
 
138 
 
 - 
 
139 
				if (pointsOrigine == null && boundsOrigine == null) {
 - 
 
140 
					pointsOrigine = points;
 - 
 
141 
					boundsOrigine = bounds;
 - 
 
142 
				}
 - 
 
143
- 
 
144 
				executerMarkerClusterer(points, bounds);
 - 
 
145 
			}
 - 
 
146 
 
 - 
 
147 
			function executerMarkerClusterer(points, bounds) {
 - 
 
148 
				if (markerClusterer) {
 - 
 
149 
					markerClusterer.clearMarkers();
 - 
 
150 
				}
 - 
 
151 
				markerClusterer = new MarkerClusterer(map, points);
 - 
 
152 
				map.fitBounds(bounds);
 - 
 
153 
			}
 - 
 
154 
 
 - 
 
155 
			function afficherMsgChargement() {
 - 
 
156 
				var chargement = document.getElementById('chargement').cloneNode(true);
 - 
 
157 
				chargement.setAttribute('id', 'chargement-copie');
 - 
 
158 
				infoBulle.setContent(chargement);
 - 
 
159 
			}
 - 
 
160 
 
 42 
			var plantesNbre = <?=count($taxons)?>;
161 
			function chargerFormatObs(stationId, format) {
 43 
			var urlObsStation = '<?=$url_base?>carto'+'?'+
162 
				var url = '<?=$url_base?>carto?carte=observations'+
 44 
				'carte=observations'+'&'+
163 
					'&utilisateur=<?=$utilisateur?>'+
 45 
				'utilisateur=<?=$utilisateur?>'+'&'+
164 
					'&projet=<?=$projet?>'+
 - 
 
165 
					'&num_taxon='+nt+
 - 
 
166 
					'&dept=<?=$dept?>'+
 - 
 
167 
					'&format='+format+'&station='+stationId;
 - 
 
168 
				$.get(url, function(observations){
 - 
 
169 
					infoBulle.setContent(observations);
 - 
 
170 
				});
 - 
 
171 
			}
 - 
 
172 
 
 - 
 
173 
			function arreter(event) {
 - 
 
174 
				if (event.stopPropagation) {
 - 
 
175 
					event.stopPropagation();
 - 
 
176 
				}
 - 
 
177 
				return false;
 - 
 
178 
			}
 - 
 
179
- 
 
180 
			function afficher() {
 - 
 
181 
				document.getElementById('panneau-lateral').style.width = '300px';
 - 
 
182 
				document.getElementById('pl-contenu').style.display = 'block';
 46 
				'projet=<?=$projet?>'+'&'+
183 
				document.getElementById('pl-ouverture').style.display = 'none';
 - 
 
184 
				document.getElementById('pl-fermeture').style.display = 'block';
 - 
 
185 
				document.getElementById('carte').style.left = '300px';
 - 
 
186 
				google.maps.event.trigger(map, 'resize');
 - 
 
187 
			};
 - 
 
188
- 
 
189 
			function cacher() {
 - 
 
190 
				document.getElementById('panneau-lateral').style.width = '24px';
 - 
 
191 
				document.getElementById('pl-contenu').style.display = 'none';
 - 
 
192 
				document.getElementById('pl-ouverture').style.display = 'block';
 - 
 
193 
				document.getElementById('pl-fermeture').style.display = 'none';
 - 
 
194 
				document.getElementById('carte').style.left = '24px';
 - 
 
195 
				google.maps.event.trigger(map, 'resize');
 - 
 
196 
			};
 - 
 
197 
 
 - 
 
198 
			function ouvrirPopUp(url, nom) {
 - 
 
199 
				window.open(url, nom, 'scrollbars=yes,width=650,height=600,directories=no,location=no,menubar=no,status=no,toolbar=no');
 - 
 
200 
			};
 - 
 
201
- 
 
202 
			function filtrerParTaxon(ntAFiltrer) {
 47 
				'num_taxon='+nt+'&'+
203 
				infoBulle.close();
 - 
 
204 
				$('#taxon-'+nt).removeClass('taxon-actif');
 - 
 
205 
				if (nt == ntAFiltrer) {
 - 
 
206 
					nt = '*';
 - 
 
207 
					executerMarkerClusterer(pointsOrigine, boundsOrigine);
 - 
 
208 
				} else {
 48 
				'dept=<?=$dept?>';
209 
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
 49 
			var urlObsCarte = '<?=$url_cel_carto?>/carte-defaut-json'+'?'+
210 
					$.getJSON(url, function (observations) {
 - 
 
211 
						obs = observations;
 - 
 
212 
						nt = ntAFiltrer;
 - 
 
213 
						$('#taxon-'+nt).addClass('taxon-actif');
 - 
 
214 
						refreshMap();
 - 
 
215 
					});
 - 
 
216 
				}
 - 
 
217 
			};
 - 
 
218
- 
 
219 
			function initialize() {
 - 
 
220 
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
 - 
 
221 
 
 - 
 
222 
				// Ajout des limites communales sur la carte
 - 
 
223 
				<? if (isset($url_limites_communales)) : ?>
 - 
 
224 
					<? foreach ($url_limites_communales as $url) : ?>
 - 
 
225 
						ctaLayer = new google.maps.KmlLayer('<?=$url?>', {preserveViewport: true});
 - 
 
226 
						ctaLayer.setMap(map);
 - 
 
227 
					<? endforeach ?>
 - 
 
228 
				<? endif ?>
 - 
 
229
- 
 
230 
				<? if ($num_taxon == '*') : ?>
 - 
 
231 
				var ouvertureDiv = document.getElementById('pl-ouverture');
 - 
 
232 
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
 - 
 
233 
 
 - 
 
234 
				var fermetureDiv = document.getElementById('pl-fermeture');
 - 
 
235 
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
 - 
 
236 
				<? endif ?>
 - 
 
237
- 
 
238 
				refreshMap();
 - 
 
239 
			}
 - 
 
240
- 
 
241 
			// Déclenchement d'actions pour JQuery
 - 
 
242 
			$(document).ready(function() {
 - 
 
243 
				// Ajout du nombre de communes où des observations ont eu lieu
 50 
				'utilisateur=<?=$utilisateur?>'+'&'+
244 
				$('#commune-nbre').append(obs.nombre);
 51 
				'projet=<?=$projet?>'+'&'+
- 
 
 52 
				'dept=<?=$dept?>';
Line 245... Line 53...
245 
			});
 53 
		//]]>
246 
		//]]>
 54 
		</script>
247 
		</script>
 55 
		<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/scripts/carto.js"></script>
248
- 
 
249 
		<!-- CSS -->
 - 
 
250 
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
 - 
 
251 
		<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 - 
 
252
- 
 
253 
		<!--[if lt IE 7]>
 - 
 
254 
			<style type="text/css">
 - 
 
255 
				#carte {
 - 
 
256 
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
 - 
 
257 
					width:expression(document.body.clientWidth-24); /* 200+20+20+20=260 */
 - 
 
258 
				}
 - 
 
259 
				#panneau-lateral {
 - 
 
260 
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
 - 
 
261 
				}
 - 
 
262 
			</style>
 - 
 
263 
		<![endif]-->
 - 
 
264
- 
 
265 
		<? if ($num_taxon != '*') : ?>
 - 
 
266 
		<style type="text/css">
 - 
 
267 
			#carte {
 - 
 
268 
				left:0;
 - 
 
269 
			}
 - 
 
270 
		</style>
 - 
 
271 
		<? endif ?>
 - 
 
272
- 
 
273 
		<!-- Stats : Google Analytics -->
 - 
 
274 
		<script type="text/javascript">
 - 
 
275 
			//<![CDATA[
 - 
 
276 
			var _gaq = _gaq || [];
 - 
 
277 
			_gaq.push(['_setAccount', 'UA-20092557-1']);
 - 
 
278 
			_gaq.push(['_trackPageview']);
 - 
 
279
- 
 
280 
			(function() {
 - 
 
281 
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 - 
 
282 
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 - 
 
283 
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 56
Line 284... Line 57...
284 
			})();
 57 
		<!-- CSS -->
285 
			//]]>
 58 
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
286 
		</script>
 59 
		<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
287 
	</head>
 60 
	</head>
- 
 
 61 
 
288 
 
 62 
	<body>
289 
	<body onload="initialize()">
 63 
		<div id="zone-titre">
290 
		<div id="zone-titre">
 64 
			<h1 id="carte-titre">
291 
			<h1 id="carte-titre">
 65 
				<span id="obs-nbre">&nbsp;</span> observations de
- 
 
 66 
				<span class="plantes-nbre">&nbsp;</span> plantes sur
292 
				<? if ($num_taxon == '*') : ?>
 67 
				<span id="commune-nbre">&nbsp;</span> communes
293 
				<span id="commune-nbre">&nbsp;</span> communes contenant des observations du <a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href); arreter(event); return false;">CEL</a> de <a href="http://www.tela-botanica.org/" onclick="window.open(this.href); arreter(event); return false;">Tela Botanica</a>
 68 
				<? if ($num_taxon != '*') : ?>
294 
				<? else : ?>
 69 
				pour <?=$taxon_nom?>
295 
				<span id="commune-nbre">&nbsp;</span> communes pour <?=$taxon_nom?> - <a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href); arreter(event); return false;">CEL</a> de <a href="http://www.tela-botanica.org/" onclick="window.open(this.href); arreter(event); return false;">Tela Botanica</a>
 70 
				<? endif ?>
296 
				<? endif ?>
 71 
				 - <a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href); arreter(event); return false;">CEL</a> (<a href="http://www.tela-botanica.org/" onclick="window.open(this.href); arreter(event); return false;">Tela Botanica</a>)
Line 306... Line 81...
306 
		<div id="panneau-lateral">
 81 
		<div id="panneau-lateral">
307 
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
 82 
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
308 
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
 83 
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
309 
			<div id="pl-contenu">
 84 
			<div id="pl-contenu">
310 
				<div id="pl-entete">
 85 
				<div id="pl-entete">
311 
					<h2>Filtre sur <?=count($taxons)?> plantes</h2>
86 
					<h2>Filtre sur <span class="plantes-nbre">&nbsp;</span> plantes</h2>
312 
					<p>
 87 
					<p>
313 
						Cliquez sur un nom de plante pour filtrer les observations sur la carte.<br />
88 
						Cliquez sur un nom de plante pour filtrer les observations sur la carte.<br />
314 
						Pour revenir à l'état initial, cliquez à nouveau sur le nom sélectionné.
 89 
						Pour revenir à l'état initial, cliquez à nouveau sur le nom sélectionné.
315 
					</p>
 90 
					</p>
316 
				</div>
 91 
				</div>
317 
				<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
 92 
				<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
318 
					<ol id="taxons">
 93 
					<ol id="taxons">
319 
					<? foreach ($taxons as $taxon) : ?>
 94 
					<? foreach ($taxons as $taxon) : ?>
320 
						<li id="taxon-<?=$taxon['nt']?>">
 95 
						<li id="taxon-<?=$taxon['nt']?>">
321 
							<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
 96 
							<span class="taxon" title="<?=$taxon['famille']?>">
322 
								<?=$taxon['nom']?>
97 
								<?=$taxon['nom']?> <span class="nt" title="Numéro taxonomique"><?=$taxon['nt']?></span>
323 
							</a>
 98 
							</span>
324 
						</li>
 99 
						</li>
325 
					<? endforeach; ?>
 100 
					<? endforeach; ?>
326 
					</ol>
 101 
					</ol>
327 
				</div>
 102 
				</div>
328 
			</div>
 103 
			</div>
Line 333... Line 108...
333 
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
 108 
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
334 
		<div id="chargement">
 109 
		<div id="chargement">
335 
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
 110 
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
336 
			<p>Chargement des observations en cours...</p>
 111 
			<p>Chargement des observations en cours...</p>
337 
		</div>
 112 
		</div>
- 
 
 113
- 
 
 114 
		<!-- Stats : Google Analytics -->
- 
 
 115 
		<script type="text/javascript">
- 
 
 116 
			//<![CDATA[
- 
 
 117 
			var _gaq = _gaq || [];
- 
 
 118 
			_gaq.push(['_setAccount', 'UA-20092557-1']);
- 
 
 119 
			_gaq.push(['_trackPageview']);
- 
 
 120
- 
 
 121 
			(function() {
- 
 
 122 
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- 
 
 123 
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- 
 
 124 
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- 
 
 125 
			})();
- 
 
 126 
			//]]>
- 
 
 127 
		</script>
338 
	</body>
 128 
	</body>
339 
</html>
 129 
</html>
340 

            130