Rev 439 | Rev 465 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Observations publiques du CEL - Tela Botanica</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-language" content="fr" />
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Delphine CAUQUIL, Jean-Pascal MILCENT" />
<meta name="keywords" content="Tela Botanica, cartographie, CEL" />
<meta name="description" content="Widget de cartographie des observations publiques de plantes saisies dans le Carnet en Ligne (CEL)" />
<!-- Spécial mobile -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Favicones -->
<link rel="icon" type="image/png" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.png" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.ico" />
<!-- Javascript : bibliothèques -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
<!-- Javascript : données -->
<script src="<?=$url_json?>" type="text/javascript"></script>
<!-- Javascript : appli carto -->
<script type="text/javascript">
//<![CDATA[
var markerClusterer = null;
var map = null;
var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
var carteCentre = new google.maps.LatLng(46.4, 3.10);
var carteOptions = {
zoom: 6,
center: carteCentre,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var points = [];
var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
var infoBulle = new google.maps.InfoWindow();
for (var i = 0; i < obs.nombre; ++i) {
var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
var point = new google.maps.Marker({
position: maLatLng,
map: map,
icon: pointImage,
title: 'test'
});
google.maps.event.addListener(point, 'click', function() {
var contenu = this.getPosition().toString();
infoBulle.setContent(contenu);
infoBulle.open(map, this);
});
points.push(point);
}
markerClusterer = new MarkerClusterer(map, points);
}
function afficher() {
document.getElementById('panneau-lateral').style.display = 'block';
document.getElementById('pl-corps').innerHTML = 'Afficher';
document.getElementById('pl-ouverture').style.display = 'none';
google.maps.event.trigger(map, 'resize');
};
function cacher() {
document.getElementById('panneau-lateral').style.display = 'none';
document.getElementById('pl-corps').innerHTML = 'Cacher';
document.getElementById('pl-ouverture').style.display = 'block';
google.maps.event.trigger(map, 'resize');
};
function initialize() {
map = new google.maps.Map(document.getElementById('carte'), carteOptions);
// Create the DIV to hold the control and call the HomeControl()
// constructor passing in this DIV.
var panneauDiv = document.getElementById('panneau-lateral');
panneauDiv.index = 0;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
var ouverturePanneauDiv = document.getElementById('pl-ouverture');
ouverturePanneauDiv.index = 0;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
var ouvertureDiv = document.getElementById('pl-ouverture');
google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
var fermetureDiv = document.getElementById('pl-fermeture');
google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
cacher();
refreshMap();
}
//]]>
</script>
<!-- CSS -->
<style type="text/css">
html, body {
margin:0;
padding:0;
height: 100%;
font-family:Arial;
font-size:12px;
}
#carte {
width:100%;
height:100%;
}
.bouton {
background-color:white;
border:2px solid black;
cursoir:pointer;
text-align:center;
}
#panneau-lateral {
width:300px;
height:100%;
padding:0;
display:none;
background-color:white;
border-right:1px solid grey;
box-shadow:2px 2px 6px #979797;-webkit-box-shadow:2px 2px 6px #979797;-moz-box-shadow:2px 2px 6px #979797;
}
#pl-entete {
text-align:right;
}
#pl-corps {
height:86%;
overflow:auto;
padding:5px;
}
#pl-ouverture, #pl-fermeture {
position:relative;
top:0;
width:95px;
background-color:#FFF;
text-align:center;
border:1px solid black;
cursor:pointer;
}
#pl-ouverture {
border-left:0;
}
#pl-fermeture {
border-right:0;
float:right;
}
</style>
</head>
<body onload="initialize()">
<div id="panneau-lateral">
<div id="pl-entete">
<div id="pl-ouverture">Panneau >></div>
<div id="pl-fermeture"><< Fermer [x]</div>
</div>
<div id="pl-corps"></div>
</div>
<div id="carte"></div>
</body>
</html>