22,278 → 22,71 |
<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="https://getfirebug.com/firebug-lite.js"></script> --> |
<!-- Google Map v3 --> |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&sensor=true"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/google/map/3/markerclusterer/1.0/markerclusterer-1.0.pack.js"></script> |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=true&language=fr&region=FR"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/google/map/3/markerclusterer/2.0.1/markerclusterer-2.0.1.pack.js"></script> |
<!-- Jquery --> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/<?=$jquery_version?>/jquery-<?=$jquery_version?>.min.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.15/js/jquery-ui-1.8.15.custom.min.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/tablesorter/2.0.5/jquery.tablesorter.min.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/pagination/2.2/jquery.pagination.js"></script> |
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.8.1/jquery.validate.min.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.8.1/messages_fr.js"></script> |
|
<!-- Javascript : données --> |
<script src="<?=$url_json?>" type="text/javascript"></script> |
<script src="<?=$url_stations?>" type="text/javascript"></script> |
|
<!-- Javascript : appli carto --> |
<script type="text/javascript"> |
//<![CDATA[ |
var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png'; |
var pointsOrigine = null; |
var boundsOrigine = null; |
var markerClusterer = null; |
var map = null; |
var urlsLimitesCommunales = <?=$url_limites_communales?>; |
var nt = '<?=$num_taxon?>'; |
|
var infoBulle = new google.maps.InfoWindow(); |
google.maps.event.addListener(infoBulle, 'domready', function() { |
// Onglet Tableau : Jquery => TableSorter |
if ($("#observations table").get() != '') { |
// add parser through the tablesorter addParser method |
$.tablesorter.addParser({ |
// Définition d'un id unique pour ce parsseur |
id: 'date_cel', |
is: function(s) { |
// retourne false si le parsseur n'est pas autodétecté |
return false; |
}, |
format: function(s) { |
// Transformation date jj/mm/aaaa en aaaa/mm/jj |
s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1"); |
// Remplace la date par un nombre de millisecondes pour trier numériquement |
return $.tablesorter.formatFloat(new Date(s).getTime()); |
}, |
// set type, either numeric or text |
type: 'numeric' |
}); |
$("#observations table").tablesorter({ |
headers: { |
1: { |
sorter:'date_cel' |
} |
} |
}); |
} |
// Onglet Liste : Jquery => FancyBox |
if ($("#observations ol").get() != '') { |
$("a.cel-img").fancybox({ |
transitionIn : 'elastic', |
transitionOut : 'elastic', |
speedIn : 600, |
speedOut : 200, |
overlayShow : true |
}).bind('click', function(e) { |
if (e.stopPropagation) { |
e.stopPropagation(); |
} |
return false; |
}); |
} |
}); |
google.maps.event.addListener(infoBulle, 'closeclick', function() { |
map.panTo(pointClique.position); |
}); |
|
var pointClique = null; |
|
var carteCentre = new google.maps.LatLng(46.4, 3.10); |
var carteOptions = { |
zoom: 6, |
mapTypeId: google.maps.MapTypeId.ROADMAP, |
mapTypeControlOptions: { |
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} |
}; |
var ctaLayer = null; |
|
function refreshMap() { |
var points = []; |
var bounds = new google.maps.LatLngBounds(); |
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 pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32)); |
var point = new google.maps.Marker({ |
position: maLatLng, |
map: map, |
icon: pointImage, |
stationId: obs.points[i].id |
}); |
|
bounds.extend(maLatLng); |
|
google.maps.event.addListener(point, 'click', function() { |
pointClique = this; |
|
infoBulle.open(map, this); |
|
var limites = map.getBounds(); |
var centre = limites.getCenter(); |
var nordEst = limites.getNorthEast(); |
var centreSudLatLng = new google.maps.LatLng(nordEst.lat(), centre.lng()); |
map.panTo(centreSudLatLng); |
|
afficherMsgChargement(); |
chargerFormatObs(this.stationId, '*'); |
}); |
|
points.push(point); |
} |
|
if (pointsOrigine == null && boundsOrigine == null) { |
pointsOrigine = points; |
boundsOrigine = bounds; |
} |
|
executerMarkerClusterer(points, bounds); |
} |
|
function executerMarkerClusterer(points, bounds) { |
if (markerClusterer) { |
markerClusterer.clearMarkers(); |
} |
markerClusterer = new MarkerClusterer(map, points); |
map.fitBounds(bounds); |
} |
|
function afficherMsgChargement() { |
var chargement = document.getElementById('chargement').cloneNode(true); |
chargement.setAttribute('id', 'chargement-copie'); |
infoBulle.setContent(chargement); |
} |
|
function chargerFormatObs(stationId, format) { |
var url = '<?=$url_base?>carto?carte=observations'+ |
'&utilisateur=<?=$utilisateur?>'+ |
'&projet=<?=$projet?>'+ |
'&num_taxon='+nt+ |
'&dept=<?=$dept?>'+ |
'&format='+format+'&station='+stationId; |
$.get(url, function(observations){ |
infoBulle.setContent(observations); |
}); |
} |
|
function arreter(event) { |
if (event.stopPropagation) { |
event.stopPropagation(); |
} |
return false; |
} |
|
function afficher() { |
document.getElementById('panneau-lateral').style.width = '300px'; |
document.getElementById('pl-contenu').style.display = 'block'; |
document.getElementById('pl-ouverture').style.display = 'none'; |
document.getElementById('pl-fermeture').style.display = 'block'; |
document.getElementById('carte').style.left = '300px'; |
google.maps.event.trigger(map, 'resize'); |
}; |
|
function cacher() { |
document.getElementById('panneau-lateral').style.width = '24px'; |
document.getElementById('pl-contenu').style.display = 'none'; |
document.getElementById('pl-ouverture').style.display = 'block'; |
document.getElementById('pl-fermeture').style.display = 'none'; |
document.getElementById('carte').style.left = '24px'; |
google.maps.event.trigger(map, 'resize'); |
}; |
|
function ouvrirPopUp(url, nom) { |
window.open(url, nom, 'scrollbars=yes,width=650,height=600,directories=no,location=no,menubar=no,status=no,toolbar=no'); |
}; |
|
function filtrerParTaxon(ntAFiltrer) { |
infoBulle.close(); |
$('#taxon-'+nt).removeClass('taxon-actif'); |
if (nt == ntAFiltrer) { |
nt = '*'; |
executerMarkerClusterer(pointsOrigine, boundsOrigine); |
} else { |
var url = '<?=$url_cel_carto?>/carte-defaut-json/<?=$utilisateur?>/<?=$projet?>/<?=$dept?>/'+ntAFiltrer+'?formatRetour=jsonp&callback=?'; |
$.getJSON(url, function (observations) { |
obs = observations; |
nt = ntAFiltrer; |
$('#taxon-'+nt).addClass('taxon-actif'); |
refreshMap(); |
}); |
} |
}; |
|
function initialize() { |
map = new google.maps.Map(document.getElementById('carte'), carteOptions); |
|
// Ajout des limites communales sur la carte |
<? if (isset($url_limites_communales)) : ?> |
<? foreach ($url_limites_communales as $url) : ?> |
ctaLayer = new google.maps.KmlLayer('<?=$url?>', {preserveViewport: true}); |
ctaLayer.setMap(map); |
<? endforeach ?> |
<? endif ?> |
|
<? if ($num_taxon == '*') : ?> |
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); |
<? endif ?> |
|
refreshMap(); |
} |
|
// Déclenchement d'actions pour JQuery |
$(document).ready(function() { |
// Ajout du nombre de communes où des observations ont eu lieu |
$('#commune-nbre').append(obs.nombre); |
}); |
var filtreCommun = |
'&taxon=<?=$taxon?>'+ |
'&utilisateur=<?=$utilisateur?>'+ |
'&projet=<?=$projet?>'+ |
'&tag=<?=$tag?>'+ |
'&date=<?=$date?>'+ |
'&dept=<?=$dept?>'+ |
'&commune=<?=$commune?>'+ |
'&commentaire=<?=$commentaire?>'; |
var stationsUrl = '<?=$url_cel_carto?>/stations'+'?'+ |
'num_taxon='+nt+ |
filtreCommun; |
var taxonsUrl = '<?=$url_cel_carto?>/taxons'+'?'+ |
'num_taxon='+nt+ |
filtreCommun; |
var observationsUrl = '<?=$url_cel_carto?>/observations'+'?'+ |
'station={stationId}'+ |
'&num_taxon={nt}'+ |
filtreCommun; |
//]]> |
</script> |
<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/scripts/carto.js"></script> |
|
<!-- CSS --> |
<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> |
<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.15/css/smoothness/jquery-ui-1.8.15.custom.css" type="text/css" media="screen" /> |
<link href="<?=$url_base?>modules/carto/squelettes/css/carto.css" rel="stylesheet" type="text/css" media="screen" /> |
<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> |
|
<!--[if lt IE 7]> |
<style type="text/css"> |
#carte { |
height:expression(document.body.clientHeight-35); /* 80+20+20=120 */ |
width:expression(document.body.clientWidth-24); /* 200+20+20+20=260 */ |
} |
#panneau-lateral { |
height:expression(document.body.clientHeight-35); /* 80+20+20=120 */ |
} |
</style> |
<![endif]--> |
|
<? if ($num_taxon != '*') : ?> |
<style type="text/css"> |
#carte { |
left:0; |
} |
</style> |
<? endif ?> |
|
<!-- Stats : Google Analytics --> |
<script type="text/javascript"> |
//<![CDATA[ |
var _gaq = _gaq || []; |
_gaq.push(['_setAccount', 'UA-20092557-1']); |
_gaq.push(['_trackPageview']); |
|
(function() { |
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
})(); |
//]]> |
</script> |
</head> |
|
<body onload="initialize()"> |
<body> |
<div id="zone-titre"> |
<h1 id="carte-titre"> |
<? if ($num_taxon == '*') : ?> |
<span id="commune-nbre"> </span> communes contenant des observations du <a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href); arreter(event); return false;">CEL</a> de <a href="http://www.tela-botanica.org/" onclick="window.open(this.href); arreter(event); return false;">Tela Botanica</a> |
<? else : ?> |
<span id="commune-nbre"> </span> communes pour <?=$taxon_nom?> - <a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href); arreter(event); return false;">CEL</a> de <a href="http://www.tela-botanica.org/" onclick="window.open(this.href); arreter(event); return false;">Tela Botanica</a> |
<? endif ?> |
<span id="logo"> |
<a href="http://www.tela-botanica.org/site:accueil" |
title="Aller à l'accueil de Tela Botanica" |
onclick="window.open(this.href); arreter(event); return false;"> |
<img src="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.png" alt="TB" /> |
</a> |
</span> |
<span id="obs-nbre"> </span> observations |
<span class="plante-titre">de <span class="plantes-nbre"> </span> plantes</span> sur |
<span id="commune-nbre"> </span> communes |
- <a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href); arreter(event); return false;">CEL</a> (<a href="http://www.tela-botanica.org/" onclick="window.open(this.href); arreter(event); return false;">Tela Botanica</a>) |
</h1> |
<div id="zone-info"> |
<a href="<?=$url_base?>carto?carte=avertissement" onClick="ouvrirPopUp('<?=$url_base?>carto?carte=avertissement', 'Avertissement'); arreter(event); return false;"> |
308,7 → 101,7 |
<div id="pl-fermeture" title="Fermer le panneau latéral"><span><< Fermer [x]</span></div> |
<div id="pl-contenu"> |
<div id="pl-entete"> |
<h2>Filtre sur <?=count($taxons)?> plantes</h2> |
<h2>Filtre sur <span class="plantes-nbre"> </span> plantes</h2> |
<p> |
Cliquez sur un nom de plante pour filtrer les observations sur la carte.<br /> |
Pour revenir à l'état initial, cliquez à nouveau sur le nom sélectionné. |
315,15 → 108,7 |
</p> |
</div> |
<div id="pl-corps" onMouseOver="map.setOptions({'scrollwheel':false});" onMouseOut="map.setOptions({'scrollwheel':true});"> |
<ol id="taxons"> |
<? foreach ($taxons as $taxon) : ?> |
<li id="taxon-<?=$taxon['nt']?>"> |
<a href="#" onclick="filtrerParTaxon(<?=$taxon['nt']?>);" title="<?=$taxon['famille']?>"> |
<?=$taxon['nom']?> |
</a> |
</li> |
<? endforeach; ?> |
</ol> |
<!-- Insertion des lignes à partir du squelette tpl-taxons-liste --> |
</div> |
</div> |
</div> |
330,10 → 115,209 |
<? endif ?> |
<div id="carte"></div> |
|
<!-- +-------------------------------------------------------------------------------------------+ --> |
<!-- Blocs chargés à la demande : par défaut avec un style display à none --> |
<div id="chargement"> |
<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." /> |
<p>Chargement des observations en cours...</p> |
|
<!-- Squelette du message de chargement des observations --> |
<script id="tpl-chargement" type="text/x-jquery-tmpl"> |
<div id="chargement" style="height:500px;"> |
<img src="<?=$url_base?>modules/carto/squelettes/images/chargement.gif" alt="Chargement en cours..." /> |
<p>Chargement des observations en cours...</p> |
</div> |
</script> |
|
<!-- Squelette du contenu d'une info-bulle observation --> |
<script id="tpl-obs" type="text/x-jquery-tmpl"> |
<div id="info-bulle" style="width:{largeur}px;"> |
<div id="obs"> |
<h2><span id="obs-total"> </span> observations pour <span id="obs-commune"> </span></h2> |
<div class="navigation"> </div> |
<div> |
<ul> |
<li><a href="#obs-vue-tableau">Tableau</a></li> |
<li><a href="#obs-vue-liste">Liste</a></li> |
</ul> |
</div> |
<div id="observations"> |
<div id="obs-vue-tableau" style="display:none;"> |
<table id="obs-tableau"> |
<thead> |
<tr> |
<th title="Nom scientifique défini par l'utilisateur.">Nom</th> |
<th title="Date de l'observation">Date</th> |
<th title="Lieu d'observation">Lieu</th> |
<th title="Auteur de l'observation">Observateur</th> |
</tr> |
</thead> |
<tbody id="obs-tableau-lignes" class="obs-conteneur"> |
<!-- Insertion des lignes à partir du squelette tpl-obs-tableau --> |
</tbody> |
</table> |
</div> |
<div id="obs-vue-liste" style="display:none;"> |
<ol id="obs-liste-lignes" class="obs-conteneur"> |
<!-- Insertion des lignes à partir du squelette tpl-obs-liste --> |
</ol> |
</div> |
</div> |
<div class="navigation"> </div> |
<div id="obs-pieds-page"> |
<p id="obs-msg-info">Les observations de cette carte sont regroupées par commune.</p> |
<p>Id : <span id="obs-station-id"> </span></p> |
</div> |
</div> |
</div> |
</script> |
|
<!-- Squelette du contenu du tableau des observation --> |
<script id="tpl-obs-tableau" type="text/x-jquery-tmpl"> |
<tr class="cel-obs-${idObs}"> |
<td> |
<span class="nom-sci"> |
{{if nn != 0}} |
<a href="http://www.tela-botanica.org/nn${nn}" |
onclick="window.open(this.href); arreter(event); return false; "> |
${nomSci} |
</a> |
{{else}} |
${nomSci} |
{{/if}} |
</span> |
</td> |
<td class="date">{{if date}}${date}{{else}} {{/if}}</td> |
<td class="lieu">{{if lieu}}${lieu}{{else}} {{/if}}</td> |
<td> |
{{if observateur}} |
{{if observateurId}} |
<a class="contact obs-${idObs} contributeur-${observateurId}" |
href="#form-contact" |
title="Contactez ce contributeur"> |
${observateur} |
</a> |
{{else}} |
${observateur} |
{{/if}} |
{{else}} |
|
{{/if}} |
</td> |
</tr> |
</script> |
|
<!-- Squelette du contenu de la liste des observations --> |
<script id="tpl-obs-liste" type="text/x-jquery-tmpl"> |
<li> |
<div class="cel-obs-${idObs}"> |
{{if images}} |
{{each(index, img) images}} |
<div{{if index == 0}} class="cel-img-principale" {{else}} class="cel-img-secondaire"{{/if}}> |
<a class="cel-img" |
href="${img.normale}" |
title="${nomSci} {{if nn}} [${nn}] {{/if}} par ${observateur} - Publiée le ${datePubli} - GUID : ${img.guid}" |
rel="cel-obs-${idObs}"> |
<img src="${img.miniature}" alt="Image #${img.idImg} de l'osbervation #${nn}" /> |
</a> |
<p id="cel-info-${img.idImg}" class="cel-infos"> |
<a class="cel-img-titre" href="${urlEflore}" |
onclick="window.open(this.href);return false;" |
title="Cliquez pour accéder à la fiche eFlore"> |
<strong>${nomSci} {{if nn}} [nn${nn}] {{/if}}</strong> par <em>${observateur}</em> |
</a> |
<br /> |
<span class="cel-img-date">Publiée le ${datePubli}</span> |
</p> |
</div> |
{{/each}} |
{{/if}} |
<dl> |
<dt class="champ-nom-sci">Nom</dt> |
<dd title="Nom défini par l'utilisateur{{if nn != 0}}. Cliquez pour accéder à la fiche d'eFlore.{{/if}}"> |
<span class="nom-sci"> |
{{if nn != 0}} |
<a href="http://www.tela-botanica.org/nn${nn}" |
onclick="window.open(this.href); arreter(event); return false; "> |
${nomSci} |
</a> |
{{else}} |
${nomSci} |
{{/if}} |
</span> |
</dd> |
<dt title="Lieu d'observation">Lieu</dt><dd class="lieu"> ${lieu}</dd> |
<dt title="Date d'observation">Le</dt><dd class="date"> ${date}</dd> |
<dt title="Auteur de l'observation">Publié par</dt> |
<dd> |
{{if observateur}} |
{{if observateurId}} |
<a class="contact obs-${idObs} contributeur-${observateurId}" |
href="#form-contact" |
title="Contactez ce contributeur"> |
${observateur} |
</a> |
{{else}} |
${observateur} |
{{/if}} |
{{else}} |
|
{{/if}} |
</dd> |
</dl> |
<hr class="nettoyage"/> |
</div> |
</li> |
</script> |
|
<!-- Squelette de la liste des taxons --> |
<script id="tpl-taxons-liste" type="text/x-jquery-tmpl"> |
<ol id="taxons"> |
{{each(index, taxon) taxons}} |
<li id="taxon-${taxon.nt}"> |
<span class="taxon" title="Numéro taxonomique : ${taxon.nt} - Famille : ${taxon.famille}"> |
${taxon.nom} <span class="nt" title="Numéro taxonomique">${taxon.nt}</span> |
</span> |
</li> |
{{/each}} |
</ol> |
</script> |
|
<!-- Squelette du formulaire de contact --> |
<div id="tpl-form-contact" style="display:none;"> |
<form id="form-contact" method="post" action=""> |
<div id="fc-zone-dialogue"></div> |
<dl> |
<dt><label for="fc_sujet">Sujet</label></dt> |
<dd><input id="fc_sujet" name="fc_sujet"/></dd> |
<dt><label for="fc_message">Message</label></dt> |
<dd><textarea id="fc_message" name="fc_message"></textarea></dd> |
<dt><label for="fc_utilisateur_courriel" title="Utilisez le courriel avec lequel vous êtes inscrit à Tela Botanica">Votre courriel</label></dt> |
<dd><input id="fc_utilisateur_courriel" name="fc_utilisateur_courriel"/></dd> |
</dl> |
<p> |
<input id="fc_destinataire_id" name="fc_destinataire_id" type="hidden" value="" /> |
<input id="fc_copies" name="fc_copies" type="hidden" value="eflore_remarques@tela-botanica.org" /> |
|
<button id="fc_annuler" type="button">Annuler</button> |
|
<button id="fc_effacer" type="reset">Effacer</button> |
|
<input id="fc_envoyer" type="submit" value="Envoyer" /> |
</p> |
</form> |
</div> |
|
<!-- Stats : Google Analytics --> |
<script type="text/javascript"> |
//<![CDATA[ |
var _gaq = _gaq || []; |
_gaq.push(['_setAccount', 'UA-20092557-1']); |
_gaq.push(['_trackPageview']); |
|
(function() { |
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
})(); |
//]]> |
</script> |
</body> |
</html> |
</html> |