Le portail francophone de la géomatique

<script type="text/javascript">
    var map; 
        function init() 
        {
            //echelle
            var scale= new OpenLayers.Control.ScaleLine({ topInUnits: 'km', bottomInUnits: 'm'});
            
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    //echelle
                    scale,
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
                        
            // overview (mini-carte)
            var overview1 = new OpenLayers.Control.OverviewMap();
            map.addControl(overview1);
            
            //OSM
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("OpenStreetMap");
            map.addLayer(layerMapnik);
            
            //mapquest
            var mapquest = new OpenLayers.Layer.OSM("MapQuest", "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png");
            map.addLayer(mapquest);
            //opencyclemap
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("OpenCyclemap");
            map.addLayer(layerCycleMap);
            
            // google map
            //googlemap = new OpenLayers.Layer.Google("Google Map", {sphericalMercator:true});//projection 900913
            //map.addLayer(googlemap);
            
            //carte du relief google
            var gphy = new OpenLayers.Layer.Google("Google relief",{sphericalMercator:true, type: G_PHYSICAL_MAP} );
            map.addLayer(gphy);
            
            //Hybride
            var vueaerienne = new OpenLayers.Layer.Google("Gogle Hybride",{sphericalMercator:true, type: G_HYBRID_MAP} );
            map.addLayer(vueaerienne);
            
            //geojson
            var trace_geojson = new OpenLayers.Layer.Vector(
            "Trace GPS",{
                protocol: new OpenLayers.Protocol.HTTP({
                url: "/php/articles/inclusion/gpx/appel_geojson.php?id_article=<?php echo $id_article; ?>",
                format: new OpenLayers.Format.GeoJSON()
                }),
                style: {strokeColor: "red", strokeWidth: 5, strokeOpacity: 0.5},
                projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [
                    new OpenLayers.Strategy.Fixed() //chargement unique
                    //new OpenLayers.Strategy.Cluster() //regroupe les objets
                    ]
                }
            );
            map.addLayer(trace_geojson);

            <?php 
            if($total_photo > 0)//y a t'il des images géolocalisées ?
            { ?>
                //marker (image géolocalisées                    
                AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {'autoSize': true});
                markers = new OpenLayers.Layer.Markers("Photos");
                map.addLayer(markers);

                var longlat, popupClass, popupContentHTML, myPopup;
                
                <?php 
                $sql_image_geolocalisee = $bdd->prepare('SELECT coord_gps_lat, coord_gps_lon, photo_gps_nom, photo_gps_url '
                                                         . ' FROM pevtt_photo_gps a'
                                                      . ' LEFT JOIN pevtt_fichier_gps_avec_article b ON a.id_fichier_gps = b.id_fichier_gps'
                                                      . ' LEFT JOIN pevtt_coordonnee_gps c ON b.id_fichier_gps = c.id_fichier_gps AND c.id_coord_gps = a.id_coord_gps'
                                                      . ' WHERE id_article = ?');
                $sql_image_geolocalisee->execute(array($id_article));
            
                while ($tab_image_geolocalisee = $sql_image_geolocalisee->fetch())
                {       
                    $lon = htmlspecialchars($tab_image_geolocalisee['coord_gps_lon']);
                    $lat = htmlspecialchars($tab_image_geolocalisee['coord_gps_lat']);
                    $image = htmlspecialchars($tab_image_geolocalisee['photo_gps_nom']);
                    $photo_gps_url = htmlspecialchars($tab_image_geolocalisee['photo_gps_url']);
                    
                    ?>
                    longlat = new OpenLayers.LonLat(<?php echo $lon.",".$lat ; ?>).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                    popupClass = AutoSizeAnchored;
                    popupContentHTML = '<img src="<?php echo $photo_gps_url; ?>" width="350"></img>';
                    addMarker(longlat, popupClass, popupContentHTML, true);
                    <?php
                }
                    ?>
                function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) 
                {
                    var feature = new OpenLayers.Feature(markers, ll); 
                    feature.closeBox = closeBox;
                    feature.popupClass = popupClass;
                    feature.data.popupContentHTML = popupContentHTML;
                    var size = new OpenLayers.Size(28, 30);
                        var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
                        var theIcon = theIcon = new OpenLayers.Icon('/php/images/marker.gif',size, offset);
                        feature.data.icon = theIcon;
                        
                    feature.data.overflow = (overflow) ? "auto" : "hidden";
                            
                    var marker = feature.createMarker();
                    var markerClick = function (evt) 
                    {
                        if (this.popup == null) 
                        {
                            if(typeof myPopup!='undefined'){
                                myPopup.destroyPopup();
                            }
                            myPopup = this;
                            this.popup = this.createPopup(this.closeBox);
                            map.addPopup(this.popup);
                            this.popup.show();
                        } 
                        else 
                        {
                            this.popup.toggle();
                        }
                        currentPopup = this.popup;
                        OpenLayers.Event.stop(evt);
                    };
                    marker.events.register("mousedown", feature, markerClick);
                    markers.addMarker(marker);
                }//fin marker
           <?php
           } //fin test image
           ?>
            //zoom automatic à l'extent d'un fichier gpx determiné par son nom
            trace_geojson.events.register('loadend', map, function(){this.zoomToExtent(trace_geojson.getDataExtent())});
            map.setCenter(null, null);
        }
    </script>