Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 503 Rev 507
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.2&amp;sensor=false"></script>
25
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></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
			};
52
			};
53
			var ctaLayer = null;
53
			var ctaLayer = null;
54
			
54
			
55
			function refreshMap() {
55
			function refreshMap() {
56
				var points = [];
56
				var points = [];
57
				var bounds = new google.maps.LatLngBounds();
57
				var bounds = new google.maps.LatLngBounds();
58
				for (var i = 0; i < obs.nombre; ++i) {
58
				for (var i = 0; i < obs.nombre; ++i) {
59
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
59
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
60
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
60
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
61
					var point = new google.maps.Marker({
61
					var point = new google.maps.Marker({
62
						position: maLatLng,
62
						position: maLatLng,
63
						map: map,
63
						map: map,
64
						icon: pointImage,
64
						icon: pointImage,
65
						stationId: obs.points[i].id
65
						stationId: obs.points[i].id
66
					});
66
					});
67
 
67
 
68
					bounds.extend(maLatLng);
68
					bounds.extend(maLatLng);
69
					
69
					
70
					google.maps.event.addListener(point, 'click', function() {
70
					google.maps.event.addListener(point, 'click', function() {
71
						afficherMsgChargement();
71
						afficherMsgChargement();
72
						infoBulle.open(map, this);
72
						infoBulle.open(map, this);
73
						chargerFormatObs(this.stationId, '*');
73
						chargerFormatObs(this.stationId, '*');
74
					});
74
					});
75
					
75
					
76
					points.push(point);
76
					points.push(point);
77
				}
77
				}
78
 
78
 
79
				if (pointsOrigine == null && boundsOrigine == null) {
79
				if (pointsOrigine == null && boundsOrigine == null) {
80
					pointsOrigine = points;
80
					pointsOrigine = points;
81
					boundsOrigine = bounds;
81
					boundsOrigine = bounds;
82
				}
82
				}
83
				
83
				
84
				executerMarkerClusterer(points, bounds);
84
				executerMarkerClusterer(points, bounds);
85
			}
85
			}
86
 
86
 
87
			function executerMarkerClusterer(points, bounds) {
87
			function executerMarkerClusterer(points, bounds) {
88
				if (markerClusterer) {
88
				if (markerClusterer) {
89
					markerClusterer.clearMarkers();
89
					markerClusterer.clearMarkers();
90
				}
90
				}
91
				markerClusterer = new MarkerClusterer(map, points);
91
				markerClusterer = new MarkerClusterer(map, points);
92
				map.fitBounds(bounds);
92
				map.fitBounds(bounds);
93
			}
93
			}
94
 
94
 
95
			function afficherMsgChargement() {
95
			function afficherMsgChargement() {
96
				var chargement = document.getElementById('chargement').cloneNode(true);
96
				var chargement = document.getElementById('chargement').cloneNode(true);
97
				chargement.setAttribute('id', 'chargement-copie');
97
				chargement.setAttribute('id', 'chargement-copie');
98
				infoBulle.setContent(chargement);
98
				infoBulle.setContent(chargement);
99
			}
99
			}
100
 
100
 
101
			function chargerFormatObs(stationId, format) {
101
			function chargerFormatObs(stationId, format) {
102
				var url = '<?=$url_base?>carto?carte=observations'+
102
				var url = '<?=$url_base?>carto?carte=observations'+
103
					'&utilisateur=<?=$utilisateur?>'+
103
					'&utilisateur=<?=$utilisateur?>'+
104
					'&projet=<?=$projet?>'+
104
					'&projet=<?=$projet?>'+
105
					'&num_taxon='+nt+
105
					'&num_taxon='+nt+
106
					'&dept=<?=$dept?>'+
106
					'&dept=<?=$dept?>'+
107
					'&format='+format+'&station='+stationId;
107
					'&format='+format+'&station='+stationId;
108
				$.get(url, function(observations){
108
				$.get(url, function(observations){
109
					infoBulle.setContent(observations);
109
					infoBulle.setContent(observations);
110
				});
110
				});
111
			}
111
			}
112
 
112
 
113
			function arreter(event) {
113
			function arreter(event) {
114
				if (event.stopPropagation) {
114
				if (event.stopPropagation) {
115
					event.stopPropagation();
115
					event.stopPropagation();
116
				}
116
				}
117
				return false;
117
				return false;
118
			}
118
			}
119
			
119
			
120
			function afficher() {
120
			function afficher() {
121
				document.getElementById('panneau-lateral').style.display = 'block';
121
				document.getElementById('panneau-lateral').style.display = 'block';
122
				document.getElementById('pl-ouverture').style.display = 'none';
122
				document.getElementById('pl-ouverture').style.display = 'none';
123
				google.maps.event.trigger(map, 'resize');
123
				google.maps.event.trigger(map, 'resize');
124
			};
124
			};
125
			
125
			
126
			function cacher() {
126
			function cacher() {
127
				document.getElementById('panneau-lateral').style.display = 'none';
127
				document.getElementById('panneau-lateral').style.display = 'none';
128
				document.getElementById('pl-ouverture').style.display = 'block';
128
				document.getElementById('pl-ouverture').style.display = 'block';
129
				google.maps.event.trigger(map, 'resize');
129
				google.maps.event.trigger(map, 'resize');
130
			};
130
			};
131
 
131
 
132
			function ouvrirPopUp(url, nom) {
132
			function ouvrirPopUp(url, nom) {
133
				window.open(url, nom, 'directories=no, location=no, menubar=no, scrollbars=yes, status=no, toolbar=no, width=650,height=600');
133
				window.open(url, nom, 'directories=no, location=no, menubar=no, scrollbars=yes, status=no, toolbar=no, width=650,height=600');
134
			};
134
			};
135
			
135
			
136
			function filtrerParTaxon(ntAFiltrer) {
136
			function filtrerParTaxon(ntAFiltrer) {
-
 
137
				infoBulle.close();
137
				$('#taxon-'+nt).removeClass('taxon-actif');
138
				$('#taxon-'+nt).removeClass('taxon-actif');
138
				if (nt == ntAFiltrer) {
139
				if (nt == ntAFiltrer) {
139
					nt = '*';
140
					nt = '*';
140
					executerMarkerClusterer(pointsOrigine, boundsOrigine);
141
					executerMarkerClusterer(pointsOrigine, boundsOrigine);
141
				} else {
142
				} else {
142
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
143
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
143
					$.getJSON(url, function (observations) {
144
					$.getJSON(url, function (observations) {
144
						obs = observations;
145
						obs = observations;
145
						nt = ntAFiltrer;
146
						nt = ntAFiltrer;
146
						$('#taxon-'+nt).addClass('taxon-actif');
147
						$('#taxon-'+nt).addClass('taxon-actif');
147
						refreshMap();
148
						refreshMap();
148
					});
149
					});
149
				}
150
				}
150
			};
151
			};
151
			
152
			
152
			function initialize() {
153
			function initialize() {
153
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
154
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
154
 
155
 
155
				// Ajout des limites communales sur la carte
156
				// Ajout des limites communales sur la carte
156
				<? if (isset($url_limites_communales)) : ?>
157
				<? if (isset($url_limites_communales)) : ?>
157
					<? foreach ($url_limites_communales as $url) : ?>
158
					<? foreach ($url_limites_communales as $url) : ?>
158
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
159
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
159
						ctaLayer.setMap(map);
160
						ctaLayer.setMap(map);
160
					<? endforeach; ?>
161
					<? endforeach; ?>
161
				<? endif; ?>
162
				<? endif; ?>
162
				
163
				
163
				// Create the DIV to hold the control and call the HomeControl()
164
				// Create the DIV to hold the control and call the HomeControl()
164
				// constructor passing in this DIV.
165
				// constructor passing in this DIV.
165
				
166
				
166
				var panneauDiv = document.getElementById('panneau-lateral');
167
				var panneauDiv = document.getElementById('panneau-lateral');
167
				panneauDiv.index = 0;
168
				panneauDiv.index = 0;
168
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
169
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
169
 
170
 
170
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
171
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
171
				ouverturePanneauDiv.index = 0;
172
				ouverturePanneauDiv.index = 0;
172
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
173
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
173
 
174
 
174
				
175
				
175
				var ouvertureDiv = document.getElementById('pl-ouverture');
176
				var ouvertureDiv = document.getElementById('pl-ouverture');
176
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
177
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
177
 
178
 
178
				var fermetureDiv = document.getElementById('pl-fermeture');
179
				var fermetureDiv = document.getElementById('pl-fermeture');
179
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
180
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
180
				
181
				
181
				cacher();
182
				cacher();
182
				refreshMap();
183
				refreshMap();
183
			}
184
			}
184
		//]]>
185
		//]]>
185
		</script>
186
		</script>
186
		
187
		
187
		<!-- CSS -->
188
		<!-- CSS -->
188
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
189
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
189
	</head>
190
	</head>
190
 
191
 
191
	<body onload="initialize()">
192
	<body onload="initialize()">
192
		<div id="zone-titre">
193
		<div id="zone-titre">
193
			<h1 id="carte-titre">
194
			<h1 id="carte-titre">
194
				Observations issues des membres de <a href="http://www.tela-botanica.org/" onclick="window.open(this.href); arreter(event); return false;">Tela Botanica</a>
195
				Observations issues des membres de <a href="http://www.tela-botanica.org/" onclick="window.open(this.href); arreter(event); return false;">Tela Botanica</a>
195
			</h1>
196
			</h1>
196
			<div id="zone-info">
197
			<div id="zone-info">
197
				<a href="<?=$url_base?>carto?carte=avertissement" onClick="ouvrirPopUp('<?=$url_base?>carto?carte=avertissement', 'Avertissement'); arreter(event); return false;">
198
				<a href="<?=$url_base?>carto?carte=avertissement" onClick="ouvrirPopUp('<?=$url_base?>carto?carte=avertissement', 'Avertissement'); arreter(event); return false;">
198
					<img src="<?=$url_base?>modules/carto/squelettes/images/information.png" 
199
					<img src="<?=$url_base?>modules/carto/squelettes/images/information.png" 
199
						alt="Avertissements" title="Avertissements &amp; informations" />
200
						alt="Avertissements" title="Avertissements &amp; informations" />
200
				</a>
201
				</a>
201
			</div>
202
			</div>
202
		</div>
203
		</div>
203
		<div id="panneau-lateral">
204
		<div id="panneau-lateral">
204
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
205
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
205
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
206
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
206
			<div id="pl-entete">
207
			<div id="pl-entete">
207
				<h2>Filtre par plante</h2>	
208
				<h2>Filtre par plante</h2>	
-
 
209
				<p>
208
				<p>Cliquer sur un nom de plante pour filtrer les observations sur la carte.</p>
210
					Cliquez sur un nom de plante pour filtrer les observations sur la carte.<br /> 
-
 
211
					Pour revenir à l'état initial, cliquez à nouveau sur le nom sélectionné.
-
 
212
				</p>
209
			</div>
213
			</div>
210
			<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
214
			<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
211
				<ol id="taxons">
215
				<ol id="taxons">
212
				<? foreach ($taxons as $taxon) : ?>
216
				<? foreach ($taxons as $taxon) : ?>
213
					<li id="taxon-<?=$taxon['nt']?>">
217
					<li id="taxon-<?=$taxon['nt']?>">
214
						<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
218
						<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
215
							<?=html_entity_decode($taxon['nom'])?> 
219
							<?=$taxon['nom']?> 
216
						</a>
220
						</a>
217
					</li>
221
					</li>
218
				<? endforeach; ?>
222
				<? endforeach; ?>
219
				</ol>
223
				</ol>
220
			</div>
224
			</div>
221
		</div>
225
		</div>
222
		<div id="carte"></div>
226
		<div id="carte"></div>
223
		
227
		
224
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
228
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
225
		<div id="chargement">
229
		<div id="chargement">
226
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
230
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
227
			<p>Chargement des observations en cours...</p>
231
			<p>Chargement des observations en cours...</p>
228
		</div>
232
		</div>
229
	</body>
233
	</body>
230
</html>
234
</html>