Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 521 Rev 544
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
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=true"></script>
25
		<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="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
26
		<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
27
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/<?=$jquery_version?>/jquery-<?=$jquery_version?>.min.js"></script>
27
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/<?=$jquery_version?>/jquery-<?=$jquery_version?>.min.js"></script>
28
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/tablesorter/2.0.5/jquery.tablesorter.min.js"></script>
28
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/tablesorter/2.0.5/jquery.tablesorter.min.js"></script>
29
		
29
		
30
		<!-- Javascript : données -->
30
		<!-- Javascript : données -->
31
		<script src="<?=$url_json?>" type="text/javascript"></script>
31
		<script src="<?=$url_json?>" type="text/javascript"></script>
32
		
32
		
33
		<!-- Javascript : appli carto -->
33
		<!-- Javascript : appli carto -->
34
		<script type="text/javascript">
34
		<script type="text/javascript">
35
		//<![CDATA[
35
		//<![CDATA[
36
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
36
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
37
			var pointsOrigine = null;
37
			var pointsOrigine = null;
38
			var boundsOrigine = null;
38
			var boundsOrigine = null;
39
			var markerClusterer = null;
39
			var markerClusterer = null;
40
			var map = null;
40
			var map = null;
41
			var nt = '<?=$num_taxon?>';
41
			var nt = '<?=$num_taxon?>';
42
			var infoBulle = new google.maps.InfoWindow();
42
			var infoBulle = new google.maps.InfoWindow();
43
			google.maps.event.addListener(infoBulle, 'domready', function() {
43
			google.maps.event.addListener(infoBulle, 'domready', function() {
44
				if ($("#observations table").get() != 'undefined') {
44
				if ($("#observations table").get() != 'undefined') {
45
					$("#observations table").tablesorter();
45
					$("#observations table").tablesorter();
46
				}
46
				}
47
			});
47
			});
48
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
48
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
49
			var carteOptions = {
49
			var carteOptions = {
50
				zoom: 6,
50
				zoom: 6,
51
				mapTypeId: google.maps.MapTypeId.ROADMAP,
51
				mapTypeId: google.maps.MapTypeId.ROADMAP,
52
				mapTypeControlOptions: {
52
				mapTypeControlOptions: {
53
			        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
53
			        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
54
			};
54
			};
55
			var ctaLayer = null;
55
			var ctaLayer = null;
56
			
56
			
57
			function refreshMap() {
57
			function refreshMap() {
58
				var points = [];
58
				var points = [];
59
				var bounds = new google.maps.LatLngBounds();
59
				var bounds = new google.maps.LatLngBounds();
60
				for (var i = 0; i < obs.nombre; ++i) {
60
				for (var i = 0; i < obs.nombre; ++i) {
61
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
61
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
62
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
62
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
63
					var point = new google.maps.Marker({
63
					var point = new google.maps.Marker({
64
						position: maLatLng,
64
						position: maLatLng,
65
						map: map,
65
						map: map,
66
						icon: pointImage,
66
						icon: pointImage,
67
						stationId: obs.points[i].id
67
						stationId: obs.points[i].id
68
					});
68
					});
69
 
69
 
70
					bounds.extend(maLatLng);
70
					bounds.extend(maLatLng);
71
					
71
					
72
					google.maps.event.addListener(point, 'click', function() {
72
					google.maps.event.addListener(point, 'click', function() {
73
						afficherMsgChargement();
73
						afficherMsgChargement();
74
						infoBulle.open(map, this);
74
						infoBulle.open(map, this);
75
						chargerFormatObs(this.stationId, '*');
75
						chargerFormatObs(this.stationId, '*');
76
					});
76
					});
77
					
77
					
78
					points.push(point);
78
					points.push(point);
79
				}
79
				}
80
 
80
 
81
				if (pointsOrigine == null && boundsOrigine == null) {
81
				if (pointsOrigine == null && boundsOrigine == null) {
82
					pointsOrigine = points;
82
					pointsOrigine = points;
83
					boundsOrigine = bounds;
83
					boundsOrigine = bounds;
84
				}
84
				}
85
				
85
				
86
				executerMarkerClusterer(points, bounds);
86
				executerMarkerClusterer(points, bounds);
87
			}
87
			}
88
 
88
 
89
			function executerMarkerClusterer(points, bounds) {
89
			function executerMarkerClusterer(points, bounds) {
90
				if (markerClusterer) {
90
				if (markerClusterer) {
91
					markerClusterer.clearMarkers();
91
					markerClusterer.clearMarkers();
92
				}
92
				}
93
				markerClusterer = new MarkerClusterer(map, points);
93
				markerClusterer = new MarkerClusterer(map, points);
94
				map.fitBounds(bounds);
94
				map.fitBounds(bounds);
95
			}
95
			}
96
 
96
 
97
			function afficherMsgChargement() {
97
			function afficherMsgChargement() {
98
				var chargement = document.getElementById('chargement').cloneNode(true);
98
				var chargement = document.getElementById('chargement').cloneNode(true);
99
				chargement.setAttribute('id', 'chargement-copie');
99
				chargement.setAttribute('id', 'chargement-copie');
100
				infoBulle.setContent(chargement);
100
				infoBulle.setContent(chargement);
101
			}
101
			}
102
 
102
 
103
			function chargerFormatObs(stationId, format) {
103
			function chargerFormatObs(stationId, format) {
104
				var url = '<?=$url_base?>carto?carte=observations'+
104
				var url = '<?=$url_base?>carto?carte=observations'+
105
					'&utilisateur=<?=$utilisateur?>'+
105
					'&utilisateur=<?=$utilisateur?>'+
106
					'&projet=<?=$projet?>'+
106
					'&projet=<?=$projet?>'+
107
					'&num_taxon='+nt+
107
					'&num_taxon='+nt+
108
					'&dept=<?=$dept?>'+
108
					'&dept=<?=$dept?>'+
109
					'&format='+format+'&station='+stationId;
109
					'&format='+format+'&station='+stationId;
110
				$.get(url, function(observations){
110
				$.get(url, function(observations){
111
					infoBulle.setContent(observations);
111
					infoBulle.setContent(observations);
112
				});
112
				});
113
			}
113
			}
114
 
114
 
115
			function arreter(event) {
115
			function arreter(event) {
116
				if (event.stopPropagation) {
116
				if (event.stopPropagation) {
117
					event.stopPropagation();
117
					event.stopPropagation();
118
				}
118
				}
119
				return false;
119
				return false;
120
			}
120
			}
121
			
121
			
122
			function afficher() {
122
			function afficher() {
123
				document.getElementById('panneau-lateral').style.width = '300px';
123
				document.getElementById('panneau-lateral').style.width = '300px';
124
				document.getElementById('pl-contenu').style.display = 'block';
124
				document.getElementById('pl-contenu').style.display = 'block';
125
				document.getElementById('pl-ouverture').style.display = 'none';
125
				document.getElementById('pl-ouverture').style.display = 'none';
126
				document.getElementById('pl-fermeture').style.display = 'block';
126
				document.getElementById('pl-fermeture').style.display = 'block';
127
				document.getElementById('carte').style.left = '300px';
127
				document.getElementById('carte').style.left = '300px';
128
				google.maps.event.trigger(map, 'resize');
128
				google.maps.event.trigger(map, 'resize');
129
			};
129
			};
130
			
130
			
131
			function cacher() {
131
			function cacher() {
132
				document.getElementById('panneau-lateral').style.width = '24px';
132
				document.getElementById('panneau-lateral').style.width = '24px';
133
				document.getElementById('pl-contenu').style.display = 'none';
133
				document.getElementById('pl-contenu').style.display = 'none';
134
				document.getElementById('pl-ouverture').style.display = 'block';
134
				document.getElementById('pl-ouverture').style.display = 'block';
135
				document.getElementById('pl-fermeture').style.display = 'none';
135
				document.getElementById('pl-fermeture').style.display = 'none';
136
				document.getElementById('carte').style.left = '24px';
136
				document.getElementById('carte').style.left = '24px';
137
				google.maps.event.trigger(map, 'resize');
137
				google.maps.event.trigger(map, 'resize');
138
			};
138
			};
139
 
139
 
140
			function ouvrirPopUp(url, nom) {
140
			function ouvrirPopUp(url, nom) {
141
				window.open(url, nom, 'directories=no, location=no, menubar=no, scrollbars=yes, status=no, toolbar=no, width=650,height=600');
141
				window.open(url, nom, 'directories=no, location=no, menubar=no, scrollbars=yes, status=no, toolbar=no, width=650,height=600');
142
			};
142
			};
143
			
143
			
144
			function filtrerParTaxon(ntAFiltrer) {
144
			function filtrerParTaxon(ntAFiltrer) {
145
				infoBulle.close();
145
				infoBulle.close();
146
				$('#taxon-'+nt).removeClass('taxon-actif');
146
				$('#taxon-'+nt).removeClass('taxon-actif');
147
				if (nt == ntAFiltrer) {
147
				if (nt == ntAFiltrer) {
148
					nt = '*';
148
					nt = '*';
149
					executerMarkerClusterer(pointsOrigine, boundsOrigine);
149
					executerMarkerClusterer(pointsOrigine, boundsOrigine);
150
				} else {
150
				} else {
151
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
151
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
152
					$.getJSON(url, function (observations) {
152
					$.getJSON(url, function (observations) {
153
						obs = observations;
153
						obs = observations;
154
						nt = ntAFiltrer;
154
						nt = ntAFiltrer;
155
						$('#taxon-'+nt).addClass('taxon-actif');
155
						$('#taxon-'+nt).addClass('taxon-actif');
156
						refreshMap();
156
						refreshMap();
157
					});
157
					});
158
				}
158
				}
159
			};
159
			};
160
			
160
			
161
			function initialize() {
161
			function initialize() {
162
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
162
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
163
 
163
 
164
				// Ajout des limites communales sur la carte
164
				// Ajout des limites communales sur la carte
165
				<? if (isset($url_limites_communales)) : ?>
165
				<? if (isset($url_limites_communales)) : ?>
166
					<? foreach ($url_limites_communales as $url) : ?>
166
					<? foreach ($url_limites_communales as $url) : ?>
167
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
167
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
168
						ctaLayer.setMap(map);
168
						ctaLayer.setMap(map);
169
					<? endforeach; ?>
169
					<? endforeach; ?>
170
				<? endif; ?>
170
				<? endif; ?>
171
				
171
				
172
				var ouvertureDiv = document.getElementById('pl-ouverture');
172
				var ouvertureDiv = document.getElementById('pl-ouverture');
173
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
173
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
174
 
174
 
175
				var fermetureDiv = document.getElementById('pl-fermeture');
175
				var fermetureDiv = document.getElementById('pl-fermeture');
176
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
176
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
-
 
177
				
177
				
178
		
178
				refreshMap();
179
				refreshMap();
-
 
180
			}
-
 
181
			
-
 
182
			// Déclenchement d'actions pour JQuery
-
 
183
			$(document).ready(function() {
-
 
184
				// Ajout du nombre de communes où des observations ont eu lieu
-
 
185
				$('#commune-nbre').append(obs.nombre);
179
			}
186
			});
180
		//]]>
187
		//]]>
181
		</script>
188
		</script>
182
		
189
		
183
		<!-- CSS -->
190
		<!-- CSS -->
184
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
191
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
185
		
192
		
186
		<!--[if lt IE 7]>
193
		<!--[if lt IE 7]>
187
			<style type="text/css">
194
			<style type="text/css">
188
				#carte {
195
				#carte {
189
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
196
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
190
					width:expression(document.body.clientWidth-24); /* 200+20+20+20=260 */
197
					width:expression(document.body.clientWidth-24); /* 200+20+20+20=260 */
191
				}
198
				}
192
				#panneau-lateral {
199
				#panneau-lateral {
193
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
200
					height:expression(document.body.clientHeight-35); /* 80+20+20=120 */
194
				}
201
				}
195
			</style>
202
			</style>
196
		<![endif]-->
203
		<![endif]-->
197
		
204
		
198
		<!-- Stats : Google Analytics -->
205
		<!-- Stats : Google Analytics -->
199
		<script type="text/javascript">
206
		<script type="text/javascript">
200
			//<![CDATA[
207
			//<![CDATA[
201
			var _gaq = _gaq || [];
208
			var _gaq = _gaq || [];
202
			_gaq.push(['_setAccount', 'UA-20092557-1']);
209
			_gaq.push(['_setAccount', 'UA-20092557-1']);
203
			_gaq.push(['_trackPageview']);
210
			_gaq.push(['_trackPageview']);
204
			
211
			
205
			(function() {
212
			(function() {
206
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
213
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
207
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
214
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
208
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
215
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
209
			})();
216
			})();
210
			//]]>
217
			//]]>
211
		</script>
218
		</script>
212
	</head>
219
	</head>
213
 
220
 
214
	<body onload="initialize()">
221
	<body onload="initialize()">
215
		<div id="zone-titre">
222
		<div id="zone-titre">
216
			<h1 id="carte-titre">
223
			<h1 id="carte-titre">
217
				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>
224
				<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>
218
			</h1>
225
			</h1>
219
			<div id="zone-info">
226
			<div id="zone-info">
220
				<a href="<?=$url_base?>carto?carte=avertissement" onClick="ouvrirPopUp('<?=$url_base?>carto?carte=avertissement', 'Avertissement'); arreter(event); return false;">
227
				<a href="<?=$url_base?>carto?carte=avertissement" onClick="ouvrirPopUp('<?=$url_base?>carto?carte=avertissement', 'Avertissement'); arreter(event); return false;">
221
					<img src="<?=$url_base?>modules/carto/squelettes/images/information.png" 
228
					<img src="<?=$url_base?>modules/carto/squelettes/images/information.png" 
222
						alt="Avertissements" title="Avertissements &amp; informations" />
229
						alt="Avertissements" title="Avertissements &amp; informations" />
223
				</a>
230
				</a>
224
			</div>
231
			</div>
225
		</div>
232
		</div>
226
		<div id="panneau-lateral">
233
		<div id="panneau-lateral">
227
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
234
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
228
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
235
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
229
			<div id="pl-contenu">
236
			<div id="pl-contenu">
230
				<div id="pl-entete">
237
				<div id="pl-entete">
231
					<h2>Filtre par plante</h2>	
238
					<h2>Filtre par plante</h2>	
232
					<p>
239
					<p>
233
						Cliquez sur un nom de plante pour filtrer les observations sur la carte.<br /> 
240
						Cliquez sur un nom de plante pour filtrer les observations sur la carte.<br /> 
234
						Pour revenir à l'état initial, cliquez à nouveau sur le nom sélectionné.
241
						Pour revenir à l'état initial, cliquez à nouveau sur le nom sélectionné.
235
					</p>
242
					</p>
236
				</div>
243
				</div>
237
				<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
244
				<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
238
					<ol id="taxons">
245
					<ol id="taxons">
239
					<? foreach ($taxons as $taxon) : ?>
246
					<? foreach ($taxons as $taxon) : ?>
240
						<li id="taxon-<?=$taxon['nt']?>">
247
						<li id="taxon-<?=$taxon['nt']?>">
241
							<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
248
							<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
242
								<?=$taxon['nom']?> 
249
								<?=$taxon['nom']?> 
243
							</a>
250
							</a>
244
						</li>
251
						</li>
245
					<? endforeach; ?>
252
					<? endforeach; ?>
246
					</ol>
253
					</ol>
247
				</div>
254
				</div>
248
			</div>
255
			</div>
249
		</div>
256
		</div>
250
		<div id="carte"></div>
257
		<div id="carte"></div>
251
		
258
		
252
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
259
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
253
		<div id="chargement">
260
		<div id="chargement">
254
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
261
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
255
			<p>Chargement des observations en cours...</p>
262
			<p>Chargement des observations en cours...</p>
256
		</div>
263
		</div>
257
	</body>
264
	</body>
258
</html>
265
</html>