Subversion Repositories eFlore/Applications.cel

Rev

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

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