WebSVN – eFlore/Applications.cel – /branches/v2.27-secateur/widget/modules/cartopoint/squelettes/carte_defaut.tpl.html

<!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&amp;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>
                
                <!-- Javascript : appli carto -->
                <script type="text/javascript">
                //<![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 = {
                                zoom: 6,
                                center: carteCentre,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var ctaLayer = null;

                        function refreshMap() {
                                if (markerClusterer) {
                                        markerClusterer.clearMarkers();
                                }

                                var points = [];
                                var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
                                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,
                                                stationId: obs.points[i].id
                                        });

                                        google.maps.event.addListener(point, 'click', function() {
                                                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);
                                }

                                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';
                                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);

                                // Ajout des limites communales sur la carte
                                <? if (isset($url_limites_communales)) : ?>
                                        <? foreach ($url_limites_communales as $url) : ?>
                                                ctaLayer = new google.maps.KmlLayer('<?=$url?>');
                                                ctaLayer.setMap(map);
                                        <? endforeach; ?>
                                <? endif; ?>
                                
                                // 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;
                                cursor:pointer;
                                text-align:center;
                        }
                        #chargement {
                                display:none;
                        }
                        #chargement-copie img{
                                display:block;
                                margin:auto;
                        }
                        #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>
                
                <!-- 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>
Subversion Repositories eFlore/Applications.cel

(root)/branches/v2.27-secateur/widget/modules/cartopoint/squelettes/carte_defaut.tpl.html – Rev 469
