[OpenLayers-Dev] Please, help with vectors projection over google layer (really desperate)

Fri Jun 6 09:48:17 EDT 2008

2008/6/6 Esteban olm <esteban.olm at gmail.com>:
> Hello,
>
> I need help! I can not understand why I can not see a line in openlayers.
> If I don't use projections, I can see it, but then the line is not properly
> drawn in Firefox (but yes in Explorer).
> I know that problem is a projection problem (I have read a lot in Internet),
> I know Google use Mercator, but I don't know how to solve it.
>
> Please help !! There is something I can not find.
> Here is the entire HTML page from what I think is the best approximation
> (but it doesn't draw the line):

See my comments in the code.

> ----------------------------------------------------------------------------------------------------------------------
> <html>
> <head>
>     <title>prueba</title>
>
>     <!-- this google key is fo HTTP://LOCALHOST, so it should go in your PC
> -->
>     <script
> src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAAdktgbP3W_jzENycyyxYmhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQAmpwRv0-s77497-2GnWVaa_ulwA"
> type="text/javascript"></script>
>     <script src="http://openlayers.org/dev/OpenLayers.js"></script>
>
>     <script type="text/javascript">
>         var lat=42.508;
>         var lon=1.118;
>         var map; //complex object of type OpenLayers.Map
>
>         function init() {
>
>            //Initialise the 'map' object
>             map = new OpenLayers.Map ("map", {
>                 controls:[
>                     new OpenLayers.Control.Navigation(),
>                     new OpenLayers.Control.PanZoomBar(),
>                     new OpenLayers.Control.Attribution()],
>                 maxExtent: new
> OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
>                 maxResolution: 156543.0399,
>                 units: 'm',
>                 projection: new OpenLayers.Projection("EPSG:900913")
>             } );
>             var layergoogle = new OpenLayers.Layer.Google("Google Normal",
>                { type: G_NORMAL_MAP   },
>                {
>                    'sphericalMercator': true,
>                    'projection': new OpenLayers.Projection("EPSG:900913")
>                }

Place the 'type' and 'sphericalMercator' properties in the same
object. Remove the 'projection' property.

{
    'type': G_NORMAL_MAP,
    'sphericalMercator': true
}

>             );
>             var vectores = new OpenLayers.Layer.Vector ("Vector Features",
>                { 'projection':  new OpenLayers.Projection("EPSG:4326"),
>                 'displayProjection': new
> OpenLayers.Projection("EPSG:900913")
>                }
>             );

You do not need any options for the vector layer:

var vectores = new OpenLayers.Layer.Vector ("Vector Features");

>             map.addLayer(layergoogle);
>             map.addLayer(vectores);
>
>             //line near Barcelona, spain, for example
>             var p1 = new OpenLayers.Geometry.Point(2, 41);
>             var p2 = new OpenLayers.Geometry.Point(41, 2);
>             var points = [p1,p2];
>             var lineString = new OpenLayers.Geometry.LineString(points);

Reproject your line string before creating the feature with it:

lineString.transform(
    new OpenLayers.Projection("EPSG:4326"),
    new OpenLayers.Projection("EPSG:900913")
);

>             var lineFeature = new OpenLayers.Feature.Vector(lineString,
> null, null);
>             features = [lineFeature];
>             vectores.addFeatures( [features] );
>
>             var lonLat = new OpenLayers.LonLat(2, 41)

Either pass mercator coordinates to the LonLat constructor or
reproject it before passing to setCenter:

lonLat.transform(
    new OpenLayers.Projection("EPSG:4326"),
    new OpenLayers.Projection("EPSG:900913")
);

>             map.setCenter(lonLat, 7);
>         }
>     </script>
> </head>
> <body onload="init();">
>     <div style="width:500px; height:300px" id="map"></div>
> </body>
> </html>

Hope this helps,

Note that I haven't tested anything so there might still be errors lurking.
--
Eric