WebSVN – eFlore/Applications.cel – Diff – /trunk/widget/modules/cartopoint/squelettes/carte_defaut.tpl.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 	<head>
 		<title>Observations publiques du CEL - Tela Botanica</title>
 		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 		<meta http-equiv="Content-style-type" content="text/css" />
 		<meta http-equiv="Content-script-type" content="text/javascript" />
 		<meta http-equiv="Content-language" content="fr" />
 		<meta name="revisit-after" content="15 days" />
         <meta name="robots" content="index,follow" />
         <meta name="author" content="Delphine CAUQUIL, Jean-Pascal MILCENT" />
         <meta name="keywords" content="Tela Botanica, cartographie, CEL" />
         <meta name="description" content="Widget de cartographie des observations publiques de plantes saisies dans le Carnet en Ligne (CEL)" />
 		<!-- Spécial mobile -->
 		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 		<!-- Favicones -->
 		<link rel="icon" type="image/png" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.png" />
 		<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.ico" />
 		<!-- Javascript : bibliothèques -->
-		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
+		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script>
 		<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
+		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/<?=$jquery_version?>/jquery-<?=$jquery_version?>.min.js"></script>
+		<!-- <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> -->
+		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/tablesorter/2.0.5/jquery.tablesorter.min.js"></script>
 		<!-- Javascript : données -->
 		<script src="<?=$url_json?>" type="text/javascript"></script>
 		<!-- Javascript : appli carto -->
 		<script type="text/javascript">
 		//<![CDATA[
 			var markerClusterer = null;
 			var map = null;
+			var infoBulle = new google.maps.InfoWindow();
 			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
 			var carteCentre = new google.maps.LatLng(46.4, 3.10);
 			var carteOptions = {
 				zoom: 6,
 				center: carteCentre,
 				mapTypeId: google.maps.MapTypeId.ROADMAP
 			};
 			var ctaLayer = null;
 			function refreshMap() {
 				if (markerClusterer) {
 					markerClusterer.clearMarkers();
+				}
 				var points = [];
 				var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
-				var infoBulle = new google.maps.InfoWindow();
 				for (var i = 0; i < obs.nombre; ++i) {
 					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
 					var point = new google.maps.Marker({
 						position: maLatLng,
 						map: map,
 						icon: pointImage,
-						title: 'test'
+						stationId: obs.points[i].id
 					});
 					google.maps.event.addListener(point, 'click', function() {
-						var contenu = this.getPosition().toString();
-						infoBulle.setContent(contenu);
+						afficherMsgChargement();
 						infoBulle.open(map, this);
+						var station = this.stationId;
+						var urlObs = 'http://localhost/cel-widget/carto?carte=observations&station='+station;
+						$.get(urlObs, function(observations){
+							infoBulle.setContent(observations);
+						 });
 					});
 					points.push(point);
+				}
 				markerClusterer = new MarkerClusterer(map, points);
+			}
+			function afficherMsgChargement() {
+				var chargement = document.getElementById('chargement').cloneNode(true);
+				chargement.setAttribute('id', 'chargement-copie');
+				infoBulle.setContent(chargement);
+			}
+			function chargerFormatObs(stationId, format) {
+				var url = 'http://localhost/cel-widget/carto?carte=observations&format='+format+'&station='+stationId;
+				$.get(url, function(observations){
+					infoBulle.setContent(observations);
+				});
+			}
+			function arreter(event) {
+				if (event.stopPropagation) {
+					event.stopPropagation();
+				}
+				return false;
+			}
 			function afficher() {
 				document.getElementById('panneau-lateral').style.display = 'block';
 				document.getElementById('pl-corps').innerHTML = 'Afficher';
 				document.getElementById('pl-ouverture').style.display = 'none';
 				google.maps.event.trigger(map, 'resize');
 			};
 			function cacher() {
 				document.getElementById('panneau-lateral').style.display = 'none';
 				document.getElementById('pl-corps').innerHTML = 'Cacher';
 				document.getElementById('pl-ouverture').style.display = 'block';
 				google.maps.event.trigger(map, 'resize');
 			};
 			function initialize() {
 				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
 				// Ajout des limites communales sur la carte
 				<? if (isset($url_limites_communales)) : ?>
 					<? foreach ($url_limites_communales as $url) : ?>
 						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
 						ctaLayer.setMap(map);
 					<? endforeach; ?>
 				<? endif; ?>
 				// Create the DIV to hold the control and call the HomeControl()
 				// constructor passing in this DIV.
 				var panneauDiv = document.getElementById('panneau-lateral');
 				panneauDiv.index = 0;
 				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
 				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
 				ouverturePanneauDiv.index = 0;
 				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
 				var ouvertureDiv = document.getElementById('pl-ouverture');
 				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
 				var fermetureDiv = document.getElementById('pl-fermeture');
 				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
 				cacher();
 				refreshMap();
+			}
 		//]]>
 		</script>
 		<!-- CSS -->
 		<style type="text/css">
 			html, body {
 				margin:0;
 				padding:0;
 				height: 100%;
 				font-family:Arial;
 				font-size:12px;
+			}
 			#carte {
 				width:100%;
 				height:100%;
+			}
 			.bouton {
 				background-color:white;
 				border:2px solid black;
-				cursoir:pointer;
+				cursor:pointer;
 				text-align:center;
+			}
+			#chargement {
+				display:none;
+			}
+			#chargement-copie img{
+				display:block;
+				margin:auto;
+			}
 			#panneau-lateral {
 				width:300px;
 				height:100%;
 				padding:0;
 				display:none;
 				background-color:white;
 				border-right:1px solid grey;
 				box-shadow:2px 2px 6px #979797;-webkit-box-shadow:2px 2px 6px #979797;-moz-box-shadow:2px 2px 6px #979797;
+			}
 			#pl-entete {
 				text-align:right;
+			}
 			#pl-corps {
 				height:86%;
 				overflow:auto;
 				padding:5px;
+			}
 			#pl-ouverture, #pl-fermeture {
 				position:relative;
 				top:0;
 				width:95px;
 				background-color:#FFF;
 				text-align:center;
 				border:1px solid black;
 				cursor:pointer;
+			}
 			#pl-ouverture {
 				border-left:0;
+			}
 			#pl-fermeture {
 				border-right:0;
 				float:right;
+			}
 		</style>
 	</head>
 	<body onload="initialize()">
 		<div id="panneau-lateral">
 			<div id="pl-entete">
 				<div id="pl-ouverture">Panneau >></div>
 				<div id="pl-fermeture"><< Fermer [x]</div>
 			</div>
 			<div id="pl-corps"></div>
 		</div>
 		<div id="carte"></div>
+		<!-- Blocs chargés à la demande : par défaut avec un style display à none -->
+		<div id="chargement">
+			<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." />
+			<p>Chargement des observations en cours...</p>
+		</div>
 	</body>
 </html>

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/cartopoint/squelettes/carte_defaut.tpl.html @ 1899 – Rev 465 → 469