[GIS] Circle not visible

openlayers-2

I am trying to create a GeodesicPolygon using using the code given in http://geographika.co.uk/samples/geodesic/GeodesicPolygon.js. But the circle is not visible, I guess its a projection problem but couldn't find where it is. Any help plz……….

My code goes like this:

<html>
<head>
<title>OpenLayers Example</title>
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="./geodesicpolygon.js">
    </script>
</head>
<body>
  <div style="width:100%; height:100%" id="map"></div>
  <script defer='defer' type='text/javascript'>
 var options = {
            projection: new OpenLayers.Projection("EPSG:4326"),
            displayProjection: new OpenLayers.Projection("EPSG:900913"),
            units: "m",
            numZoomLevels: 18,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                             20037508, 20037508.34)
        };
 var map = new OpenLayers.Map('map',options);

 <!--var layer = new OpenLayers.Layer.WMS( "World Map","http://labs.metacarta.com/wms-   c/Basic.py?", {layers: 'basic', format: 'image/png' } );-->
 var layer = new OpenLayers.Layer.Google("google maps",{sphericalMercator: true});
 var pois = new OpenLayers.Layer.Text( "My Points",
                { location:"./datanew.txt",
                  projection: map.projection
                });
 map.addLayers([layer,pois]);
 var projection1 = map.getProjectionObject();
 var origin_xy=new OpenLayers.Geometry.Point(78.5046,17.3157);
 <!--var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(origin_xy, 5, 50);-->
 var circle=OpenLayers.Geometry.Polygon.createGeodesicPolygon(origin_xy,5, 50, 45,projection1);
 circle.transform(new OpenLayers.Projection("ESPG:4326"),new     OpenLayers.Projection("ESPN:900913"));
 var vlayer = new OpenLayers.Layer.Vector("Editable Vectors");
  map.addLayer(vlayer);
 vlayer.addFeatures(new OpenLayers.Feature.Vector(circle,null,null));
 map.zoomToMaxExtent();
  </script>
</body>
</html>

Best Answer

At a first glance OpenLayers.Projection("ESPN:900913") should be OpenLayers.Projection("EPSG:900913")

Also the addFeatures function takes an array, not a single feature, so it should be:

vlayer.addFeatures([new OpenLayers.Feature.Vector(circle)]);

The code below works. The createGeodesicPolygon actually transforms the feature back into the projection you pass into the function. The origin point is also assumed to be in the same projection you pass to createGeodesicPolygon. As you define yours in a different projection (4326) you should transform it beforehand (although strangely this does not seem to make a difference in this case - possibly as the point is left untransformed if invalid coords are returned). 

var options = {projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:900913"),
            units: "m",
            numZoomLevels: 18,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)};
var map = new OpenLayers.Map('map',options);
var layer = new OpenLayers.Layer.Google("google maps",{sphericalMercator: true});
map.addLayer(layer);
var origin_xy=new OpenLayers.Geometry.Point(78.5046,17.3157);
//following line not actually required
origin_xy.transform(new OpenLayers.Projection("ESPG:4326"),new OpenLayers.Projection("EPSG:900913"));
var circle=OpenLayers.Geometry.Polygon.createGeodesicPolygon(origin_xy, 500000, 50, 45, map.getProjectionObject());
var vlayer = new OpenLayers.Layer.Vector("Editable Vectors");
map.addLayer(vlayer);
vlayer.addFeatures([new OpenLayers.Feature.Vector(circle)]);
map.zoomToMaxExtent();
Related Question