Subversion Repositories eFlore/Applications.cel

Rev

Rev 465 | Rev 479 | 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/jsquery-ui/<?=$jquery-ui_version?>/js/jquery-ui-<?=$jquery-ui_version?>.custom.min.js"></script> -->
29 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/tablesorter/2.0.5/jquery.tablesorter.min.js"></script>
424 jpm 30 
 
440 jpm 31 
		<!-- Javascript : données -->
424 jpm 32 
		<script src="<?=$url_json?>" type="text/javascript"></script>
440 jpm 33 
 
34 
		<!-- Javascript : appli carto -->
424 jpm 35 
		<script type="text/javascript">
36 
		//<![CDATA[
37 
			var markerClusterer = null;
38 
			var map = null;
469 jpm 39 
			var infoBulle = new google.maps.InfoWindow();
439 jpm 40 
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
424 jpm 41 
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
42 
			var carteOptions = {
43 
				zoom: 6,
44 
				center: carteCentre,
45 
				mapTypeId: google.maps.MapTypeId.ROADMAP
46 
			};
463 delphine 47 
			var ctaLayer = null;
469 jpm 48 
 
424 jpm 49 
			function refreshMap() {
50 
				if (markerClusterer) {
51 
					markerClusterer.clearMarkers();
52 
				}
53 
 
439 jpm 54 
				var points = [];
55 
				var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
424 jpm 56 
				for (var i = 0; i < obs.nombre; ++i) {
439 jpm 57 
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
58 
					var point = new google.maps.Marker({
59 
						position: maLatLng,
435 jpm 60 
						map: map,
439 jpm 61 
						icon: pointImage,
469 jpm 62 
						stationId: obs.points[i].id
424 jpm 63 
					});
435 jpm 64 
 
439 jpm 65 
					google.maps.event.addListener(point, 'click', function() {
469 jpm 66 
						afficherMsgChargement();
439 jpm 67 
						infoBulle.open(map, this);
469 jpm 68 
 
69 
						var station = this.stationId;
70 
						var urlObs = 'http://localhost/cel-widget/carto?carte=observations&station='+station;
71 
 
72 
						$.get(urlObs, function(observations){
73 
							infoBulle.setContent(observations);
74 
						 });
435 jpm 75 
					});
76 
 
439 jpm 77 
					points.push(point);
424 jpm 78 
				}
79 
 
439 jpm 80 
				markerClusterer = new MarkerClusterer(map, points);
469 jpm 81 
			}
463 delphine 82 
 
469 jpm 83 
			function afficherMsgChargement() {
84 
				var chargement = document.getElementById('chargement').cloneNode(true);
85 
				chargement.setAttribute('id', 'chargement-copie');
86 
				infoBulle.setContent(chargement);
87 
			}
463 delphine 88 
 
469 jpm 89 
			function chargerFormatObs(stationId, format) {
90 
				var url = 'http://localhost/cel-widget/carto?carte=observations&format='+format+'&station='+stationId;
91 
				$.get(url, function(observations){
92 
					infoBulle.setContent(observations);
93 
				});
424 jpm 94 
			}
95 
 
469 jpm 96 
			function arreter(event) {
97 
				if (event.stopPropagation) {
98 
					event.stopPropagation();
99 
				}
100 
				return false;
101 
			}
102 
 
435 jpm 103 
			function afficher() {
104 
				document.getElementById('panneau-lateral').style.display = 'block';
105 
				document.getElementById('pl-corps').innerHTML = 'Afficher';
106 
				document.getElementById('pl-ouverture').style.display = 'none';
107 
				google.maps.event.trigger(map, 'resize');
108 
			};
469 jpm 109 
 
435 jpm 110 
			function cacher() {
111 
				document.getElementById('panneau-lateral').style.display = 'none';
112 
				document.getElementById('pl-corps').innerHTML = 'Cacher';
113 
				document.getElementById('pl-ouverture').style.display = 'block';
114 
				google.maps.event.trigger(map, 'resize');
115 
			};
116 
 
424 jpm 117 
			function initialize() {
118 
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
463 delphine 119 
 
120 
				// Ajout des limites communales sur la carte
465 delphine 121 
				<? if (isset($url_limites_communales)) : ?>
122 
					<? foreach ($url_limites_communales as $url) : ?>
123 
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
124 
						ctaLayer.setMap(map);
125 
					<? endforeach; ?>
126 
				<? endif; ?>
435 jpm 127 
 
128 
				// Create the DIV to hold the control and call the HomeControl()
129 
				// constructor passing in this DIV.
130 
				var panneauDiv = document.getElementById('panneau-lateral');
131 
				panneauDiv.index = 0;
132 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
133 
 
134 
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
135 
				ouverturePanneauDiv.index = 0;
136 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
137 
 
138 
				var ouvertureDiv = document.getElementById('pl-ouverture');
139 
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
140 
 
141 
				var fermetureDiv = document.getElementById('pl-fermeture');
142 
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
143 
 
144 
				cacher();
424 jpm 145 
				refreshMap();
146 
			}
147 
		//]]>
148 
		</script>
440 jpm 149 
 
150 
		<!-- CSS -->
424 jpm 151 
		<style type="text/css">
152 
			html, body {
153 
				margin:0;
154 
				padding:0;
155 
				height: 100%;
435 jpm 156 
				font-family:Arial;
157 
				font-size:12px;
158 
			}
424 jpm 159 
			#carte {
160 
				width:100%;
161 
				height:100%;
435 jpm 162 
			}
163 
			.bouton {
164 
				background-color:white;
165 
				border:2px solid black;
469 jpm 166 
				cursor:pointer;
435 jpm 167 
				text-align:center;
168 
			}
469 jpm 169 
			#chargement {
170 
				display:none;
171 
			}
172 
			#chargement-copie img{
173 
				display:block;
174 
				margin:auto;
175 
			}
435 jpm 176 
			#panneau-lateral {
177 
				width:300px;
178 
				height:100%;
179 
				padding:0;
180 
				display:none;
181 
				background-color:white;
182 
				border-right:1px solid grey;
183 
				box-shadow:2px 2px 6px #979797;-webkit-box-shadow:2px 2px 6px #979797;-moz-box-shadow:2px 2px 6px #979797;
184 
			}
185 
			#pl-entete {
186 
				text-align:right;
187 
			}
188 
			#pl-corps {
189 
				height:86%;
190 
				overflow:auto;
191 
				padding:5px;
192 
			}
193 
			#pl-ouverture, #pl-fermeture {
194 
				position:relative;
195 
				top:0;
196 
				width:95px;
197 
				background-color:#FFF;
198 
				text-align:center;
199 
				border:1px solid black;
200 
				cursor:pointer;
201 
			}
202 
			#pl-ouverture {
203 
				border-left:0;
204 
			}
205 
			#pl-fermeture {
206 
				border-right:0;
207 
				float:right;
208 
			}
424 jpm 209 
		</style>
210 
	</head>
211 
 
212 
	<body onload="initialize()">
435 jpm 213 
		<div id="panneau-lateral">
214 
			<div id="pl-entete">
215 
				<div id="pl-ouverture">Panneau >></div>
216 
				<div id="pl-fermeture"><< Fermer [x]</div>
217 
			</div>
218 
			<div id="pl-corps"></div>
219 
		</div>
424 jpm 220 
		<div id="carte"></div>
469 jpm 221 
 
222 
		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
223 
		<div id="chargement">
224 
			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
225 
			<p>Chargement des observations en cours...</p>
226 
		</div>
424 jpm 227 
	</body>
228 
</html>