Subversion Repositories eFlore/Applications.cel

Rev

Rev 440 | Rev 465 | 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 -->
435 jpm 25 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
427 jpm 26 
		<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
424 jpm 27 
 
440 jpm 28 
		<!-- Javascript : données -->
424 jpm 29 
		<script src="<?=$url_json?>" type="text/javascript"></script>
440 jpm 30 
 
31 
		<!-- Javascript : appli carto -->
424 jpm 32 
		<script type="text/javascript">
33 
		//<![CDATA[
34 
			var markerClusterer = null;
35 
			var map = null;
439 jpm 36 
			var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
424 jpm 37 
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
38 
			var carteOptions = {
39 
				zoom: 6,
40 
				center: carteCentre,
41 
				mapTypeId: google.maps.MapTypeId.ROADMAP
42 
			};
463 delphine 43 
			var ctaLayer = null;
424 jpm 44 
 
45 
			function refreshMap() {
46 
				if (markerClusterer) {
47 
					markerClusterer.clearMarkers();
48 
				}
49 
 
439 jpm 50 
				var points = [];
51 
				var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
52 
				var infoBulle = new google.maps.InfoWindow();
424 jpm 53 
				for (var i = 0; i < obs.nombre; ++i) {
439 jpm 54 
					var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
55 
					var point = new google.maps.Marker({
56 
						position: maLatLng,
435 jpm 57 
						map: map,
439 jpm 58 
						icon: pointImage,
435 jpm 59 
						title: 'test'
424 jpm 60 
					});
435 jpm 61 
 
439 jpm 62 
					google.maps.event.addListener(point, 'click', function() {
63 
						var contenu = this.getPosition().toString();
64 
						infoBulle.setContent(contenu);
65 
						infoBulle.open(map, this);
435 jpm 66 
					});
67 
 
439 jpm 68 
					points.push(point);
424 jpm 69 
				}
70 
 
439 jpm 71 
				markerClusterer = new MarkerClusterer(map, points);
463 delphine 72 
 
73 
 
74 
 
424 jpm 75 
			}
76 
 
435 jpm 77 
			function afficher() {
78 
				document.getElementById('panneau-lateral').style.display = 'block';
79 
				document.getElementById('pl-corps').innerHTML = 'Afficher';
80 
				document.getElementById('pl-ouverture').style.display = 'none';
81 
				google.maps.event.trigger(map, 'resize');
82 
			};
83 
			function cacher() {
84 
				document.getElementById('panneau-lateral').style.display = 'none';
85 
				document.getElementById('pl-corps').innerHTML = 'Cacher';
86 
				document.getElementById('pl-ouverture').style.display = 'block';
87 
				google.maps.event.trigger(map, 'resize');
88 
			};
89 
 
424 jpm 90 
			function initialize() {
91 
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
463 delphine 92 
 
93 
				// Ajout des limites communales sur la carte
94 
				<? foreach ($url_limites_communales as $url) : ?>
95 
					ctaLayer = new google.maps.KmlLayer('<?=$url?>');
96 
					ctaLayer.setMap(map);
97 
				<? endforeach; ?>
435 jpm 98 
 
99 
				// Create the DIV to hold the control and call the HomeControl()
100 
				// constructor passing in this DIV.
101 
				var panneauDiv = document.getElementById('panneau-lateral');
102 
				panneauDiv.index = 0;
103 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
104 
 
105 
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
106 
				ouverturePanneauDiv.index = 0;
107 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
108 
 
109 
				var ouvertureDiv = document.getElementById('pl-ouverture');
110 
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
111 
 
112 
				var fermetureDiv = document.getElementById('pl-fermeture');
113 
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
114 
 
115 
				cacher();
424 jpm 116 
				refreshMap();
117 
			}
118 
		//]]>
119 
		</script>
440 jpm 120 
 
121 
		<!-- CSS -->
424 jpm 122 
		<style type="text/css">
123 
			html, body {
124 
				margin:0;
125 
				padding:0;
126 
				height: 100%;
435 jpm 127 
				font-family:Arial;
128 
				font-size:12px;
129 
			}
424 jpm 130 
			#carte {
131 
				width:100%;
132 
				height:100%;
435 jpm 133 
			}
134 
			.bouton {
135 
				background-color:white;
136 
				border:2px solid black;
137 
				cursoir:pointer;
138 
				text-align:center;
139 
			}
140 
			#panneau-lateral {
141 
				width:300px;
142 
				height:100%;
143 
				padding:0;
144 
				display:none;
145 
				background-color:white;
146 
				border-right:1px solid grey;
147 
				box-shadow:2px 2px 6px #979797;-webkit-box-shadow:2px 2px 6px #979797;-moz-box-shadow:2px 2px 6px #979797;
148 
			}
149 
			#pl-entete {
150 
				text-align:right;
151 
			}
152 
			#pl-corps {
153 
				height:86%;
154 
				overflow:auto;
155 
				padding:5px;
156 
			}
157 
			#pl-ouverture, #pl-fermeture {
158 
				position:relative;
159 
				top:0;
160 
				width:95px;
161 
				background-color:#FFF;
162 
				text-align:center;
163 
				border:1px solid black;
164 
				cursor:pointer;
165 
			}
166 
			#pl-ouverture {
167 
				border-left:0;
168 
			}
169 
			#pl-fermeture {
170 
				border-right:0;
171 
				float:right;
172 
			}
424 jpm 173 
		</style>
174 
	</head>
175 
 
176 
	<body onload="initialize()">
435 jpm 177 
		<div id="panneau-lateral">
178 
			<div id="pl-entete">
179 
				<div id="pl-ouverture">Panneau >></div>
180 
				<div id="pl-fermeture"><< Fermer [x]</div>
181 
			</div>
182 
			<div id="pl-corps"></div>
183 
		</div>
424 jpm 184 
		<div id="carte"></div>
185 
	</body>
186 
</html>