[GIS] Convert OL3 drawn polygon to WKT for inserting to PostGIS

Question

Essentially what I am trying to accomplish is to have a map where the user can draw a geometry, fill in a form and have the record, along with the geometry, saved to PostGIS. I'm new to Javascript (and newer still with openlayers3) so everything I've managed to piece together is from random corners of the internet.

Below is my full script, which currently can get a map, have a geometry drawn on it and finally show the coordinates in an empty < div id="wktgeom" > from a listener on 'drawend'. I've tried this solution:

var ol3Geom = vectorSeleccion[x].getGeometry();
var format = new ol.format.WKT();
var wktRepresenation  = format.writeGeometry(ol3Geom);

without success. I've tried other things but i get an output to the < div > as [object Object]. This could easily be my lack of knowledge and I'm putting code in the wrong place (currently i'm sticking everything into the listener which I can get the coordinates to output from).

Can someone please show me how to fix my code so that a single polygon drawn on the map outputs the geometries coordinates as WKT (it will only ever be a single geometry), and also any answers have some form of context to my script so I 100% know I'm putting it in the right place?

    <script type="text/javascript">
      var source = new ol.source.Vector({wrapX: false});

      var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 155, 155, 0.4)'
          }),
          stroke: new ol.style.Stroke({
            color: '#ff0000',
            width: 2
          })
        })
      });

      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }), vector
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([-0.7594, 52.0406]),
          zoom: 8
        })
      });

      var typeSelect = document.getElementById('type');

  var draw; // global so we can remove it later
  function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
      var geometryFunction, maxPoints;
      if (value === 'Square') {
        value = 'Circle';
        geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
      } else if (value === 'Box') {
        value = 'LineString';
        maxPoints = 2;
        geometryFunction = function(coordinates, geometry) {
          if (!geometry) {
            geometry = new ol.geom.Polygon(null);
          }
          var start = coordinates[0];
          var end = coordinates[1];
          geometry.setCoordinates([
            [start, [start[0], end[1]], end, [end[0], start[1]], start]
          ]);
          return geometry;
        };
      }
      draw = new ol.interaction.Draw({
        source: source,
        type: /** @type {ol.geom.GeometryType} */ (value),
        geometryFunction: geometryFunction,
        maxPoints: maxPoints
      });


      //Here is where I've tried outputting WKT using the other solution without success          
      draw.on('drawend',function(e){
        document.getElementById('wktgeom').innerHTML = e.feature.getGeometry().getCoordinates();
      })
      map.addInteraction(draw);
    }

  }

  /**
   * Handle change event.
   */
  typeSelect.onchange = function() {
    map.removeInteraction(draw);
    addInteraction();
  };

  addInteraction();
</script>

Answer 1

Found it. After a huge amount of trial and error and cleaning up of unwanted code, using this answer gave me exactly what I wanted.

var format = new ol.format.WKT(),
wkt = format.writeGeometry(yourFeature.getGeometry());

Including this code to my 'drawend' listener was stupidly simple. Below is my script including the fixed code for context.

<script type="text/javascript">

     var source = new ol.source.Vector();

      var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 155, 155, 0.4)'                           
          }),
          stroke: new ol.style.Stroke({
            color: '#ff0000',                                           
            width: 2                                                    
          }),
          image: new ol.style.Circle({
            radius: 5,                                                  
            fill: new ol.style.Fill({
            color: '#ff0000'                                            
            })
          })
        })
      });

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var map = new ol.Map({
        target: 'map',                                                  
        layers: [raster, vector],                                       
        view: new ol.View({
        center: ol.proj.fromLonLat([-0.7594, 52.0406]),                 
          zoom: 12                                                      
        })
      });

      var typeSelect = document.getElementById('type');             

      var draw;
      function addInteraction() {
        var value = typeSelect.value;                                       
        if (value !== 'None') {                                             
          draw = new ol.interaction.Draw({                                  
            source: source,                                                 
            type: /** @type {ol.geom.GeometryType} */ (value),              
          });

          //FIXED CODE HERE!
          draw.on('drawend',function(e){                                    
            var format = new ol.format.WKT(),
            wkt = format.writeGeometry(e.feature.getGeometry())
            $('#wktgeom').html(wkt);
          })
          map.addInteraction(draw);                                         
        }
      };


      /**
       * Handle change event.
       */
      typeSelect.onchange = function() {                                    
        map.removeInteraction(draw);                                        
        addInteraction();                                                   
      };
    </script>