Subversion Repositories eFlore/Applications.cel

Rev

Rev 427 | Rev 439 | 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>
4 
		<title>Google Maps API Example - Observations</title>
5 
 
6 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
7 
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
8 
 
435 jpm 9 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
427 jpm 10 
		<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
424 jpm 11 
 
12 
		<script src="<?=$url_json?>" type="text/javascript"></script>
13 
		<script type="text/javascript">
14 
		//<![CDATA[
15 
			var markerClusterer = null;
16 
			var map = null;
17 
			var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
18 
			var carteCentre = new google.maps.LatLng(46.4, 3.10);
19 
			var carteOptions = {
20 
				zoom: 6,
21 
				center: carteCentre,
22 
				mapTypeId: google.maps.MapTypeId.ROADMAP
23 
			};
24 
 
25 
			function refreshMap() {
26 
				if (markerClusterer) {
27 
					markerClusterer.clearMarkers();
28 
				}
29 
 
30 
				var markers = [];
31 
				var markerImage = new google.maps.MarkerImage(imageUrl,	new google.maps.Size(24, 32));
32 
 
33 
				for (var i = 0; i < obs.nombre; ++i) {
34 
					var latLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
35 
					var marker = new google.maps.Marker({
36 
						position: latLng,
435 jpm 37 
						map: map,
38 
						icon: markerImage,
39 
						title: 'test'
424 jpm 40 
					});
435 jpm 41 
 
42 
					var contenu = latLng.toString();
43 
					var infowindow = new google.maps.InfoWindow({
44 
						content: contenu
45 
					});
46 
 
47 
					google.maps.event.addListener(marker, 'click', function() {
48 
						infowindow.open(map, marker);
49 
					});
50 
 
424 jpm 51 
					markers.push(marker);
52 
				}
53 
 
54 
				markerClusterer = new MarkerClusterer(map, markers);
55 
			}
56 
 
435 jpm 57 
			function afficher() {
58 
				document.getElementById('panneau-lateral').style.display = 'block';
59 
				document.getElementById('pl-corps').innerHTML = 'Afficher';
60 
				document.getElementById('pl-ouverture').style.display = 'none';
61 
				google.maps.event.trigger(map, 'resize');
62 
			};
63 
			function cacher() {
64 
				document.getElementById('panneau-lateral').style.display = 'none';
65 
				document.getElementById('pl-corps').innerHTML = 'Cacher';
66 
				document.getElementById('pl-ouverture').style.display = 'block';
67 
				google.maps.event.trigger(map, 'resize');
68 
			};
69 
 
424 jpm 70 
			function initialize() {
71 
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
435 jpm 72 
 
73 
				// Create the DIV to hold the control and call the HomeControl()
74 
				// constructor passing in this DIV.
75 
				var panneauDiv = document.getElementById('panneau-lateral');
76 
				panneauDiv.index = 0;
77 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
78 
 
79 
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
80 
				ouverturePanneauDiv.index = 0;
81 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
82 
 
83 
				var ouvertureDiv = document.getElementById('pl-ouverture');
84 
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
85 
 
86 
				var fermetureDiv = document.getElementById('pl-fermeture');
87 
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
88 
 
89 
				cacher();
424 jpm 90 
				refreshMap();
91 
			}
92 
		//]]>
93 
		</script>
94 
		<style type="text/css">
95 
			html, body {
96 
				margin:0;
97 
				padding:0;
98 
				height: 100%;
435 jpm 99 
				font-family:Arial;
100 
				font-size:12px;
101 
			}
424 jpm 102 
			#carte {
103 
				width:100%;
104 
				height:100%;
435 jpm 105 
			}
106 
			.bouton {
107 
				background-color:white;
108 
				border:2px solid black;
109 
				cursoir:pointer;
110 
				text-align:center;
111 
			}
112 
			#panneau-lateral {
113 
				width:300px;
114 
				height:100%;
115 
				padding:0;
116 
				display:none;
117 
				background-color:white;
118 
				border-right:1px solid grey;
119 
				box-shadow:2px 2px 6px #979797;-webkit-box-shadow:2px 2px 6px #979797;-moz-box-shadow:2px 2px 6px #979797;
120 
			}
121 
			#pl-entete {
122 
				text-align:right;
123 
			}
124 
			#pl-corps {
125 
				height:86%;
126 
				overflow:auto;
127 
				padding:5px;
128 
			}
129 
			#pl-ouverture, #pl-fermeture {
130 
				position:relative;
131 
				top:0;
132 
				width:95px;
133 
				background-color:#FFF;
134 
				text-align:center;
135 
				border:1px solid black;
136 
				cursor:pointer;
137 
			}
138 
			#pl-ouverture {
139 
				border-left:0;
140 
			}
141 
			#pl-fermeture {
142 
				border-right:0;
143 
				float:right;
144 
			}
424 jpm 145 
		</style>
146 
	</head>
147 
 
148 
	<body onload="initialize()">
435 jpm 149 
		<div id="panneau-lateral">
150 
			<div id="pl-entete">
151 
				<div id="pl-ouverture">Panneau >></div>
152 
				<div id="pl-fermeture"><< Fermer [x]</div>
153 
			</div>
154 
			<div id="pl-corps"></div>
155 
		</div>
424 jpm 156 
		<div id="carte"></div>
157 
	</body>
158 
</html>