Subversion Repositories eFlore/Applications.cel

Rev

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

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