Subversion Repositories eFlore/Applications.cel

Rev

Rev 479 | Rev 491 | 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[
36 
			var markerClusterer = null;
37 
			var map = null;
469 jpm 38 
			var infoBulle = new google.maps.InfoWindow();
479 jpm 39 
			google.maps.event.addListener(infoBulle, 'domready', function() {
40 
				if ($("#observations table").get() != 'undefined') {
41 
					$("#observations table").tablesorter();
42 
				}
43 
			});
439 jpm 44 
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
424 jpm 45 
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
46 
			var carteOptions = {
47 
				zoom: 6,
48 
				center: carteCentre,
49 
				mapTypeId: google.maps.MapTypeId.ROADMAP
50 
			};
463 delphine 51 
			var ctaLayer = null;
469 jpm 52 
 
424 jpm 53 
			function refreshMap() {
54 
				if (markerClusterer) {
55 
					markerClusterer.clearMarkers();
56 
				}
57 
 
439 jpm 58 
				var points = [];
59 
				var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
424 jpm 60 
				for (var i = 0; i < obs.nombre; ++i) {
439 jpm 61 
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
62 
					var point = new google.maps.Marker({
63 
						position: maLatLng,
435 jpm 64 
						map: map,
439 jpm 65 
						icon: pointImage,
469 jpm 66 
						stationId: obs.points[i].id
424 jpm 67 
					});
435 jpm 68 
 
439 jpm 69 
					google.maps.event.addListener(point, 'click', function() {
469 jpm 70 
						afficherMsgChargement();
439 jpm 71 
						infoBulle.open(map, this);
479 jpm 72 
						chargerFormatObs(this.stationId, '*');
435 jpm 73 
					});
74 
 
439 jpm 75 
					points.push(point);
424 jpm 76 
				}
77 
 
439 jpm 78 
				markerClusterer = new MarkerClusterer(map, points);
469 jpm 79 
			}
463 delphine 80 
 
469 jpm 81 
			function afficherMsgChargement() {
82 
				var chargement = document.getElementById('chargement').cloneNode(true);
83 
				chargement.setAttribute('id', 'chargement-copie');
84 
				infoBulle.setContent(chargement);
85 
			}
463 delphine 86 
 
469 jpm 87 
			function chargerFormatObs(stationId, format) {
490 jpm 88 
				var url = '<?=$url_base?>carto?carte=observations'+
89 
					'&utilisateur=<?=$utilisateur?>'+
90 
					'&projet=<?=$projet?>'+
91 
					'&num_taxon=<?=$num_taxon?>'+
92 
					'&dept=<?=$dept?>'+
93 
					'&format='+format+'&station='+stationId;
469 jpm 94 
				$.get(url, function(observations){
95 
					infoBulle.setContent(observations);
96 
				});
424 jpm 97 
			}
98 
 
469 jpm 99 
			function arreter(event) {
100 
				if (event.stopPropagation) {
101 
					event.stopPropagation();
102 
				}
103 
				return false;
104 
			}
105 
 
435 jpm 106 
			function afficher() {
107 
				document.getElementById('panneau-lateral').style.display = 'block';
108 
				document.getElementById('pl-ouverture').style.display = 'none';
109 
				google.maps.event.trigger(map, 'resize');
110 
			};
469 jpm 111 
 
435 jpm 112 
			function cacher() {
113 
				document.getElementById('panneau-lateral').style.display = 'none';
114 
				document.getElementById('pl-ouverture').style.display = 'block';
115 
				google.maps.event.trigger(map, 'resize');
116 
			};
490 jpm 117 
 
118 
			function filtrerParTaxon(nt) {
119 
				var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+nt+'?formatRetour=jsonp&callback=?';
120 
				$.getJSON(url, function (observations) {
121 
					obs = observations;
122 
					alert(obs.nombre);
123 
					refreshMap();
124 
				});
125 
			};
435 jpm 126 
 
424 jpm 127 
			function initialize() {
128 
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
463 delphine 129 
 
130 
				// Ajout des limites communales sur la carte
465 delphine 131 
				<? if (isset($url_limites_communales)) : ?>
132 
					<? foreach ($url_limites_communales as $url) : ?>
133 
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
134 
						ctaLayer.setMap(map);
135 
					<? endforeach; ?>
136 
				<? endif; ?>
435 jpm 137 
 
138 
				// Create the DIV to hold the control and call the HomeControl()
139 
				// constructor passing in this DIV.
140 
				var panneauDiv = document.getElementById('panneau-lateral');
141 
				panneauDiv.index = 0;
142 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
143 
 
144 
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
145 
				ouverturePanneauDiv.index = 0;
146 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
147 
 
148 
				var ouvertureDiv = document.getElementById('pl-ouverture');
149 
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
150 
 
151 
				var fermetureDiv = document.getElementById('pl-fermeture');
152 
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
153 
 
154 
				cacher();
424 jpm 155 
				refreshMap();
156 
			}
157 
		//]]>
158 
		</script>
440 jpm 159 
 
160 
		<!-- CSS -->
479 jpm 161 
		<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" />
424 jpm 162 
	</head>
163 
 
164 
	<body onload="initialize()">
435 jpm 165 
		<div id="panneau-lateral">
166 
			<div id="pl-entete">
167 
				<div id="pl-ouverture">Panneau >></div>
168 
				<div id="pl-fermeture"><< Fermer [x]</div>
169 
			</div>
490 jpm 170 
			<div id="pl-corps">
171 
				<ul>
172 
				<? foreach ($taxons as $taxon) : ?>
173 
					<li>
174 
						<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);">
175 
							<?=$taxon['nom']?>
176 
							<span class="famille"><?=$taxon['famille']?></span>
177 
						</a>
178 
					</li>
179 
				<? endforeach; ?>
180 
				</ul>
181 
			</div>
435 jpm 182 
		</div>
424 jpm 183 
		<div id="carte"></div>
469 jpm 184 
 
185 
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
186 
		<div id="chargement">
187 
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
188 
			<p>Chargement des observations en cours...</p>
189 
		</div>
424 jpm 190 
	</body>
191 
</html>