OpenLayers.source is undefined - Open layers,Open Street map

Question

I was planning to draw polygon from lat long values referring this code. open layers 3 how to draw a polygon programmically?

var polyCoordinates =[[1.300910900488229, 44.28372648003116],[1.3373031124022878, 44.13311552125895],[1.6648330196289067, 44.12030076099872]];
var polygon = new OpenLayers.Geometry.Polygon([polyCoordinates]);

// Create feature with polygon.
var feature = new OpenLayers.Feature(polygon);

// Create vector source and the feature to it.
var vectorSource = new OpenLayers.source.Vector();

// Create the vectorial layer
var vectorLayer = new OpenLayers.Layer.Vector('Vector Layer', {
source: vectorSource
styleMap: new OpenLayers.StyleMap({
    'default': OpenLayers.Util.applyDefaults({
            strokeWidth: 3,
            graphicName: 'triangle',
            pointRadius: '${radius}',
            rotation: '${angle}'
        }, OpenLayers.Feature.Vector.style['default']
    ),
    'select': OpenLayers.Util.applyDefaults({
            pointRadius: '${radius}'
        }, OpenLayers.Feature.Vector.style['select']
    )
})
});

OpenLayers.source is undefined is showing as error. Any help would be appreciated.

Answer 1

Here is a proper way to do this in OpenLayers 3, which has a different API than previous versions.

var polyCoordinates =[
    [1.300910900488229, 44.28372648003116],
    [1.3373031124022878, 44.13311552125895],
    [1.6648330196289067, 44.12030076099872]];

var polygon = new ol.geom.Polygon([polyCoordinates]);

polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));

// Create feature with polygon.
var feature = new ol.Feature({
    geometry: polygon
});

// Create vector source and the feature to it.
var vectorSource = new ol.source.Vector({
    features: [feature]
});

// Create the vectorial layer
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#eedd00',
            width: 3
        })
    })
});

Edit: If you stick with OpenLayers 2, you need to create the polygon via linear ring. The setup is a little bit different. There is no OpenLayers source to deal with.

var polyCoordinates =[
    [1.300910900488229, 44.28372648003116],
    [1.3373031124022878, 44.13311552125895],
    [1.6648330196289067, 44.12030076099872]];

// Create the polygon via linear ring
var points = [];

for (var i = 0; i < polyCoordinates.length; i++) {
    coord = polyCoordinates[i];
    points.push(new OpenLayers.Geometry.Point(coord[0], coord[1]));
}

var linearRing = new OpenLayers.Geometry.LinearRing(points);
var polygon = new OpenLayers.Geometry.Polygon([linearRing]);

var srcProj = new OpenLayers.Projection("EPSG:4326"); 
var targetProj = new OpenLayers.Projection("EPSG:3857");
polygon.transform(srcProj, targetProj);

// Create feature with polygon.
var feature = new OpenLayers.Feature.Vector(polygon);

// Create the vectorial layer
var vectorLayer = new OpenLayers.Layer.Vector('Vector Layer', 
    OpenLayers.Feature.Vector.style['default']   
);

vectorLayer.addFeatures([feature]);

Answer 2

var sitePoints = [];
var coordinates =[{"long":1.300910900488229,"lat":44.28372648003116},
                    {"long":1.3373031124022878,"lat":44.13311552125895},
                    {"long":1.6648330196289067,"lat":44.12030076099872}];

var siteStyle = {
        label:'ring',
        title: 'press to close as a ring',
        cursor: "pointer",
        fontSize: '8px',
        fontColor: '#222',
        pointRadius: 10,
        fillColor: '#cccccc',
        strokeColor: '#444444'  
};

var epsg4326 = new OpenLayers.Projection("EPSG:4326");
for (var i in coordinates) {
  var coord = coordinates[i];
  var point = new OpenLayers.Geometry.Point(coord.long, coord.lat);
  // transform from WGS 1984 to Spherical Mercator
  point.transform(epsg4326, map.getProjectionObject());
  sitePoints.push(point);
}

 console.log(sitePoints);

var linearRing = new OpenLayers.Geometry.LinearRing(sitePoints);
var geometry = new OpenLayers.Geometry.Polygon([linearRing]);
var polygonFeature = new OpenLayers.Feature.Vector(geometry, null,   siteStyle);
vectorLayer.addFeatures([polygonFeature]);
map.addLayer(vectorLayer);