22,8 → 22,11 |
<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="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> |
<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/jsquery-ui/<?=$jquery-ui_version?>/js/jquery-ui-<?=$jquery-ui_version?>.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> |
|
<!-- Javascript : données --> |
<script src="<?=$url_json?>" type="text/javascript"></script> |
33,6 → 36,7 |
//<![CDATA[ |
var markerClusterer = null; |
var map = null; |
var infoBulle = new google.maps.InfoWindow(); |
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 = { |
41,7 → 45,7 |
mapTypeId: google.maps.MapTypeId.ROADMAP |
}; |
var ctaLayer = null; |
|
|
function refreshMap() { |
if (markerClusterer) { |
markerClusterer.clearMarkers(); |
49,7 → 53,6 |
|
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({ |
56,13 → 59,19 |
position: maLatLng, |
map: map, |
icon: pointImage, |
title: 'test' |
stationId: obs.points[i].id |
}); |
|
google.maps.event.addListener(point, 'click', function() { |
var contenu = this.getPosition().toString(); |
infoBulle.setContent(contenu); |
afficherMsgChargement(); |
infoBulle.open(map, this); |
|
var station = this.stationId; |
var urlObs = 'http://localhost/cel-widget/carto?carte=observations&station='+station; |
|
$.get(urlObs, function(observations){ |
infoBulle.setContent(observations); |
}); |
}); |
|
points.push(point); |
69,11 → 78,28 |
} |
|
markerClusterer = new MarkerClusterer(map, points); |
} |
|
function afficherMsgChargement() { |
var chargement = document.getElementById('chargement').cloneNode(true); |
chargement.setAttribute('id', 'chargement-copie'); |
infoBulle.setContent(chargement); |
} |
|
|
function chargerFormatObs(stationId, format) { |
var url = 'http://localhost/cel-widget/carto?carte=observations&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.display = 'block'; |
document.getElementById('pl-corps').innerHTML = 'Afficher'; |
80,6 → 106,7 |
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'; |
136,9 → 163,16 |
.bouton { |
background-color:white; |
border:2px solid black; |
cursoir:pointer; |
cursor:pointer; |
text-align:center; |
} |
#chargement { |
display:none; |
} |
#chargement-copie img{ |
display:block; |
margin:auto; |
} |
#panneau-lateral { |
width:300px; |
height:100%; |
184,5 → 218,11 |
<div id="pl-corps"></div> |
</div> |
<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> |
</div> |
</body> |
</html> |