Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Details | 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
465 delphine 94
				<? if (isset($url_limites_communales)) : ?>
95
					<? foreach ($url_limites_communales as $url) : ?>
96
						ctaLayer = new google.maps.KmlLayer('<?=$url?>');
97
						ctaLayer.setMap(map);
98
					<? endforeach; ?>
99
				<? endif; ?>
435 jpm 100
 
101
				// Create the DIV to hold the control and call the HomeControl()
102
				// constructor passing in this DIV.
103
				var panneauDiv = document.getElementById('panneau-lateral');
104
				panneauDiv.index = 0;
105
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
106
 
107
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
108
				ouverturePanneauDiv.index = 0;
109
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
110
 
111
				var ouvertureDiv = document.getElementById('pl-ouverture');
112
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
113
 
114
				var fermetureDiv = document.getElementById('pl-fermeture');
115
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
116
 
117
				cacher();
424 jpm 118
				refreshMap();
119
			}
120
		//]]>
121
		</script>
440 jpm 122
 
123
		<!-- CSS -->
424 jpm 124
		<style type="text/css">
125
			html, body {
126
				margin:0;
127
				padding:0;
128
				height: 100%;
435 jpm 129
				font-family:Arial;
130
				font-size:12px;
131
			}
424 jpm 132
			#carte {
133
				width:100%;
134
				height:100%;
435 jpm 135
			}
136
			.bouton {
137
				background-color:white;
138
				border:2px solid black;
139
				cursoir:pointer;
140
				text-align:center;
141
			}
142
			#panneau-lateral {
143
				width:300px;
144
				height:100%;
145
				padding:0;
146
				display:none;
147
				background-color:white;
148
				border-right:1px solid grey;
149
				box-shadow:2px 2px 6px #979797;-webkit-box-shadow:2px 2px 6px #979797;-moz-box-shadow:2px 2px 6px #979797;
150
			}
151
			#pl-entete {
152
				text-align:right;
153
			}
154
			#pl-corps {
155
				height:86%;
156
				overflow:auto;
157
				padding:5px;
158
			}
159
			#pl-ouverture, #pl-fermeture {
160
				position:relative;
161
				top:0;
162
				width:95px;
163
				background-color:#FFF;
164
				text-align:center;
165
				border:1px solid black;
166
				cursor:pointer;
167
			}
168
			#pl-ouverture {
169
				border-left:0;
170
			}
171
			#pl-fermeture {
172
				border-right:0;
173
				float:right;
174
			}
424 jpm 175
		</style>
176
	</head>
177
 
178
	<body onload="initialize()">
435 jpm 179
		<div id="panneau-lateral">
180
			<div id="pl-entete">
181
				<div id="pl-ouverture">Panneau >></div>
182
				<div id="pl-fermeture"><< Fermer [x]</div>
183
			</div>
184
			<div id="pl-corps"></div>
185
		</div>
424 jpm 186
		<div id="carte"></div>
187
	</body>
188
</html>