Draw polygons from an array in OL3

Question

I have an query that produces an array of coordinates like so: 95.61,38.60 95.22,37.98 95.60,37.66 94.97,37.65 (long/lat separated by "," and coordinates separated by a space).

How can I use these arrays to dynamically draw polygons on my map?

Ideas?

edit 1

Long answer… I have a table with rows like so: Area 1 lot1 95.61,38.60 95.22,37.98 95.60,37.66 94.97,37.65 Area 1 lot2 95.63,38.65 95.27,37.98 94.60,39.66 92.97,37.64 Area 2 lot 3 95.64,38.63 95.24,37.95 95.66,37.62 94.94,37.61 The first column has a checkbox. As I select a checkbox, I want to draw a polygon using the coordinates from each row.

Answer 1

Of course you can.

You must translate your string to an array of coordinates readable by your map.

Something like that:

var polyCoords = [];
var coords = "95.61,38.60 95.22,37.98 95.60,37.66 94.97,37.65".split(' ');

for (var i in coords) {
  var c = coords[i].split(',');
  polyCoords.push(ol.proj.transform([parseFloat(c[0]), parseFloat(c[1])], 'EPSG:4326', 'EPSG:3857'));
}

var feature = new ol.Feature({
    geometry: new ol.geom.Polygon([polyCoords])
})

var layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [feature]
    })
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'sat'})
    }),
    layer            
  ],
  view: new ol.View({
    center: ol.proj.transform([95.22, 37.98], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
  })
});

Here a live example