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

Fri Jan 22 07:57:11 EST 2010

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&amp;v=2&amp;key=ABQIAAAACxUxJ46tcIiZKWG81HlNYBQNmDPi4Y89dW251X5Bl4Z1--Eg2BTkAwr63SeUaRI4wI8RwX7LgtHN0g'></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/da2bbf74/attachment.html