Subversion Repositories eFlore/Applications.cel

Rev

Rev 465 | Rev 479 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 465 Rev 469
Line 20... Line 20...
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" />
Line 23... Line 23...
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&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>
- 
 
 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> -->
Line 26... Line 29...
26 
		<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
 29 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/tablesorter/2.0.5/jquery.tablesorter.min.js"></script>
27
30
Line 28... Line 31...
28 
		<!-- Javascript : données -->
 31 
		<!-- Javascript : données -->
29 
		<script src="<?=$url_json?>" type="text/javascript"></script>
 32 
		<script src="<?=$url_json?>" type="text/javascript"></script>
30
33
31 
		<!-- Javascript : appli carto -->
 34 
		<!-- Javascript : appli carto -->
32 
		<script type="text/javascript">
 35 
		<script type="text/javascript">
- 
 
 36 
		//<![CDATA[
33 
		//<![CDATA[
 37 
			var markerClusterer = null;
34 
			var markerClusterer = null;
 38 
			var map = null;
35 
			var map = null;
 39 
			var infoBulle = new google.maps.InfoWindow();
36 
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
 40 
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
37 
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
 41 
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
38 
			var carteOptions = {
 42 
			var carteOptions = {
39 
				zoom: 6,
 43 
				zoom: 6,
40 
				center: carteCentre,
 44 
				center: carteCentre,
41 
				mapTypeId: google.maps.MapTypeId.ROADMAP
 45 
				mapTypeId: google.maps.MapTypeId.ROADMAP
42 
			};
 46 
			};
43 
			var ctaLayer = null;
 47 
			var ctaLayer = null;
44
48 
 
45 
			function refreshMap() {
 49 
			function refreshMap() {
Line 46... Line 50...
46 
				if (markerClusterer) {
 50 
				if (markerClusterer) {
47 
					markerClusterer.clearMarkers();
 51 
					markerClusterer.clearMarkers();
48 
				}
 - 
 
49 
 
 52 
				}
50 
				var points = [];
 53 
 
51 
				var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
 54 
				var points = [];
52 
				var infoBulle = new google.maps.InfoWindow();
 55 
				var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
53 
				for (var i = 0; i < obs.nombre; ++i) {
 56 
				for (var i = 0; i < obs.nombre; ++i) {
54 
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
 57 
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
55 
					var point = new google.maps.Marker({
 58 
					var point = new google.maps.Marker({
56 
						position: maLatLng,
 59 
						position: maLatLng,
Line 57... Line 60...
57 
						map: map,
 60 
						map: map,
58 
						icon: pointImage,
 - 
 
59 
						title: 'test'
 61 
						icon: pointImage,
60 
					});
 62 
						stationId: obs.points[i].id
- 
 
 63 
					});
- 
 
 64 
 
- 
 
 65 
					google.maps.event.addListener(point, 'click', function() {
- 
 
 66 
						afficherMsgChargement();
- 
 
 67 
						infoBulle.open(map, this);
- 
 
 68 
 
- 
 
 69 
						var station = this.stationId;
61 
 
 70 
						var urlObs = 'http://localhost/cel-widget/carto?carte=observations&station='+station;
Line 62... Line 71...
62 
					google.maps.event.addListener(point, 'click', function() {
 71
63 
						var contenu = this.getPosition().toString();
 72 
						$.get(urlObs, function(observations){
Line 64... Line 73...
64 
						infoBulle.setContent(contenu);
 73 
							infoBulle.setContent(observations);
65 
						infoBulle.open(map, this);
 - 
 
66 
					});
 - 
 
67
- 
 
68 
					points.push(point);
 74 
						 });
Line -... Line 75...
- 
 
 75 
					});
- 
 
 76
- 
 
 77 
					points.push(point);
- 
 
 78 
				}
- 
 
 79 
 
- 
 
 80 
				markerClusterer = new MarkerClusterer(map, points);
- 
 
 81 
			}
- 
 
 82 
 
- 
 
 83 
			function afficherMsgChargement() {
- 
 
 84 
				var chargement = document.getElementById('chargement').cloneNode(true);
- 
 
 85 
				chargement.setAttribute('id', 'chargement-copie');
- 
 
 86 
				infoBulle.setContent(chargement);
- 
 
 87 
			}
- 
 
 88 
 
- 
 
 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 
				});
- 
 
 94 
			}
69 
				}
 95 
 
70 
 
 96 
			function arreter(event) {
71 
				markerClusterer = new MarkerClusterer(map, points);
 97 
				if (event.stopPropagation) {
72 
 
 98 
					event.stopPropagation();
73 
 
 99 
				}
74
100 
				return false;
- 
 
 101 
			}
75 
			}
 102
76 
 
 103 
			function afficher() {
77 
			function afficher() {
 104 
				document.getElementById('panneau-lateral').style.display = 'block';
78 
				document.getElementById('panneau-lateral').style.display = 'block';
 105 
				document.getElementById('pl-corps').innerHTML = 'Afficher';
79 
				document.getElementById('pl-corps').innerHTML = 'Afficher';
 106 
				document.getElementById('pl-ouverture').style.display = 'none';
Line 134... Line 161...
134 
				height:100%;
 161 
				height:100%;
135 
			}
 162 
			}
136 
			.bouton {
 163 
			.bouton {
137 
				background-color:white;
 164 
				background-color:white;
138 
				border:2px solid black;
 165 
				border:2px solid black;
139 
				cursoir:pointer;
 166 
				cursor:pointer;
140 
				text-align:center;
 167 
				text-align:center;
141 
			}
 168 
			}
- 
 
 169 
			#chargement {
- 
 
 170 
				display:none;
- 
 
 171 
			}
- 
 
 172 
			#chargement-copie img{
- 
 
 173 
				display:block;
- 
 
 174 
				margin:auto;
- 
 
 175 
			}
142 
			#panneau-lateral {
 176 
			#panneau-lateral {
143 
				width:300px;
 177 
				width:300px;
144 
				height:100%;
 178 
				height:100%;
145 
				padding:0;
 179 
				padding:0;
146 
				display:none;
 180 
				display:none;
Line 182... Line 216...
182 
				<div id="pl-fermeture"><< Fermer [x]</div>
 216 
				<div id="pl-fermeture"><< Fermer [x]</div>
183 
			</div>
 217 
			</div>
184 
			<div id="pl-corps"></div>
 218 
			<div id="pl-corps"></div>
185 
		</div>
 219 
		</div>
186 
		<div id="carte"></div>
 220 
		<div id="carte"></div>
- 
 
 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>
187 
	</body>
 227 
	</body>
188 
</html>
 228 
</html>
189 

            229