Subversion Repositories eFlore/Applications.cel

Rev

Rev 556 | Rev 569 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 556 Rev 559
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
	<head>
3
	<head>
4
		<title>Observations publiques du CEL - Tela Botanica</title>
4
		<title>Observations publiques du CEL - Tela Botanica</title>
5
		
5
		
6
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
6
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
7
		<meta http-equiv="Content-style-type" content="text/css" />
7
		<meta http-equiv="Content-style-type" content="text/css" />
8
		<meta http-equiv="Content-script-type" content="text/javascript" />
8
		<meta http-equiv="Content-script-type" content="text/javascript" />
9
		<meta http-equiv="Content-language" content="fr" />
9
		<meta http-equiv="Content-language" content="fr" />
10
		
10
		
11
		<meta name="revisit-after" content="15 days" />
11
		<meta name="revisit-after" content="15 days" />
12
        <meta name="robots" content="index,follow" />
12
        <meta name="robots" content="index,follow" />
13
        <meta name="author" content="Delphine CAUQUIL, Jean-Pascal MILCENT" />
13
        <meta name="author" content="Delphine CAUQUIL, Jean-Pascal MILCENT" />
14
        <meta name="keywords" content="Tela Botanica, cartographie, CEL" />
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)" />
15
        <meta name="description" content="Widget de cartographie des observations publiques de plantes saisies dans le Carnet en Ligne (CEL)" />
16
 
16
 
17
		<!-- Spécial mobile -->
17
		<!-- Spécial mobile -->
18
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
18
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
19
		
19
		
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" />
23
		
23
		
24
		<!-- Javascript : bibliothèques -->
24
		<!-- Javascript : bibliothèques -->
25
		<!-- 	Google Map v3 -->
25
		<!-- 	Google Map v3 -->
26
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=true"></script>
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://www.tela-botanica.org/commun/google/map/3/markerclusterer/1.0/markerclusterer-1.0.pack.js"></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
		<!-- 	Jquery -->
28
		<!-- 	Jquery -->
29
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/<?=$jquery_version?>/jquery-<?=$jquery_version?>.min.js"></script>
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>
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/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
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
		
32
		
33
		<!-- Javascript : données -->
33
		<!-- Javascript : données -->
34
		<script src="<?=$url_json?>" type="text/javascript"></script>
34
		<script src="<?=$url_json?>" type="text/javascript"></script>
35
		
35
		
36
		<!-- Javascript : appli carto -->
36
		<!-- Javascript : appli carto -->
37
		<script type="text/javascript">
37
		<script type="text/javascript">
38
		//<![CDATA[
38
		//<![CDATA[
39
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
39
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
40
			var pointsOrigine = null;
40
			var pointsOrigine = null;
41
			var boundsOrigine = null;
41
			var boundsOrigine = null;
42
			var markerClusterer = null;
42
			var markerClusterer = null;
43
			var map = null;
43
			var map = null;
44
			var nt = '<?=$num_taxon?>';
44
			var nt = '<?=$num_taxon?>';
45
			var infoBulle = new google.maps.InfoWindow();
45
			var infoBulle = new google.maps.InfoWindow();
46
			google.maps.event.addListener(infoBulle, 'domready', function() {
46
			google.maps.event.addListener(infoBulle, 'domready', function() {
47
				// Onglet Tableau : Jquery => TableSorter
47
				// Onglet Tableau : Jquery => TableSorter
48
				if ($("#observations table").get() != '') {
48
				if ($("#observations table").get() != '') {
49
					$("#observations table").tablesorter();
49
					$("#observations table").tablesorter();
50
				}
50
				}
51
				// Onglet Liste : Jquery => FancyBox
51
				// Onglet Liste : Jquery => FancyBox
52
				if ($("#observations ol").get() != '') {
52
				if ($("#observations ol").get() != '') {
53
					$("a.cel-img").fancybox({
53
					$("a.cel-img").fancybox({
54
						transitionIn : 'elastic',
54
						transitionIn : 'elastic',
55
						transitionOut : 'elastic',
55
						transitionOut : 'elastic',
56
						speedIn	 : 600, 
56
						speedIn	 : 600, 
57
						speedOut : 200, 
57
						speedOut : 200, 
58
						overlayShow : true
58
						overlayShow : true
59
					}).bind('click', function(e) {
59
					}).bind('click', function(e) {
60
						if (e.stopPropagation) {
60
						if (e.stopPropagation) {
61
							e.stopPropagation();
61
							e.stopPropagation();
62
						}
62
						}
63
						return false;
63
						return false;
64
					});
64
					});
65
				}
65
				}
66
			});
66
			});
67
			
67
			
68
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
68
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
69
			var carteOptions = {
69
			var carteOptions = {
70
				zoom: 6,
70
				zoom: 6,
71
				mapTypeId: google.maps.MapTypeId.ROADMAP,
71
				mapTypeId: google.maps.MapTypeId.ROADMAP,
72
				mapTypeControlOptions: {
72
				mapTypeControlOptions: {
73
			        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
73
			        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
74
			};
74
			};
75
			var ctaLayer = null;
75
			var ctaLayer = null;
76
			
76
			
77
			function refreshMap() {
77
			function refreshMap() {
78
				var points = [];
78
				var points = [];
79
				var bounds = new google.maps.LatLngBounds();
79
				var bounds = new google.maps.LatLngBounds();
80
				for (var i = 0; i < obs.nombre; ++i) {
80
				for (var i = 0; i < obs.nombre; ++i) {
81
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
81
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
82
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
82
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
83
					var point = new google.maps.Marker({
83
					var point = new google.maps.Marker({
84
						position: maLatLng,
84
						position: maLatLng,
85
						map: map,
85
						map: map,
86
						icon: pointImage,
86
						icon: pointImage,
87
						stationId: obs.points[i].id
87
						stationId: obs.points[i].id
88
					});
88
					});
89
 
89
 
90
					bounds.extend(maLatLng);
90
					bounds.extend(maLatLng);
91
					
91
					
92
					google.maps.event.addListener(point, 'click', function() {
92
					google.maps.event.addListener(point, 'click', function() {
93
						afficherMsgChargement();
93
						afficherMsgChargement();
94
						infoBulle.open(map, this);
94
						infoBulle.open(map, this);
95
						chargerFormatObs(this.stationId, '*');
95
						chargerFormatObs(this.stationId, '*');
96
					});
96
					});
97
					
97
					
98
					points.push(point);
98
					points.push(point);
99
				}
99
				}
100
 
100
 
101
				if (pointsOrigine == null && boundsOrigine == null) {
101
				if (pointsOrigine == null && boundsOrigine == null) {
102
					pointsOrigine = points;
102
					pointsOrigine = points;
103
					boundsOrigine = bounds;
103
					boundsOrigine = bounds;
104
				}
104
				}
105
				
105
				
106
				executerMarkerClusterer(points, bounds);
106
				executerMarkerClusterer(points, bounds);
107
			}
107
			}
108
 
108
 
109
			function executerMarkerClusterer(points, bounds) {
109
			function executerMarkerClusterer(points, bounds) {
110
				if (markerClusterer) {
110
				if (markerClusterer) {
111
					markerClusterer.clearMarkers();
111
					markerClusterer.clearMarkers();
112
				}
112
				}
113
				markerClusterer = new MarkerClusterer(map, points);
113
				markerClusterer = new MarkerClusterer(map, points);
114
				map.fitBounds(bounds);
114
				map.fitBounds(bounds);
115
			}
115
			}
116
 
116
 
117
			function afficherMsgChargement() {
117
			function afficherMsgChargement() {
118
				var chargement = document.getElementById('chargement').cloneNode(true);
118
				var chargement = document.getElementById('chargement').cloneNode(true);
119
				chargement.setAttribute('id', 'chargement-copie');
119
				chargement.setAttribute('id', 'chargement-copie');
120
				infoBulle.setContent(chargement);
120
				infoBulle.setContent(chargement);
121
			}
121
			}
122
 
122
 
123
			function chargerFormatObs(stationId, format) {
123
			function chargerFormatObs(stationId, format) {
124
				var url = '<?=$url_base?>carto?carte=observations'+
124
				var url = '<?=$url_base?>carto?carte=observations'+
125
					'&utilisateur=<?=$utilisateur?>'+
125
					'&utilisateur=<?=$utilisateur?>'+
126
					'&projet=<?=$projet?>'+
126
					'&projet=<?=$projet?>'+
127
					'&num_taxon='+nt+
127
					'&num_taxon='+nt+
128
					'&dept=<?=$dept?>'+
128
					'&dept=<?=$dept?>'+
129
					'&format='+format+'&station='+stationId;
129
					'&format='+format+'&station='+stationId;
130
				$.get(url, function(observations){
130
				$.get(url, function(observations){
131
					infoBulle.setContent(observations);
131
					infoBulle.setContent(observations);
132
				});
132
				});
133
			}
133
			}
134
 
134
 
135
			function arreter(event) {
135
			function arreter(event) {
136
				if (event.stopPropagation) {
136
				if (event.stopPropagation) {
137
					event.stopPropagation();
137
					event.stopPropagation();
138
				}
138
				}
139
				return false;
139
				return false;
140
			}
140
			}
141
			
141
			
142
			function afficher() {
142
			function afficher() {
143
				document.getElementById('panneau-lateral').style.width = '300px';
143
				document.getElementById('panneau-lateral').style.width = '300px';
144
				document.getElementById('pl-contenu').style.display = 'block';
144
				document.getElementById('pl-contenu').style.display = 'block';
145
				document.getElementById('pl-ouverture').style.display = 'none';
145
				document.getElementById('pl-ouverture').style.display = 'none';
146
				document.getElementById('pl-fermeture').style.display = 'block';
146
				document.getElementById('pl-fermeture').style.display = 'block';
147
				document.getElementById('carte').style.left = '300px';
147
				document.getElementById('carte').style.left = '300px';
148
				google.maps.event.trigger(map, 'resize');
148
				google.maps.event.trigger(map, 'resize');
149
			};
149
			};
150
			
150
			
151
			function cacher() {
151
			function cacher() {
152
				document.getElementById('panneau-lateral').style.width = '24px';
152
				document.getElementById('panneau-lateral').style.width = '24px';
153
				document.getElementById('pl-contenu').style.display = 'none';
153
				document.getElementById('pl-contenu').style.display = 'none';
154
				document.getElementById('pl-ouverture').style.display = 'block';
154
				document.getElementById('pl-ouverture').style.display = 'block';
155
				document.getElementById('pl-fermeture').style.display = 'none';
155
				document.getElementById('pl-fermeture').style.display = 'none';
156
				document.getElementById('carte').style.left = '24px';
156
				document.getElementById('carte').style.left = '24px';
157
				google.maps.event.trigger(map, 'resize');
157
				google.maps.event.trigger(map, 'resize');
158
			};
158
			};
159
 
159
 
160
			function ouvrirPopUp(url, nom) {
160
			function ouvrirPopUp(url, nom) {
161
				window.open(url, nom, 'directories=no, location=no, menubar=no, scrollbars=yes, status=no, toolbar=no, width=650,height=600');
161
				window.open(url, nom, 'directories=no, location=no, menubar=no, scrollbars=yes, status=no, toolbar=no, width=650,height=600');
162
			};
162
			};
163
			
163
			
164
			function filtrerParTaxon(ntAFiltrer) {
164
			function filtrerParTaxon(ntAFiltrer) {
165
				infoBulle.close();
165
				infoBulle.close();
166
				$('#taxon-'+nt).removeClass('taxon-actif');
166
				$('#taxon-'+nt).removeClass('taxon-actif');
167
				if (nt == ntAFiltrer) {
167
				if (nt == ntAFiltrer) {
168
					nt = '*';
168
					nt = '*';
169
					executerMarkerClusterer(pointsOrigine, boundsOrigine);
169
					executerMarkerClusterer(pointsOrigine, boundsOrigine);
170
				} else {
170
				} else {
171
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
171
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
172
					$.getJSON(url, function (observations) {
172
					$.getJSON(url, function (observations) {
173
						obs = observations;
173
						obs = observations;
174
						nt = ntAFiltrer;
174
						nt = ntAFiltrer;
175
						$('#taxon-'+nt).addClass('taxon-actif');
175
						$('#taxon-'+nt).addClass('taxon-actif');
176
						refreshMap();
176
						refreshMap();
177
					});
177
					});
178
				}
178
				}
179
			};
179
			};
180
			
180
			
181
			function initialize() {
181
			function initialize() {
182
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
182
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
183
 
183
 
184
				// Ajout des limites communales sur la carte
184
				// Ajout des limites communales sur la carte
185
				<? if (isset($url_limites_communales)) : ?>
185
				<? if (isset($url_limites_communales)) : ?>
186
					<? foreach ($url_limites_communales as $url) : ?>
186
					<? foreach ($url_limites_communales as $url) : ?>
187
						ctaLayer = new google.maps.KmlLayer('<?=$url?>', {preserveViewport: true});
187
						ctaLayer = new google.maps.KmlLayer('<?=$url?>', {preserveViewport: true});
188
						ctaLayer.setMap(map);
188
						ctaLayer.setMap(map);
189
					<? endforeach; ?>
189
					<? endforeach; ?>
190
				<? endif; ?>
190
				<? endif; ?>
-
 
191
				
191
				
192
				<? if ($num_taxon == '*') : ?>
192
				var ouvertureDiv = document.getElementById('pl-ouverture');
193
				var ouvertureDiv = document.getElementById('pl-ouverture');
193
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
194
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
194
 
195
 
195
				var fermetureDiv = document.getElementById('pl-fermeture');
196
				var fermetureDiv = document.getElementById('pl-fermeture');
196
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
197
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
197
				
198
				<? endif ?>
198
		
199
		
199
				refreshMap();
200
				refreshMap();
200
			}
201
			}
201
			
202
			
202
			// Déclenchement d'actions pour JQuery
203
			// Déclenchement d'actions pour JQuery
203
			$(document).ready(function() {
204
			$(document).ready(function() {
204
				// Ajout du nombre de communes où des observations ont eu lieu
205
				// Ajout du nombre de communes où des observations ont eu lieu
205
				$('#commune-nbre').append(obs.nombre);
206
				$('#commune-nbre').append(obs.nombre);
206
			});
207
			});
207
		//]]>
208
		//]]>
208
		</script>
209
		</script>
209
		
210
		
210
		<!-- CSS -->
211
		<!-- CSS -->
211
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
212
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
212
		<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" />
213
		<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" />
213
		
214
		
214
		<!--[if lt IE 7]>
215
		<!--[if lt IE 7]>
215
			<style type="text/css">
216
			<style type="text/css">
216
				#carte {
217
				#carte {
217
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
218
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
218
					width:expression(document.body.clientWidth-24); /* 200+20+20+20=260 */
219
					width:expression(document.body.clientWidth-24); /* 200+20+20+20=260 */
219
				}
220
				}
220
				#panneau-lateral {
221
				#panneau-lateral {
221
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
222
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
222
				}
223
				}
223
			</style>
224
			</style>
224
		<![endif]-->
225
		<![endif]-->
-
 
226
		
-
 
227
		<? if ($num_taxon != '*') : ?>
-
 
228
		<style type="text/css">
-
 
229
			#carte {
-
 
230
				left:0;
-
 
231
			}
-
 
232
		</style>
-
 
233
		<? endif ?>
225
		
234
		
226
		<!-- Stats : Google Analytics -->
235
		<!-- Stats : Google Analytics -->
227
		<script type="text/javascript">
236
		<script type="text/javascript">
228
			//<![CDATA[
237
			//<![CDATA[
229
			var _gaq = _gaq || [];
238
			var _gaq = _gaq || [];
230
			_gaq.push(['_setAccount', 'UA-20092557-1']);
239
			_gaq.push(['_setAccount', 'UA-20092557-1']);
231
			_gaq.push(['_trackPageview']);
240
			_gaq.push(['_trackPageview']);
232
			
241
			
233
			(function() {
242
			(function() {
234
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
243
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
235
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
244
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
236
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
245
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
237
			})();
246
			})();
238
			//]]>
247
			//]]>
239
		</script>
248
		</script>
240
	</head>
249
	</head>
241
 
250
 
242
	<body onload="initialize()">
251
	<body onload="initialize()">
243
		<div id="zone-titre">
252
		<div id="zone-titre">
244
			<h1 id="carte-titre">
253
			<h1 id="carte-titre">
-
 
254
				<? if ($num_taxon == '*') : ?>
245
				<span id="commune-nbre">&nbsp;</span> communes contenant des observations du <abbr title="Carnet en Ligne">CEL</abbr> de <a href="http://www.tela-botanica.org/" onclick="window.open(this.href); arreter(event); return false;">Tela Botanica</a>
255
				<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>
-
 
256
				<? else : ?>
-
 
257
				<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>
-
 
258
				<? endif ?>
246
			</h1>
259
			</h1>
247
			<div id="zone-info">
260
			<div id="zone-info">
248
				<a href="<?=$url_base?>carto?carte=avertissement" onClick="ouvrirPopUp('<?=$url_base?>carto?carte=avertissement', 'Avertissement'); arreter(event); return false;">
261
				<a href="<?=$url_base?>carto?carte=avertissement" onClick="ouvrirPopUp('<?=$url_base?>carto?carte=avertissement', 'Avertissement'); arreter(event); return false;">
249
					<img src="<?=$url_base?>modules/carto/squelettes/images/information.png" 
262
					<img src="<?=$url_base?>modules/carto/squelettes/images/information.png" 
250
						alt="Avertissements" title="Avertissements &amp; informations" />
263
						alt="Avertissements" title="Avertissements &amp; informations" />
251
				</a>
264
				</a>
252
			</div>
265
			</div>
253
		</div>
266
		</div>
-
 
267
		<? if ($num_taxon == '*') : ?>
254
		<div id="panneau-lateral">
268
		<div id="panneau-lateral">
255
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
269
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
256
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
270
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
257
			<div id="pl-contenu">
271
			<div id="pl-contenu">
258
				<div id="pl-entete">
272
				<div id="pl-entete">
259
					<h2>Filtre par plante</h2>	
273
					<h2>Filtre sur <?=count($taxons)?> plantes</h2>	
260
					<p>
274
					<p>
261
						Cliquez sur un nom de plante pour filtrer les observations sur la carte.<br /> 
275
						Cliquez sur un nom de plante pour filtrer les observations sur la carte.<br /> 
262
						Pour revenir à l'état initial, cliquez à nouveau sur le nom sélectionné.
276
						Pour revenir à l'état initial, cliquez à nouveau sur le nom sélectionné.
263
					</p>
277
					</p>
264
				</div>
278
				</div>
265
				<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
279
				<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
266
					<ol id="taxons">
280
					<ol id="taxons">
267
					<? foreach ($taxons as $taxon) : ?>
281
					<? foreach ($taxons as $taxon) : ?>
268
						<li id="taxon-<?=$taxon['nt']?>">
282
						<li id="taxon-<?=$taxon['nt']?>">
269
							<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
283
							<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
270
								<?=$taxon['nom']?> 
284
								<?=$taxon['nom']?> 
271
							</a>
285
							</a>
272
						</li>
286
						</li>
273
					<? endforeach; ?>
287
					<? endforeach; ?>
274
					</ol>
288
					</ol>
275
				</div>
289
				</div>
276
			</div>
290
			</div>
277
		</div>
291
		</div>
-
 
292
		<? endif ?>
278
		<div id="carte"></div>
293
		<div id="carte"></div>
279
		
294
		
280
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
295
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
281
		<div id="chargement">
296
		<div id="chargement">
282
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
297
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
283
			<p>Chargement des observations en cours...</p>
298
			<p>Chargement des observations en cours...</p>
284
		</div>
299
		</div>
285
	</body>
300
	</body>
286
</html>
301
</html>