[OpenLayers-Users] Points and Popup shifted on a Google background

Arnd Wippermann arnd.wippermann at web.de
Fri Jan 22 13:02:07 EST 2010


Hi,
 
instead of your declaration
gbase = new OpenLayers.Layer.Google( "Google Physical", {type:
G_PHYSICAL_MAP}, {'sphericalMercator': true} ); 

you have to use
gbase = new OpenLayers.Layer.Google( "Google Physical", {type:
G_PHYSICAL_MAP, 'sphericalMercator': true} ); 

then your map is in spericalMercator. Otherwise it seems, that instead of
your options for the map, the baselayer projection is taken and that is
EPSG:4326.
 
Arnd

  _____  

Von: users-bounces at openlayers.org [mailto:users-bounces at openlayers.org] Im
Auftrag von julien minet
Gesendet: Freitag, 22. Januar 2010 13:57
An: users at openlayers.org
Betreff: [OpenLayers-Users] Points and Popup shifted on a Google background


Hi again, 

I've seen that no attachment can be sent to the list. So I've put the code
at the end of this mail...


-----------------
I've have a problem of misplacement of features and popup when adding a
vector layer to a OL map with a background Google.

I just want ot add some points entered in WGS84 (by OpenLayers.Layer.Vector)
to a map with a Google layer as the base layer. I've put my map in spherical
Mercator, as well as the google layer and I've transformed my points in
EPSG:900913 but I still have a problem!

My points are displayed near the exact location, but with a slight shift.
When I zoom/zoom over or if I pan in the N-S direction, points are changing
of position. Until here, it seems that it is just a projection problem, but
I think I'm doing right in the projection setup(?)

But the most surprising is that the popup, which should be displayed on the
points when clicking on it, are displayed at the exact locations, at any
scale! So the position of the popup are right!

If I try to transfom the points from EPSG4326 to EPSG900913, they are not
displayed anymore anywhere...

I've attached my stand-alone working code.


This identically happen under WinXP-IE7 or FF and Ubuntu-FF.

Any hints are welcome!

Julien

----------------------------
 <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <link rel="stylesheet"
href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />

    <link rel="stylesheet"
href="http://openlayers.org/dev/examples/style.css" type="text/css" /> 
    <title>Wallonie with GoogleMaps</title> 
    <script src='http://maps.google.com/maps?file=api
<http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACxUxJ46tcIiZKW
G81HlNYBQNmDPi4Y89dW251X5Bl4Z1--Eg2BTkAwr63SeUaRI4wI8RwX7LgtHN0g>
&amp;v=2&amp;key=ABQIAAAACxUxJ46tcIiZKWG81HlNYBQNmDPi4Y89dW251X5Bl4Z1--Eg2BT
kAwr63SeUaRI4wI8RwX7LgtHN0g'></script> 
    <script src="http://openlayers.org/api/OpenLayers.js"></script>  
    <script type="text/javascript"> 
    var map, gbase, points, selectControl, selectedFeature;
    var proj = new OpenLayers.Projection("EPSG:4326");
     var bounds = new OpenLayers.Bounds(6.190,50.517,6.205,50.535);
    bounds.transform(proj, map.getProjectionObject());

    var options = { 
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        numZoomLevels: 18,
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508,
20037508.34) 
        };

    function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("chicken", 
 
feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                      "<div" + feature.id +"></div>",
                                     null, true, onPopupClose);
              popup.setBackgroundColor("red");
        popup.setBorder("10px");
          feature.popup = popup;
            map.addPopup(popup);
        }

        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }   
 
    function init() { 
            map = new OpenLayers.Map('map',options); 
         // Add google layers 
         gbase = new OpenLayers.Layer.Google( "Google Physical", {type:
G_PHYSICAL_MAP}, {'sphericalMercator': true} ); 

        map.addLayer(gbase);

        // Add Bornes Frontières Geometry
        var Bornes = new Array();
        
        Bornes[0] = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(6.20475,50.52167));
        Bornes[1] = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(6.20440,50.52148));        
        //Bornes[0] = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(6.20475,50.52167).transform(new
OpenLayers.Projection("EPSG:4326"),new
OpenLayers.Projection("EPSG:900913")));
        //Bornes[1] = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(6.20440,50.52148).transform(new
OpenLayers.Projection("EPSG:4326"),new
OpenLayers.Projection("EPSG:900913")));

            points = new OpenLayers.Layer.Vector("Infos", {projection: new
OpenLayers.Projection("EPSG:4326")});
        points.addFeatures(Bornes);
        
        map.addLayer(points);
 
        // Ajout des Controls 
        map.addControl(new OpenLayers.Control.LayerSwitcher()); 
        map.addControl(new
OpenLayers.Control.ScaleLine({div:document.getElementById("scale")})); 
        map.addControl(new
OpenLayers.Control.MousePosition({div:document.getElementById("mouseposition
")})); 

            selectControl = new
OpenLayers.Control.SelectFeature(points,{onSelect: onFeatureSelect,
onUnselect: onFeatureUnselect});
            map.addControl(selectControl);
        selectControl.activate();
 
           map.zoomToExtent(bounds);
     }       
 
    </script> 
  </head> 
    <body onload="init()"> 
      <h4 id="title">Wallonie with GoogleMaps</h4> 
      <div> Carte dynamique OpenLayers</div> 
      <div style="width:100%; height:80%" id="map"></div> 
      <div align="right" id="mouseposition"></div> 
      <div align="right" id="scale"> </div> 
  </body> 
</html>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20100122/714197c3/attachment.html


More information about the Users mailing list