Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 493 Rev 497
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 markerClusterer = null;
38
			var markerClusterer = null;
39
			var map = null;
39
			var map = null;
40
			var nt = '<?=$num_taxon?>';
40
			var nt = '<?=$num_taxon?>';
41
			var infoBulle = new google.maps.InfoWindow();
41
			var infoBulle = new google.maps.InfoWindow();
42
			google.maps.event.addListener(infoBulle, 'domready', function() {
42
			google.maps.event.addListener(infoBulle, 'domready', function() {
43
				if ($("#observations table").get() != 'undefined') {
43
				if ($("#observations table").get() != 'undefined') {
44
					$("#observations table").tablesorter();
44
					$("#observations table").tablesorter();
45
				}
45
				}
46
			});
46
			});
47
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
47
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
48
			var carteOptions = {
48
			var carteOptions = {
49
				zoom: 6,
49
				zoom: 6,
50
				center: carteCentre,
50
				center: carteCentre,
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
				for (var i = 0; i < obs.nombre; ++i) {
57
				for (var i = 0; i < obs.nombre; ++i) {
58
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
58
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
59
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
59
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
60
					var point = new google.maps.Marker({
60
					var point = new google.maps.Marker({
61
						position: maLatLng,
61
						position: maLatLng,
62
						map: map,
62
						map: map,
63
						icon: pointImage,
63
						icon: pointImage,
64
						stationId: obs.points[i].id
64
						stationId: obs.points[i].id
65
					});
65
					});
66
 
66
 
67
					google.maps.event.addListener(point, 'click', function() {
67
					google.maps.event.addListener(point, 'click', function() {
68
						afficherMsgChargement();
68
						afficherMsgChargement();
69
						infoBulle.open(map, this);
69
						infoBulle.open(map, this);
70
						chargerFormatObs(this.stationId, '*');
70
						chargerFormatObs(this.stationId, '*');
71
					});
71
					});
72
					
72
					
73
					points.push(point);
73
					points.push(point);
74
				}
74
				}
75
 
75
 
76
				if (pointsOrigine == null) {
76
				if (pointsOrigine == null) {
77
					pointsOrigine = points;
77
					pointsOrigine = points;
78
				}
78
				}
79
				
79
				
80
				executerMarkerClusterer(points);
80
				executerMarkerClusterer(points);
81
			}
81
			}
82
 
82
 
83
			function executerMarkerClusterer(points) {
83
			function executerMarkerClusterer(points) {
84
				if (markerClusterer) {
84
				if (markerClusterer) {
85
					markerClusterer.clearMarkers();
85
					markerClusterer.clearMarkers();
86
				}
86
				}
87
				markerClusterer = new MarkerClusterer(map, points);
87
				markerClusterer = new MarkerClusterer(map, points);
88
			}
88
			}
89
 
89
 
90
			function afficherMsgChargement() {
90
			function afficherMsgChargement() {
91
				var chargement = document.getElementById('chargement').cloneNode(true);
91
				var chargement = document.getElementById('chargement').cloneNode(true);
92
				chargement.setAttribute('id', 'chargement-copie');
92
				chargement.setAttribute('id', 'chargement-copie');
93
				infoBulle.setContent(chargement);
93
				infoBulle.setContent(chargement);
94
			}
94
			}
95
 
95
 
96
			function chargerFormatObs(stationId, format) {
96
			function chargerFormatObs(stationId, format) {
97
				var url = '<?=$url_base?>carto?carte=observations'+
97
				var url = '<?=$url_base?>carto?carte=observations'+
98
					'&utilisateur=<?=$utilisateur?>'+
98
					'&utilisateur=<?=$utilisateur?>'+
99
					'&projet=<?=$projet?>'+
99
					'&projet=<?=$projet?>'+
100
					'&num_taxon='+nt+
100
					'&num_taxon='+nt+
101
					'&dept=<?=$dept?>'+
101
					'&dept=<?=$dept?>'+
102
					'&format='+format+'&station='+stationId;
102
					'&format='+format+'&station='+stationId;
103
				$.get(url, function(observations){
103
				$.get(url, function(observations){
104
					infoBulle.setContent(observations);
104
					infoBulle.setContent(observations);
105
				});
105
				});
106
			}
106
			}
107
 
107
 
108
			function arreter(event) {
108
			function arreter(event) {
109
				if (event.stopPropagation) {
109
				if (event.stopPropagation) {
110
					event.stopPropagation();
110
					event.stopPropagation();
111
				}
111
				}
112
				return false;
112
				return false;
113
			}
113
			}
114
			
114
			
115
			function afficher() {
115
			function afficher() {
116
				document.getElementById('panneau-lateral').style.display = 'block';
116
				document.getElementById('panneau-lateral').style.display = 'block';
117
				document.getElementById('pl-ouverture').style.display = 'none';
117
				document.getElementById('pl-ouverture').style.display = 'none';
118
				google.maps.event.trigger(map, 'resize');
118
				google.maps.event.trigger(map, 'resize');
119
			};
119
			};
120
			
120
			
121
			function cacher() {
121
			function cacher() {
122
				document.getElementById('panneau-lateral').style.display = 'none';
122
				document.getElementById('panneau-lateral').style.display = 'none';
123
				document.getElementById('pl-ouverture').style.display = 'block';
123
				document.getElementById('pl-ouverture').style.display = 'block';
124
				google.maps.event.trigger(map, 'resize');
124
				google.maps.event.trigger(map, 'resize');
125
			};
125
			};
126
 
126
 
127
			function filtrerParTaxon(ntAFiltrer) {
127
			function filtrerParTaxon(ntAFiltrer) {
128
				$('#taxon-'+nt).removeClass('taxon-actif');
128
				$('#taxon-'+nt).removeClass('taxon-actif');
129
				if (nt == ntAFiltrer) {
129
				if (nt == ntAFiltrer) {
130
					nt = '*';
130
					nt = '*';
131
					executerMarkerClusterer(pointsOrigine);
131
					executerMarkerClusterer(pointsOrigine);
132
				} else {
132
				} else {
133
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
133
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
134
					$.getJSON(url, function (observations) {
134
					$.getJSON(url, function (observations) {
135
						obs = observations;
135
						obs = observations;
136
						nt = ntAFiltrer;
136
						nt = ntAFiltrer;
137
						$('#taxon-'+nt).addClass('taxon-actif');
137
						$('#taxon-'+nt).addClass('taxon-actif');
138
						refreshMap();
138
						refreshMap();
139
					});
139
					});
140
				}
140
				}
141
			};
141
			};
142
			
142
			
143
			function initialize() {
143
			function initialize() {
144
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
144
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
145
 
145
 
146
				// Ajout des limites communales sur la carte
146
				// Ajout des limites communales sur la carte
147
				<? if (isset($url_limites_communales)) : ?>
147
				<? if (isset($url_limites_communales)) : ?>
148
					<? foreach ($url_limites_communales as $url) : ?>
148
					<? foreach ($url_limites_communales as $url) : ?>
149
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
149
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
150
						ctaLayer.setMap(map);
150
						ctaLayer.setMap(map);
151
					<? endforeach; ?>
151
					<? endforeach; ?>
152
				<? endif; ?>
152
				<? endif; ?>
153
				
153
				
154
				// Create the DIV to hold the control and call the HomeControl()
154
				// Create the DIV to hold the control and call the HomeControl()
155
				// constructor passing in this DIV.
155
				// constructor passing in this DIV.
156
				var panneauDiv = document.getElementById('panneau-lateral');
156
				var panneauDiv = document.getElementById('panneau-lateral');
157
				panneauDiv.index = 0;
157
				panneauDiv.index = 0;
158
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
158
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
159
 
159
 
160
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
160
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
161
				ouverturePanneauDiv.index = 0;
161
				ouverturePanneauDiv.index = 0;
162
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
162
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
163
 
163
 
164
				var ouvertureDiv = document.getElementById('pl-ouverture');
164
				var ouvertureDiv = document.getElementById('pl-ouverture');
165
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
165
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
166
 
166
 
167
				var fermetureDiv = document.getElementById('pl-fermeture');
167
				var fermetureDiv = document.getElementById('pl-fermeture');
168
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
168
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
169
				
169
				
170
				cacher();
170
				cacher();
171
				refreshMap();
171
				refreshMap();
172
			}
172
			}
173
		//]]>
173
		//]]>
174
		</script>
174
		</script>
175
		
175
		
176
		<!-- CSS -->
176
		<!-- CSS -->
177
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
177
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
178
	</head>
178
	</head>
179
 
179
 
180
	<body onload="initialize()">
180
	<body onload="initialize()">
-
 
181
		<h1 id="carte-titre">
-
 
182
			<img rel="icon" type="image/png" src="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.png" alt="logo Tela Botanica"/>
181
		<h1 id="carte-titre">Obsvertions issues des membres de Tela Botanica</h1>
183
			Observations issues des membres de Tela Botanica 
-
 
184
			<img src="<?=$url_base?>modules/carto/squelettes/images/information-icone.png" align="right"; 
-
 
185
			alt="Données provenant du carnet en ligne" title="Données provenant du carnet en ligne"
-
 
186
			onClick="window.open('./popup.htm', 'InfoDonnees', 'directories=no, location=no, menubar=no, scrollbars=no, status=no, toolbar=no, width=550,height=600')" />
-
 
187
		</h1>
182
		<div id="panneau-lateral">
188
		<div id="panneau-lateral">
183
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
189
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
184
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
190
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
185
			<div id="pl-entete">
191
			<div id="pl-entete">
186
				<h2>Filtre par plante</h2>	
192
				<h2>Filtre par plante</h2>	
187
				<p>Cliquer sur un nom de plante pour filtrer les observations sur la carte.</p>
193
				<p>Cliquer sur un nom de plante pour filtrer les observations sur la carte.</p>
188
			</div>
194
			</div>
189
			<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
195
			<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
190
				<ol id="taxons">
196
				<ol id="taxons">
191
				<? foreach ($taxons as $taxon) : ?>
197
				<? foreach ($taxons as $taxon) : ?>
192
					<li id="taxon-<?=$taxon['nt']?>">
198
					<li id="taxon-<?=$taxon['nt']?>">
193
						<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
199
						<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
194
							<?=$taxon['nom']?> 
200
							<?=html_entity_decode($taxon['nom'])?> 
195
						</a>
201
						</a>
196
					</li>
202
					</li>
197
				<? endforeach; ?>
203
				<? endforeach; ?>
198
				</ol>
204
				</ol>
199
			</div>
205
			</div>
200
		</div>
206
		</div>
201
		<div id="carte"></div>
207
		<div id="carte"></div>
202
		
208
		
203
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
209
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
204
		<div id="chargement">
210
		<div id="chargement">
205
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
211
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
206
			<p>Chargement des observations en cours...</p>
212
			<p>Chargement des observations en cours...</p>
207
		</div>
213
		</div>
208
	</body>
214
	</body>
209
</html>
215
</html>