Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
553 jpm 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
424 jpm 2
<html xmlns="http://www.w3.org/1999/xhtml">
3
	<head>
440 jpm 4
		<title>Observations publiques du CEL - Tela Botanica</title>
424 jpm 5
 
6
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
440 jpm 7
		<meta http-equiv="Content-style-type" content="text/css" />
8
		<meta http-equiv="Content-script-type" content="text/javascript" />
9
		<meta http-equiv="Content-language" content="fr" />
10
 
11
		<meta name="revisit-after" content="15 days" />
12
        <meta name="robots" content="index,follow" />
13
        <meta name="author" content="Delphine CAUQUIL, Jean-Pascal MILCENT" />
14
        <meta name="keywords" content="Tela Botanica, cartographie, CEL" />
15
        <meta name="description" content="Widget de cartographie des observations publiques de plantes saisies dans le Carnet en Ligne (CEL)" />
16
 
17
		<!-- Spécial mobile -->
424 jpm 18
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
521 jpm 19
 
440 jpm 20
		<!-- Favicones -->
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" />
424 jpm 23
 
440 jpm 24
		<!-- Javascript : bibliothèques -->
556 jpm 25
		<!-- 	Google Map v3 -->
521 jpm 26
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=true"></script>
556 jpm 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
		<!-- 	Jquery -->
469 jpm 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/tablesorter/2.0.5/jquery.tablesorter.min.js"></script>
547 jpm 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>
424 jpm 32
 
440 jpm 33
		<!-- Javascript : données -->
424 jpm 34
		<script src="<?=$url_json?>" type="text/javascript"></script>
440 jpm 35
 
36
		<!-- Javascript : appli carto -->
424 jpm 37
		<script type="text/javascript">
38
		//<![CDATA[
492 jpm 39
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
40
			var pointsOrigine = null;
501 jpm 41
			var boundsOrigine = null;
424 jpm 42
			var markerClusterer = null;
43
			var map = null;
491 jpm 44
			var nt = '<?=$num_taxon?>';
571 jpm 45
 
469 jpm 46
			var infoBulle = new google.maps.InfoWindow();
479 jpm 47
			google.maps.event.addListener(infoBulle, 'domready', function() {
553 jpm 48
				// Onglet Tableau : Jquery => TableSorter
49
				if ($("#observations table").get() != '') {
571 jpm 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
			        });
479 jpm 74
				}
553 jpm 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
				}
479 jpm 90
			});
573 jpm 91
			google.maps.event.addListener(infoBulle, 'closeclick', function() {
92
				map.panTo(pointClique.position);
93
			});
553 jpm 94
 
573 jpm 95
			var pointClique = null;
96
 
424 jpm 97
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
98
			var carteOptions = {
99
				zoom: 6,
515 jpm 100
				mapTypeId: google.maps.MapTypeId.ROADMAP,
101
				mapTypeControlOptions: {
102
			        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
424 jpm 103
			};
463 delphine 104
			var ctaLayer = null;
501 jpm 105
 
424 jpm 106
			function refreshMap() {
439 jpm 107
				var points = [];
501 jpm 108
				var bounds = new google.maps.LatLngBounds();
424 jpm 109
				for (var i = 0; i < obs.nombre; ++i) {
439 jpm 110
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
493 jpm 111
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
439 jpm 112
					var point = new google.maps.Marker({
113
						position: maLatLng,
435 jpm 114
						map: map,
439 jpm 115
						icon: pointImage,
469 jpm 116
						stationId: obs.points[i].id
424 jpm 117
					});
435 jpm 118
 
501 jpm 119
					bounds.extend(maLatLng);
120
 
439 jpm 121
					google.maps.event.addListener(point, 'click', function() {
573 jpm 122
						pointClique =  this;
123
 
124
						infoBulle.open(map, this);
125
 
571 jpm 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());
573 jpm 130
						map.panTo(centreSudLatLng);
571 jpm 131
 
469 jpm 132
						afficherMsgChargement();
479 jpm 133
						chargerFormatObs(this.stationId, '*');
435 jpm 134
					});
135
 
439 jpm 136
					points.push(point);
424 jpm 137
				}
138
 
501 jpm 139
				if (pointsOrigine == null && boundsOrigine == null) {
492 jpm 140
					pointsOrigine = points;
501 jpm 141
					boundsOrigine = bounds;
492 jpm 142
				}
143
 
501 jpm 144
				executerMarkerClusterer(points, bounds);
492 jpm 145
			}
146
 
501 jpm 147
			function executerMarkerClusterer(points, bounds) {
492 jpm 148
				if (markerClusterer) {
149
					markerClusterer.clearMarkers();
150
				}
439 jpm 151
				markerClusterer = new MarkerClusterer(map, points);
501 jpm 152
				map.fitBounds(bounds);
469 jpm 153
			}
463 delphine 154
 
469 jpm 155
			function afficherMsgChargement() {
156
				var chargement = document.getElementById('chargement').cloneNode(true);
157
				chargement.setAttribute('id', 'chargement-copie');
158
				infoBulle.setContent(chargement);
159
			}
463 delphine 160
 
469 jpm 161
			function chargerFormatObs(stationId, format) {
490 jpm 162
				var url = '<?=$url_base?>carto?carte=observations'+
163
					'&utilisateur=<?=$utilisateur?>'+
164
					'&projet=<?=$projet?>'+
491 jpm 165
					'&num_taxon='+nt+
490 jpm 166
					'&dept=<?=$dept?>'+
167
					'&format='+format+'&station='+stationId;
469 jpm 168
				$.get(url, function(observations){
169
					infoBulle.setContent(observations);
170
				});
424 jpm 171
			}
172
 
469 jpm 173
			function arreter(event) {
174
				if (event.stopPropagation) {
175
					event.stopPropagation();
176
				}
177
				return false;
178
			}
179
 
435 jpm 180
			function afficher() {
521 jpm 181
				document.getElementById('panneau-lateral').style.width = '300px';
182
				document.getElementById('pl-contenu').style.display = 'block';
435 jpm 183
				document.getElementById('pl-ouverture').style.display = 'none';
521 jpm 184
				document.getElementById('pl-fermeture').style.display = 'block';
185
				document.getElementById('carte').style.left = '300px';
435 jpm 186
				google.maps.event.trigger(map, 'resize');
187
			};
469 jpm 188
 
435 jpm 189
			function cacher() {
521 jpm 190
				document.getElementById('panneau-lateral').style.width = '24px';
191
				document.getElementById('pl-contenu').style.display = 'none';
435 jpm 192
				document.getElementById('pl-ouverture').style.display = 'block';
521 jpm 193
				document.getElementById('pl-fermeture').style.display = 'none';
194
				document.getElementById('carte').style.left = '24px';
435 jpm 195
				google.maps.event.trigger(map, 'resize');
196
			};
490 jpm 197
 
501 jpm 198
			function ouvrirPopUp(url, nom) {
569 jpm 199
				window.open(url, nom, 'scrollbars=yes,width=650,height=600,directories=no,location=no,menubar=no,status=no,toolbar=no');
501 jpm 200
			};
201
 
492 jpm 202
			function filtrerParTaxon(ntAFiltrer) {
507 jpm 203
				infoBulle.close();
492 jpm 204
				$('#taxon-'+nt).removeClass('taxon-actif');
205
				if (nt == ntAFiltrer) {
206
					nt = '*';
501 jpm 207
					executerMarkerClusterer(pointsOrigine, boundsOrigine);
492 jpm 208
				} else {
209
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
210
					$.getJSON(url, function (observations) {
211
						obs = observations;
212
						nt = ntAFiltrer;
213
						$('#taxon-'+nt).addClass('taxon-actif');
214
						refreshMap();
215
					});
216
				}
490 jpm 217
			};
435 jpm 218
 
424 jpm 219
			function initialize() {
220
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
463 delphine 221
 
222
				// Ajout des limites communales sur la carte
465 delphine 223
				<? if (isset($url_limites_communales)) : ?>
224
					<? foreach ($url_limites_communales as $url) : ?>
552 jpm 225
						ctaLayer = new google.maps.KmlLayer('<?=$url?>', {preserveViewport: true});
465 delphine 226
						ctaLayer.setMap(map);
569 jpm 227
					<? endforeach ?>
228
				<? endif ?>
435 jpm 229
 
559 jpm 230
				<? if ($num_taxon == '*') : ?>
435 jpm 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);
559 jpm 236
				<? endif ?>
544 jpm 237
 
424 jpm 238
				refreshMap();
239
			}
544 jpm 240
 
241
			// Déclenchement d'actions pour JQuery
242
			$(document).ready(function() {
243
				// Ajout du nombre de communes où des observations ont eu lieu
244
				$('#commune-nbre').append(obs.nombre);
245
			});
424 jpm 246
		//]]>
247
		</script>
440 jpm 248
 
249
		<!-- CSS -->
479 jpm 250
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
547 jpm 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" />
518 jpm 252
 
521 jpm 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
 
559 jpm 265
		<? if ($num_taxon != '*') : ?>
266
		<style type="text/css">
267
			#carte {
268
				left:0;
269
			}
270
		</style>
271
		<? endif ?>
272
 
518 jpm 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);
284
			})();
285
			//]]>
286
		</script>
424 jpm 287
	</head>
288
 
289
	<body onload="initialize()">
501 jpm 290
		<div id="zone-titre">
291
			<h1 id="carte-titre">
559 jpm 292
				<? if ($num_taxon == '*') : ?>
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>
294
				<? else : ?>
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>
296
				<? endif ?>
501 jpm 297
			</h1>
298
			<div id="zone-info">
299
				<a href="<?=$url_base?>carto?carte=avertissement" onClick="ouvrirPopUp('<?=$url_base?>carto?carte=avertissement', 'Avertissement'); arreter(event); return false;">
300
					<img src="<?=$url_base?>modules/carto/squelettes/images/information.png"
503 jpm 301
						alt="Avertissements" title="Avertissements &amp; informations" />
501 jpm 302
				</a>
303
			</div>
304
		</div>
559 jpm 305
		<? if ($num_taxon == '*') : ?>
435 jpm 306
		<div id="panneau-lateral">
492 jpm 307
			<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>
521 jpm 309
			<div id="pl-contenu">
310
				<div id="pl-entete">
559 jpm 311
					<h2>Filtre sur <?=count($taxons)?> plantes</h2>
521 jpm 312
					<p>
313
						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é.
315
					</p>
316
				</div>
317
				<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
318
					<ol id="taxons">
319
					<? foreach ($taxons as $taxon) : ?>
320
						<li id="taxon-<?=$taxon['nt']?>">
321
							<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
322
								<?=$taxon['nom']?>
323
							</a>
324
						</li>
325
					<? endforeach; ?>
326
					</ol>
327
				</div>
435 jpm 328
			</div>
329
		</div>
559 jpm 330
		<? endif ?>
424 jpm 331
		<div id="carte"></div>
469 jpm 332
 
333
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
334
		<div id="chargement">
335
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
336
			<p>Chargement des observations en cours...</p>
337
		</div>
424 jpm 338
	</body>
339
</html>