Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm stuck adding a vector point in lat/lon on top of a Google layer in OpenLayers. The point is moving when I pan the map. This doesn't happen if I replace the Google layer with a layer in WGS84. How can I fix this?

map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());

var gmap = new OpenLayers.Layer.Google(
            "Google Streets", 
            {numZoomLevels: 20}
           );
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

map.addLayers([gmap,pointLayer]);
map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
pointLayer.addFeatures([pointFeature]);

I've tried to follow http://docs.openlayers.org/library/spherical_mercator.html but without success.

share|improve this question
    
My problem is related to the use of Jquery on the same page. Works fine if I retrieve all references to Jquery. –  user14048 Jan 8 '13 at 14:36

4 Answers 4

up vote 10 down vote accepted
+100

You need to add a few changes to get the required results:

  1. Add the sphericalMercator: true property to your Google layer so vector layers are shown correctly on top of your Google base layer (this is the reason for the shifting geometry).
  2. Add in the maxExtent property of your Google layer, otherwise the centre of the map will not be set correctly. The extent shown below is the extent of the world in Mercator coordinates.
  3. As user1795 stated your point geometry has to be reprojected from 4326 to Web Mercator to appear correctly on the map.
  4. This also applies to the setCenter LonLat so you need to transform this too.

Working code below:

            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher());

            var proj = new OpenLayers.Projection("EPSG:4326");

            var gmap = new OpenLayers.Layer.Google("Google Streets", {
                sphericalMercator: true,
                'maxExtent': new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
            });
            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

            map.addLayers([gmap, pointLayer]);
            var lonlat = new OpenLayers.LonLat(16.373056, 48.208333);
            lonlat.transform(proj, map.getProjectionObject());
            map.setCenter(lonlat, 5);

            var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
            point = point.transform(proj, map.getProjectionObject());
            //console.log(point);
            var pointFeature = new OpenLayers.Feature.Vector(point, null, null);
            pointLayer.addFeatures([pointFeature]);
share|improve this answer
    
That works great! Looks like OpenLayers is not really intuitive when it comes to transformations. Is it the 'spericalMercator' option that actually enables reprojections? –  underdark Apr 18 '11 at 16:57
1  
Agree it's not intuitive..the sphericalMercator option adds the following functions that allow it to work with data in other projections - dev.openlayers.org/docs/files/OpenLayers/Layer/… –  geographika Apr 18 '11 at 18:22

This is a projection problem, you have to transform the projection of the point into that of base layer(google map here). The following code should work

    map = new OpenLayers.Map('map');
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", 
        {numZoomLevels: 20}
    );
    var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

    map.addLayers([gmap,pointLayer]);
    map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

    var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
    point.transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
    var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
    pointLayer.addFeatures([pointFeature])

This is because the default projection of google map(spherical mercator) is 900913 and that of a simple point in lonlat in 4326.

Please make sure that the point is set as (longitude,latitude) and not as (latitude,longitude).

share|improve this answer
    
Adding the transformation makes the point disappear on my map. My OpenLayers version is 2.9.1 if it makes a difference. –  underdark Apr 16 '11 at 8:53
    
The point.transform did the trick for me! –  Stefan Dec 4 '12 at 11:11

When you are working with Google Maps JS API, you should be careful on version. There is default to go with development version Google JS Maps API. Check the page: http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

And Google Maps JS team fixing bugs too. Check http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

In future, mention the Google Maps API version in the question. v3.3 didn't have any issues with Openlayers as mostly used by developers.

share|improve this answer
    
Hi Senthil, I'm not sure how Google Maps JS API versions affect my problem with OpenLayers. –  underdark Apr 16 '11 at 8:57
    
Hi Underdark, i had problem with v3.4 when i used with Openlayers and then specifically using 3.3 and when use google maps trunk version, results are unpredictable as development ongoing. Have you tried with versioning? Even though you are using openlayers, Google maps api underlying to that. –  Senthil Apr 16 '11 at 9:04

I think it is a projection issue.

Have you tried reporting the centroid of the point when the map pans? You might be able to see if someting is changing.

But from what i cna see of yuor code, you'd adding WGS84 point to a different corordsys

share|improve this answer
    
By the way, have you tried querying the projection of the map you have, just to see what it is actually set as? –  Hairy Apr 18 '11 at 10:10
    
and finally, sorry, but there is a way to transform your point if you are havign projection issues: var a = new OpenLayers.LonLat(3,53).transform(ll,new OpenLayers.Projection('EPSG:900913')); –  Hairy Apr 18 '11 at 10:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.