title: How can I serialize all features on a layer to json using openlayers 3
body: <p>I want to allow a user to draw a polygon on a map using openlayers 3 and then when the user presses "save" I want to put the json for the polygon into a hidden field so that it can be sent back to the server and saved in a database. </p>
  
  <p>I have the code to draw the polygon working (below), and then I have written a simple test function that fires when a button is pressed. The getFeatures() call fails. In firebug the message shown in the console is "TypeError: vectorsource.getFeatures is not a function". This is the click function:</p>
  
  <pre><code>function map1_generateJSON()
  {
      var geojson  = new ol.parser.GeoJSON;
      var features = vectorsource.getFeatures();
      var json     = geojson.write(features);
      alert(json);
  }
  </code></pre>
  
  <p>The openlayers base I am using is</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ol3js.org/en/master/build/ol.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is the code that displays the map and allows the user to draw a polygon (it's mostly copied from one of the standard openlayers examples at <a href="http://ol3js.org/en/master/examples/draw-features.html" rel="nofollow">Open Layers 3 draw features example</a>). </p>
  
  <pre><code>var vectorsource    = new ol.source.Vector();
  var vector = new ol.layer.Vector({
    source: vectorsource,
    style: new ol.style.Style({
      rules: [
        new ol.style.Rule({
          filter: 'renderIntent(\"selected\")',
          symbolizers: [
            new ol.style.Shape({
              fill: new ol.style.Fill({
                color: '#0099ff',
                opacity: 1
              }),
              stroke: new ol.style.Stroke({
                color: 'white',
                opacity: 0.75
              }),
              size: 14
            }),
            new ol.style.Fill({
              color: '#ffffff',
              opacity: 0.5
            }),
            new ol.style.Stroke({
              color: 'white',
              width: 5
            }),
            new ol.style.Stroke({
              color: '#0099ff',
              width: 3
            })
          ]
        }),
        new ol.style.Rule({
          filter: 'renderIntent(\"temporary\")',
          symbolizers: [
            new ol.style.Shape({
              fill: new ol.style.Fill({
                color: '#0099ff',
                opacity: 1
              }),
              stroke: new ol.style.Stroke({
                color: 'white',
                opacity: 0.75
              }),
              size: 14,
              zIndex: 1
            })
          ]
        })
      ],
      symbolizers: [
        new ol.style.Shape({
          fill: new ol.style.Fill({
          color: 'black',
          opacity: 1
          }),
          size: 14
        }),
        new ol.style.Fill({
          color: 'white',
          opacity: 0.2
        }),
        new ol.style.Stroke({
      color: 'black',
              width: 2
        })
      ]
    })
  });
  
  var map1_olmap = new ol.Map({
      layers: [new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})}), vector],
      renderer: ol.RendererHint.CANVAS,
      target: map1,
      view: new ol.View2D({
          center: ol.proj.transform([-113.5, 53.533333], 'EPSG:4326', 'EPSG:3857'),
          zoom: 13
       })
  });
  
  var map1_draw;
  function map1_addMapInteraction()
  {
      map1_draw = new ol.interaction.Draw({
          layer: vector,
          type: 'Polygon'
      });
      map1_olmap.addInteraction(map1_draw);
  }
  map1_addMapInteraction();
  </code></pre>