Subversion Repositories eFlore/Applications.cel

Rev

Rev 493 | Rev 501 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
424 jpm 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">
3
	<head>
440 jpm 4
		<title>Observations publiques du CEL - Tela Botanica</title>
424 jpm 5
 
6
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
440 jpm 7
		<meta http-equiv="Content-style-type" content="text/css" />
8
		<meta http-equiv="Content-script-type" content="text/javascript" />
9
		<meta http-equiv="Content-language" content="fr" />
10
 
11
		<meta name="revisit-after" content="15 days" />
12
        <meta name="robots" content="index,follow" />
13
        <meta name="author" content="Delphine CAUQUIL, Jean-Pascal MILCENT" />
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)" />
16
 
17
		<!-- Spécial mobile -->
424 jpm 18
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
440 jpm 19
 
20
		<!-- Favicones -->
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" />
424 jpm 23
 
440 jpm 24
		<!-- Javascript : bibliothèques -->
469 jpm 25
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script>
427 jpm 26
		<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
469 jpm 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>
424 jpm 29
 
440 jpm 30
		<!-- Javascript : données -->
424 jpm 31
		<script src="<?=$url_json?>" type="text/javascript"></script>
440 jpm 32
 
33
		<!-- Javascript : appli carto -->
424 jpm 34
		<script type="text/javascript">
35
		//<![CDATA[
492 jpm 36
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
37
			var pointsOrigine = null;
424 jpm 38
			var markerClusterer = null;
39
			var map = null;
491 jpm 40
			var nt = '<?=$num_taxon?>';
469 jpm 41
			var infoBulle = new google.maps.InfoWindow();
479 jpm 42
			google.maps.event.addListener(infoBulle, 'domready', function() {
43
				if ($("#observations table").get() != 'undefined') {
44
					$("#observations table").tablesorter();
45
				}
46
			});
424 jpm 47
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
48
			var carteOptions = {
49
				zoom: 6,
50
				center: carteCentre,
51
				mapTypeId: google.maps.MapTypeId.ROADMAP
52
			};
463 delphine 53
			var ctaLayer = null;
469 jpm 54
 
424 jpm 55
			function refreshMap() {
439 jpm 56
				var points = [];
424 jpm 57
				for (var i = 0; i < obs.nombre; ++i) {
439 jpm 58
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
493 jpm 59
					var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
439 jpm 60
					var point = new google.maps.Marker({
61
						position: maLatLng,
435 jpm 62
						map: map,
439 jpm 63
						icon: pointImage,
469 jpm 64
						stationId: obs.points[i].id
424 jpm 65
					});
435 jpm 66
 
439 jpm 67
					google.maps.event.addListener(point, 'click', function() {
469 jpm 68
						afficherMsgChargement();
439 jpm 69
						infoBulle.open(map, this);
479 jpm 70
						chargerFormatObs(this.stationId, '*');
435 jpm 71
					});
72
 
439 jpm 73
					points.push(point);
424 jpm 74
				}
75
 
492 jpm 76
				if (pointsOrigine == null) {
77
					pointsOrigine = points;
78
				}
79
 
493 jpm 80
				executerMarkerClusterer(points);
492 jpm 81
			}
82
 
493 jpm 83
			function executerMarkerClusterer(points) {
492 jpm 84
				if (markerClusterer) {
85
					markerClusterer.clearMarkers();
86
				}
439 jpm 87
				markerClusterer = new MarkerClusterer(map, points);
469 jpm 88
			}
463 delphine 89
 
469 jpm 90
			function afficherMsgChargement() {
91
				var chargement = document.getElementById('chargement').cloneNode(true);
92
				chargement.setAttribute('id', 'chargement-copie');
93
				infoBulle.setContent(chargement);
94
			}
463 delphine 95
 
469 jpm 96
			function chargerFormatObs(stationId, format) {
490 jpm 97
				var url = '<?=$url_base?>carto?carte=observations'+
98
					'&utilisateur=<?=$utilisateur?>'+
99
					'&projet=<?=$projet?>'+
491 jpm 100
					'&num_taxon='+nt+
490 jpm 101
					'&dept=<?=$dept?>'+
102
					'&format='+format+'&station='+stationId;
469 jpm 103
				$.get(url, function(observations){
104
					infoBulle.setContent(observations);
105
				});
424 jpm 106
			}
107
 
469 jpm 108
			function arreter(event) {
109
				if (event.stopPropagation) {
110
					event.stopPropagation();
111
				}
112
				return false;
113
			}
114
 
435 jpm 115
			function afficher() {
116
				document.getElementById('panneau-lateral').style.display = 'block';
117
				document.getElementById('pl-ouverture').style.display = 'none';
118
				google.maps.event.trigger(map, 'resize');
119
			};
469 jpm 120
 
435 jpm 121
			function cacher() {
122
				document.getElementById('panneau-lateral').style.display = 'none';
123
				document.getElementById('pl-ouverture').style.display = 'block';
124
				google.maps.event.trigger(map, 'resize');
125
			};
490 jpm 126
 
492 jpm 127
			function filtrerParTaxon(ntAFiltrer) {
128
				$('#taxon-'+nt).removeClass('taxon-actif');
129
				if (nt == ntAFiltrer) {
130
					nt = '*';
493 jpm 131
					executerMarkerClusterer(pointsOrigine);
492 jpm 132
				} else {
133
					var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?';
134
					$.getJSON(url, function (observations) {
135
						obs = observations;
136
						nt = ntAFiltrer;
137
						$('#taxon-'+nt).addClass('taxon-actif');
138
						refreshMap();
139
					});
140
				}
490 jpm 141
			};
435 jpm 142
 
424 jpm 143
			function initialize() {
144
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
463 delphine 145
 
146
				// Ajout des limites communales sur la carte
465 delphine 147
				<? if (isset($url_limites_communales)) : ?>
148
					<? foreach ($url_limites_communales as $url) : ?>
149
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
150
						ctaLayer.setMap(map);
151
					<? endforeach; ?>
152
				<? endif; ?>
435 jpm 153
 
154
				// Create the DIV to hold the control and call the HomeControl()
155
				// constructor passing in this DIV.
156
				var panneauDiv = document.getElementById('panneau-lateral');
157
				panneauDiv.index = 0;
158
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
159
 
160
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
161
				ouverturePanneauDiv.index = 0;
162
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
163
 
164
				var ouvertureDiv = document.getElementById('pl-ouverture');
165
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
166
 
167
				var fermetureDiv = document.getElementById('pl-fermeture');
168
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
169
 
170
				cacher();
424 jpm 171
				refreshMap();
172
			}
173
		//]]>
174
		</script>
440 jpm 175
 
176
		<!-- CSS -->
479 jpm 177
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
424 jpm 178
	</head>
179
 
180
	<body onload="initialize()">
497 delphine 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"/>
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>
435 jpm 188
		<div id="panneau-lateral">
492 jpm 189
			<div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
190
			<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div>
435 jpm 191
			<div id="pl-entete">
492 jpm 192
				<h2>Filtre par plante</h2>
193
				<p>Cliquer sur un nom de plante pour filtrer les observations sur la carte.</p>
435 jpm 194
			</div>
492 jpm 195
			<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});">
196
				<ol id="taxons">
490 jpm 197
				<? foreach ($taxons as $taxon) : ?>
492 jpm 198
					<li id="taxon-<?=$taxon['nt']?>">
199
						<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>">
497 delphine 200
							<?=html_entity_decode($taxon['nom'])?>
490 jpm 201
						</a>
202
					</li>
203
				<? endforeach; ?>
491 jpm 204
				</ol>
490 jpm 205
			</div>
435 jpm 206
		</div>
424 jpm 207
		<div id="carte"></div>
469 jpm 208
 
209
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
210
		<div id="chargement">
211
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
212
			<p>Chargement des observations en cours...</p>
213
		</div>
424 jpm 214
	</body>
215
</html>