Subversion Repositories eFlore/Applications.cel

Rev

Rev 573 | 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 -->
                <!--    Google Map v3 -->
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&amp;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>
                <!--    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/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>
                
                <!-- Javascript : données -->
                <script src="<?=$url_json?>" 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 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);
                        });
                //]]>
                </script>
                
                <!-- CSS -->
                <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()">
                <div id="zone-titre">
                        <h1 id="carte-titre">
                                <? if ($num_taxon == '*') : ?>
                                <span id="commune-nbre">&nbsp;</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">&nbsp;</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 ?>
                        </h1>
                        <div id="zone-info">
                                <a href="<?=$url_base?>carto?carte=avertissement" onClick="ouvrirPopUp('<?=$url_base?>carto?carte=avertissement', 'Avertissement'); arreter(event); return false;">
                                        <img src="<?=$url_base?>modules/carto/squelettes/images/information.png" 
                                                alt="Avertissements" title="Avertissements &amp; informations" />
                                </a>
                        </div>
                </div>
                <? if ($num_taxon == '*') : ?>
                <div id="panneau-lateral">
                        <div id="pl-ouverture" title="Ouvrir le panneau latéral"><span>Panneau >></span></div>
                        <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> 
                                        <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é.
                                        </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>
                                </div>
                        </div>
                </div>
                <? 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>
                </div>
        </body>
</html>