Hi again, <br><br>I've seen that no attachment can be sent to the list. So I've put the code at the end of this mail...<br><br><br>-----------------<br>I've have a problem of misplacement of features and popup when adding a vector layer to a OL map with a background Google.<br>
<br>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!<br>
<br>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(?)<br>
<br>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!<br><br>If I try to transfom the points from EPSG4326 to EPSG900913, they are not displayed anymore anywhere...<br>
<br>I've attached my stand-alone working code.<br><br><br>This identically happen under WinXP-IE7 or FF and Ubuntu-FF.<br><br>Any hints are welcome!<br><br>Julien<br><br>----------------------------<br> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <br>
<head> <br> <link rel="stylesheet" href="<a href="http://openlayers.org/dev/theme/default/style.css">http://openlayers.org/dev/theme/default/style.css</a>" type="text/css" /> <br>
<link rel="stylesheet" href="<a href="http://openlayers.org/dev/examples/style.css">http://openlayers.org/dev/examples/style.css</a>" type="text/css" /> <br> <title>Wallonie with GoogleMaps</title> <br>
<script src='<a href="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACxUxJ46tcIiZKWG81HlNYBQNmDPi4Y89dW251X5Bl4Z1--Eg2BTkAwr63SeUaRI4wI8RwX7LgtHN0g">http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACxUxJ46tcIiZKWG81HlNYBQNmDPi4Y89dW251X5Bl4Z1--Eg2BTkAwr63SeUaRI4wI8RwX7LgtHN0g</a>'></script> <br>
<script src="<a href="http://openlayers.org/api/OpenLayers.js">http://openlayers.org/api/OpenLayers.js</a>"></script> <br> <script type="text/javascript"> <br> var map, gbase, points, selectControl, selectedFeature;<br>
var proj = new OpenLayers.Projection("EPSG:4326");<br> var bounds = new OpenLayers.Bounds(6.190,50.517,6.205,50.535);<br> bounds.transform(proj, map.getProjectionObject());<br><br> var options = { <br>
projection: new OpenLayers.Projection("EPSG:900913"),<br> displayProjection: new OpenLayers.Projection("EPSG:4326"),<br> units: "m",<br> numZoomLevels: 18,<br> maxResolution: 156543.0339,<br>
maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34) <br> };<br><br> function onPopupClose(evt) {<br> selectControl.unselect(selectedFeature);<br> }<br> function onFeatureSelect(feature) {<br>
selectedFeature = feature;<br> popup = new OpenLayers.Popup.FramedCloud("chicken", <br> feature.geometry.getBounds().getCenterLonLat(),<br> null,<br>
"<div" + <a href="http://feature.id">feature.id</a> +"></div>",<br> null, true, onPopupClose);<br> popup.setBackgroundColor("red");<br>
popup.setBorder("10px");<br> feature.popup = popup;<br> map.addPopup(popup);<br> }<br><br> function onFeatureUnselect(feature) {<br> map.removePopup(feature.popup);<br>
feature.popup.destroy();<br> feature.popup = null;<br> } <br> <br> function init() { <br> map = new OpenLayers.Map('map',options); <br> // Add google layers <br>
gbase = new OpenLayers.Layer.Google( "Google Physical", {type: G_PHYSICAL_MAP}, {'sphericalMercator': true} ); <br><br> map.addLayer(gbase);<br><br> // Add Bornes Frontières Geometry<br>
var Bornes = new Array();<br> <br> Bornes[0] = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(6.20475,50.52167));<br> Bornes[1] = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(6.20440,50.52148)); <br>
//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")));<br> //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")));<br>
<br> points = new OpenLayers.Layer.Vector("Infos", {projection: new OpenLayers.Projection("EPSG:4326")});<br> points.addFeatures(Bornes);<br> <br> map.addLayer(points);<br>
<br> // Ajout des Controls <br> map.addControl(new OpenLayers.Control.LayerSwitcher()); <br> map.addControl(new OpenLayers.Control.ScaleLine({div:document.getElementById("scale")})); <br> map.addControl(new OpenLayers.Control.MousePosition({div:document.getElementById("mouseposition")})); <br>
<br> selectControl = new OpenLayers.Control.SelectFeature(points,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});<br> map.addControl(selectControl);<br> selectControl.activate();<br>
<br> map.zoomToExtent(bounds);<br> } <br> <br> </script> <br> </head> <br> <body onload="init()"> <br> <h4 id="title">Wallonie with GoogleMaps</h4> <br>
<div> Carte dynamique OpenLayers</div> <br> <div style="width:100%; height:80%" id="map"></div> <br> <div align="right" id="mouseposition"></div> <br>
<div align="right" id="scale"> </div> <br> </body> <br></html><br>