Subversion Repositories eFlore/Applications.cel

Rev

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

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