Subversion Repositories eFlore/Applications.cel

Rev

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

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