[GIS] offset point using openlayers

Question

Im trying to draw a point on a my map using openlayers which has a google maps baselayer. However the point appears way above where i click with the mouse. Im presuming that this is because i have not set the shepricalmercator of the base layer to true however when i do the map centers over the ocean, drag doesnt seem to work anymore and the whole thing hangs terribly. Any ideas. My code is below

var GiffordGIS = {
  vectors:null,
  map:null, 
  geographic: new OpenLayers.Projection("EPSG:4326"),
  mercator: new OpenLayers.Projection("ESPG:900913"),

LayerSwitchersStyles:{
    Selected:"dataLayersDivSelected",
    UnSelected:"dataLayersDiv" 
},  

initialize:function(){
    //vars
    var GoogleMap, CenterPoint, GeoGraphicArea, controls,
         styleMap, symbolizer, Panel, $LayerSwitcher;

    console.log("Ini");
    OpenLayers.ProxyHost = "host.ashx?url=";

    CenterPoint = new OpenLayers.LonLat(-1.332951, 50.839769).transform(this.geographic, this.mercator);
    GeoGraphicArea = new OpenLayers.Bounds(-1.423073, 50.835432, -1.266861, 50.839877).transform(this.geographic, this.mercator);

    this.map = new OpenLayers.Map("Map", {
            maxExtent: GeoGraphicArea,
            restrictedExtent: GeoGraphicArea,
            bounds:GeoGraphicArea,
            controls:[],
            units: 'm',
            displayProjection: this.geographic
       }
    );

    //add google map
   GoogleMap = new OpenLayers.Layer.Google(
        "GoogleSatellite",{
            type:G_SATELLITE_MAP,
            isBaseLayer:true,
            numZoomLevels: 21
        } 
    ); 

    symbolizer = OpenLayers.Util.applyDefaults({
        fillColor: "yellow",
        pointRadius: 4,
        fillOpacity : 1,
        strokeColor: "black" 
    },
    OpenLayers.Feature.Vector.style["default"]
    );    

    // prepare to style the data
    styleMap = new OpenLayers.StyleMap({"default":symbolizer, "select" : {pointRadius:50}});

    this.vectors = new OpenLayers.Layer.Vector("Vectors", {
        strategies: [
            new OpenLayers.Strategy.BBOX(), 
            new OpenLayers.Strategy.Save({auto:true})
        ],
        Projection:this.geographic,
        styleMap:styleMap, 
        protocol: new OpenLayers.Protocol.WFS({
            version: "1.1.0", 
            url:  "http://soiisdev:8080/geoserver/wfs",
            featureNS : "http://www.opengeospatial.net/cite", 
            featureType: "poi",
            srsName: "EPSG:4326",
            geometryName: "the_geom",
            extractAttribute: true  
        })
    }); 

    this.map.addLayers([GoogleMap, this.vectors]);
    this.map.setCenter(CenterPoint, 15);

    controls = {
        ZoomIn : new OpenLayers.Control.ZoomBox(
            {title: "Zoom in box", out: false, displayClass:"olControlZoomBox"}
        ),
       ZoomOut: new OpenLayers.Control.ZoomBox(
            {title: "Zoom Out Box", out: true, displayClass:"olControlZoomOut"}
        ),
       Navigate: new OpenLayers.Control.Navigation(
            {title: "Navigate", displayClass:"olNavigate"}
       ),
       Point: new OpenLayers.Control.DrawFeature(
         this.vectors, OpenLayers.Handler.Point,{
            displayClass: 'olHandlerPoint'
         }
       ),
       Polygon: new OpenLayers.Control.DrawFeature(
         this.vectors, OpenLayers.Handler.Polygon, {
            displayClass: 'olHandlerPolygon'
         }
       ),
       Delete: new OpenLayers.Control.SelectFeature(
           this.vectors,
           {onSelect:this.DeleteFeature},
           {displayClass: 'olControlSelectFeature'}   
       ),
       Modify: new OpenLayers.Control.ModifyFeature(this.vectors, {title:"Modify", displayClass: "olModifyfeature"})
    }

    //create panel to add controls to
    Panel = new OpenLayers.Control.Panel({displayClass:"olayersControlPanel", div:document.getElementById("Toolbar")});
    //add the controls 
    Panel.addControls([
        controls.ZoomIn,
        controls.ZoomOut,
        controls.Navigate,
        controls.Point,
        controls.Polygon,
        controls.Delete,
        controls.Modify  
    ]);

    //add the panel to the map
    this.map.addControl(Panel);
    //activate navigation
    controls.Navigate.activate();
    $LayerSwitcher = $("#LayerSwitcher");
    //set layerswitcher panel's bottom position
    $LayerSwitcher.css("bottom", (((this.map.layers.length - 1) * 31) * -1));
    this.CreateLayerSwitcher(this.map, $LayerSwitcher);
    this.BindLayerSwitcherAnimation($("#LayersPicker"), $LayerSwitcher)               
},

DeleteFeature:function(feature){
    this.vectors.removeFeatures(feature);
},

CreateLayerSwitcher:function(map, $LayerSwitcher){
    if($LayerSwitcher.length == 0){
        alert("Error cannot find LayerSwitcher panel");
        return null 
   }    
   //loop through all layers in the viewport
   for(var i = 0; i < map.layers.length; i++){
        //skip baselayer as this always needs to be on
        if(map.layers[i].isBaseLayer){
            continue; 
        } 

        //create menu 
        $("<div/>", {
            html:map.layers[i].name,
           //toggle class depending on layer visibility 
            className: (map.layers[i].getVisibility())?this.LayerSwitchersStyles.Selected:this.LayerSwitchersStyles.UnSelected 
        }).click(this.ToggleLayer(map.layers[i])).appendTo($LayerSwitcher);  
   }         
},

BindLayerSwitcherAnimation:function($LayersPicker, $LayerSwitcher){     
    $LayersPicker.click(function(){
        $LayerSwitcher.animate({
            bottom:GiffordGIS.GetBottom($LayerSwitcher)
        }, 500);
   })          
},

GetBottom:function($obj){
    return (parseInt($obj.css("bottom")) == parseInt($obj.css("height")) * -1)
        ?0:(parseInt($obj.css("height")) * -1);
},

ToggleLayer:function (layer){
    return function(e){
        var obj = e.target;
        var className = e.target.className;

        //toggle class 
        obj.className = (className == GiffordGIS.LayerSwitchersStyles.Selected)?
            GiffordGIS.LayerSwitchersStyles.UnSelected:GiffordGIS.LayerSwitchersStyles.Selected; 

        //toggle visibility 
        layer.setVisibility((layer.getVisibility())?false:true);   
    } 
}           
}

$(document).ready(function(){
   GiffordGIS.initialize();
});

Answer 1

You are requesting your WFS layer in a different projection than your map and thus forcing OpenLayers to reproject it for you (in the browser). Change the projection of your request to 900913 and it should line up nicely and be much speedier.