Subversion Repositories eFlore/Applications.cel

Rev

Rev 439 | Rev 463 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

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