Draw polygon openlayers with wgs84 coordinates

Question

i found this code in this site, this is the link

var options = {
    div: "map",
    zoom: 13,
    center: [-9075004.4955698, 5028040.5259088],
    layers: [
        new OpenLayers.Layer.OSM()
    ]
},
source = [
    [{x: -9075004, y: 5028040}, {x:-9079132, y: 5025403}, {x: -9072673, y: 5023568}],
    [{x: -9074004, y: 5026040}, {x:-9073132, y: 5027403}, {x: -9074673, y: 5026568}],
    [{x: -9073004, y: 5027040}, {x:-9072132, y: 5029403}, {x: -9075673, y: 5028568}]
],
polygonList = [],
multuPolygonGeometry,
multiPolygonFeature,    
vector = new OpenLayers.Layer.Vector('multiPolygon'),
map = new OpenLayers.Map(options);


for (var i=0; i<source.length; i+=1) {
    var pointList = [];
    for (var j=0; j<source[i].length; j+=1) {
        var point = new OpenLayers.Geometry.Point(source[i][j].x, source[i][j].y);
        pointList.push(point);
    }
    var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
    var polygon = new OpenLayers.Geometry.Polygon([linearRing]);
    polygonList.push(polygon);
}
multuPolygonGeometry = new OpenLayers.Geometry.MultiPolygon(polygonList);
multiPolygonFeature = new OpenLayers.Feature.Vector(multuPolygonGeometry);

vector.addFeatures(multiPolygonFeature);
map.addLayer(vector);

What i need is to be able to put coordinates as lat/lon expression. I have read it's WGS84 converted. I have read this answer too, but i don't know how to make the firs code working with WGS84 coordinates.

I use Proj4 to do those kinds of coordinate conversions. Be warned though, Proj4 is tough to work with, though it is very powerful. http://trac.osgeo.org/proj/ — Stephen Johnson, Jan 27 '14 at 23:56
Sorry, I don't have more specifics. I don't have my Proj4 code in front of me. If you have any questions ping me again and I will find my usage of Proj4. — Stephen Johnson, Jan 28 '14 at 00:14

score 0 · Answer 1 · answered Jan 28 '14 at 10:31

Your question is not very clear, I assume you want to use the stated code, but with WGS84 coordinates.

Your map has a specific projection, which can differ based on the map you are using (Google may use a different one than OpenStreetMaps). Chance is, it's not WGS84.

But OpenLayer's geometric objects offer the transform method:

// EPSG:4326 == WGS84
new OpenLayers.Geometry.Point(8.54, 47.37).transform(
    new OpenLayers.Projection("EPSG:4326"),
    map.getProjectionObject()
)

this converts from WGS84 to the map's current projection

Yes, it's what i needed. Thanks for your answer. And reading your post, i noticed i forgot to say i was using openstreetamp. Sorry. — Juan Facundo Suárez, Jan 28 '14 at 11:19

score 0 · Answer 2 · edited May 23 '17 at 11:56

Well, i couldn't answer myself earlier, so here it goes. I hope to be clear enough:

From the this code and from reading openlayers and seeing its examples, added the next lines on the top of the script:

var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

Next, i inserted de next line:

point.transform(fromProjection, toProjection);

so the code remained so:

  <script type="text/javascript">
    $(document).ready(function() {
      var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
      var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
      var options = {
        div: "map",
        zoom: 13,
        center: [-9075004.4955698, 5028040.5259088],
        layers: [
            new OpenLayers.Layer.OSM()
        ]
      },
      source = [
        [{x: -9075004, y: 5028040}, {x:-9079132, y: 5025403}, {x: -9072673, y: 5023568}],
        [{x: -9073004, y: 5027040}, {x:-9072132, y: 5029403}, {x: -9075673, y: 5028568}]
      ],
      fuente = [
        //[{x: -9074004, y: 5026040}, {x:-9073132, y: 5027403}, {x: -9074673, y: 5026568}]
        [{x: -68.06400954723358, y: -38.95894160235222}, {x:-68.0585914850235, y: -38.95984678037724}, {x: -68.0654364824295, y: -38.964405865315236}]
      ],

      polygonList = [],
      multuPolygonGeometry,
      multiPolygonFeature,    
      vector = new OpenLayers.Layer.Vector('multiPolygon'),
      map = new OpenLayers.Map(options);

      for (var i=0; i<source.length; i+=1) {
          var pointList = [];
          for (var j=0; j<source[i].length; j+=1) {
              var point = new OpenLayers.Geometry.Point(source[i][j].x, source[i][j].y);
              pointList.push(point);
          }
          var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
          var polygon = new OpenLayers.Geometry.Polygon([linearRing]);
          polygonList.push(polygon);
      }
      multuPolygonGeometry = new OpenLayers.Geometry.MultiPolygon(polygonList);
      multiPolygonFeature = new OpenLayers.Feature.Vector(multuPolygonGeometry);

      vector.addFeatures(multiPolygonFeature);
      map.addLayer(vector);

      for (var i=0; i<fuente.length; i+=1) {
          var pointList = [];
          for (var j=0; j<fuente[i].length; j+=1) {
              var point = new OpenLayers.Geometry.Point(fuente[i][j].x, fuente[i][j].y);
              // transform from WGS 1984 to Spherical Mercator
              point.transform(fromProjection, toProjection);
              pointList.push(point);
          }
          var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
          var polygon = new OpenLayers.Geometry.Polygon([linearRing]);
          polygonList.push(polygon);
      }
      multuPolygonGeometry = new OpenLayers.Geometry.MultiPolygon(polygonList);
      multiPolygonFeature = new OpenLayers.Feature.Vector(multuPolygonGeometry);

      vector.addFeatures(multiPolygonFeature);
      map.addLayer(vector);

    });

In source array we have two spherical mercator polygons defined, while in fuente array we have one WGS1984 polygon defined.

Draw polygon openlayers with wgs84 coordinates

2 Answers2