banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

GEODATA DAYS 2024

#1 Thu 23 May 2013 07:51

watiss
Juste Inscrit !
Date d'inscription: 23 May 2013
Messages: 1

Ajouter des markers ET Google Map bg avec OpenLayers

Bonjour à tous.
J'ai un problème fort embêtant que je n'arrive vraiment pas à résoudre :
En effet, je dois utiliser OpenLayers pour réaliser une carte sur laquelle je dois mettre des picto (des markers en fait) dans quelques différents endroits et lorsqu'on passe la souris sur ces pictos ça doit générer un pop up avec un url cliquable.
Le problème c'est que je voudrais mettre un Google Map Background dans mon OpenLayers et quand je fais ça, tant que j'ai pas ajouté mes markers avec leur fenêtre pop up, ça va. Mais dès que je crée une instance de layers, que j'y colle des markers et que j'attache le layer à ma carte, eh bien rien n’apparaît :'( J'ai passée énormément de temps dessus à regarder partout dans tous les forums, mais sans résultat satisfaisant et j'en a vraiment besoin en plus!!
Quelqu’un sur ce forum aurait-il une idée?
Merci d'avance.
PS : Voici mon code :

Code:

<html>

    <head>
        <!-- OpenLayers core js -->
        <script
        src="http://www.openlayers.org/dev/OpenLayers.js"></script>
        
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
        

        <!-- OpenStreetMap base layer js -->
        <script
        src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
 
        <!-- Google Maps -->
        <script src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
 
        <script type="text/javascript">
        function init() {
            //set up projections
 
            // World Geodetic System 1984 projection
            var WGS84 = new OpenLayers.Projection("EPSG:4326");
            
            // WGS84 Google Mercator projection
            var WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");
 
            //Initialize the map
            //creates a new openlayers map in the <div> html element id map
            var map = new OpenLayers.Map ("map", {
                controls:[
                    //allows the user pan ability
                    new OpenLayers.Control.Navigation(),
                    //displays the pan/zoom tools
                    new OpenLayers.Control.PanZoom(),
                    //displays a layer switcher
                    new OpenLayers.Control.LayerSwitcher(),
                    //displays the mouse position's coordinates in a <div> html element with
                    new OpenLayers.Control.MousePosition({
                        div:document.getElementById("coordinates")
                    })
                ],
                    projection: WGS84_google_mercator,
                    displayProjection: WGS84
            } );
 
            //base layers
            var openstreetmap = new OpenLayers.Layer.OSM();
            var google_maps = new OpenLayers.Layer.Google(
                "Google Maps", {
                    numZoomLevels: 20
                }
            );
            var google_satellite = new OpenLayers.Layer.Google(
                "Google Satellite", {
                    type: google.maps.MapTypeId.SATELLITE,
                    numZoomLevels: 20
                }
            );
 
            //wfs overlay
            var wfs_layer = new OpenLayers.Layer.Vector("Blocks", {
                strategies: [new OpenLayers.Strategy.BBOX()],
                projection: WGS84,
                protocol: new OpenLayers.Protocol.WFS({
                    version: "1.1.0",
                    url: "http://hazardmapping.com/geoserver/wfs",
                    featureNS :  "http://www.opengeospatial.net/cite",
                    featureType: "testblocks",
                })
            });
            map.addLayers([openstreetmap, google_maps, google_satellite, wfs_layer]);
            
            
            //add markers
            var couche_markers = new OpenLayers.Layer.Markers("Markers");
            var dimension_icon = new OpenLayers.Size(24,24);
            var offset_icon = new OpenLayers.Pixel(-(dimension_icon.w/2), -dimension_icon.h);
            var icon = new OpenLayers.Icon('10.jpg', size, offset);
            lonlat=new OpenLayers.LonLat(2.44834,48.87729).transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
            );
            var mon_marker=new OpenLayers.Marker(lonlat, icon);
            markers.addMarker(mon_marker);
            map.addLayer(markers);
            
            // map extent
            var mapextent = new OpenLayers.Bounds(-123.17341, 49.24343, -123.06183, 49.29899).transform(WGS84, map.getProjectionObject());
            map.zoomToExtent(mapextent);
        }
        </script>
    </head>
    <body onload="init()">
        <div id="map" style="width:500px; height:500px;"></div>
        <div id="coordinates"></div>
    </body>
</html>

Hors ligne

 

#2 Thu 23 May 2013 09:03

Pasquinel
Juste Inscrit !
Date d'inscription: 23 May 2013
Messages: 1

Re: Ajouter des markers ET Google Map bg avec OpenLayers

Bonjour,

je pense qu'il y a deux problèmes dans votre code:
1- spécifier que la propriéte isBaseLayer de Google Map Background est à "true", et que celle de vos marqueurs est à "false".
2- Dès qu'on ajoute un layer GoogleMap, la projection de la carte sera 900913. Si vous essayer d'afficher des points en WGS84, ils seront mal placés (très proche du point 0,0 en fait)

J'espère que ça pourra vous aider.

Hors ligne

 

#3 Tue 28 May 2013 12:20

13gilles
Participant occasionnel
Date d'inscription: 12 Aug 2010
Messages: 43

Re: Ajouter des markers ET Google Map bg avec OpenLayers

Il me semble que Google interdit d'utiliser ses données cartographiques en dehors de ses logiciels (les API GoogleMaps, Google Earth et autres)
voir https://developers.google.com/maps/terms?hl=en

Hors ligne

 

Pied de page des forums

Powered by FluxBB