title: get coordinates of drawn feature in OpenLayers
body: <p>I'm trying to create an online map using OpenLayers 3.</p>
  
  <p>I'm brand new to using OpenLayers, and all I'm trying to do is to get the coordinates of the points, lines, polygons that I drew on the map. I'm aware that there is a featuresadded parameter available, but I'm not able to implement it correctly.</p>
  
  <p>Can anybody point me in the right direction how to get the coordinates of a drawn feature (either in an alert() or console.log)?</p>
  
  <p>Thanks a ton!!</p>
  
  <p>here's my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="ol.css" type="text/css"&gt;
      &lt;style type="text/css"&gt;
          body {
              font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
              font-size: small;
          }
          #map {
              clear: both;
              position: relative;
              border: 1px solid black;
          }            
         #wrapper {
             width: 337px;
             height: 50px;                            
         }            
         #location {
            float: right;
            font-family: Arial, Verdana, sans-serif; 
            font-size: 12px; 
            color: #483D8B;
            background-color: white;
         }
         #nodelist{
            font-family: Arial, Verdana, sans-serif; 
            font-size: 14px; 
            color: #000000;
            font-style: normal;
            background-color: white;
         }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  var map;
  var draw;
  var transformed_coordinate;
  var vector;
  
  function init() {
      var view = new ol.View({
      center: ol.proj.transform([13.1929, 55.718],'EPSG:4326', 'EPSG:3857'),
      zoom: 12
      });
  
  var myZoom = new ol.control.Zoom();
  var myZoomSlider = new ol.control.ZoomSlider();
  var zoomToExtentControl = new ol.control.ZoomToExtent({
      extent: [1453297.22,7490484.81,1483872.03,7513415.91]
  });
  
  var myScaleLine = new ol.control.ScaleLine()
  
  var neighborhood = new ol.source.ImageWMS({
      url: 'http://localhost:8090/geoserver/project/wms',
          params: {'LAYERS': 'project:Neighborhood'}
  });
  
  var roads = new ol.source.ImageWMS({
      url: 'http://localhost:8090/geoserver/project/wms',
          params: {'LAYERS': 'project:Roads_all'}
  });
  
  var source = new ol.source.Vector({wrapX: false});
  
  vector = new ol.layer.Vector({
      source: source,
      style: new ol.style.Style({
          fill: new ol.style.Fill({
              color: 'rgba(0, 255, 0, 0.5)'
          }),
          stroke: new ol.style.Stroke({
              color: '#ffcc33',
              width: 2
          }),
          image: new ol.style.Circle({
              radius: 7,
              fill: new ol.style.Fill({
              color: '#ffcc33'
              })
          })
      })      
  });
  
  var layers = [
      new ol.layer.Image({
          source: neighborhood
      }),
      new ol.layer.Image({
          source: roads
      }),
      vector
  ]   
  
  map = new ol.Map({
      layers: layers,
      target: 'map',
      view: view
  }); 
  
  map.addControl(myZoom);
  map.addControl(myZoomSlider);
  map.addControl(zoomToExtentControl);
  map.addControl(myScaleLine);
  
  map.on('singleclick', function(evt){
      var coord = evt.coordinate;
      transformed_coordinate = ol.proj.transform(coord, "EPSG:3857", "EPSG:4326");
      //console.log(transformed_coordinate);
  })
  
  function onFeaturesAdded(event){
      var bounds = event.features[0].geometry.getBounds();
      var answer = "bottom: " + bounds.bottom  + "\n";
      answer += "left: " + bounds.left  + "\n";
      answer += "right: " + bounds.right  + "\n";
      answer += "top: " + bounds.top  + "\n";
      alert(answer);
  }
  
  var typeSelect = document.getElementById('type');
  
  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
          });
          map.addInteraction(draw);
      }
  }
  
  /**
   * Let user change the geometry type.
   * @param {Event} e Change event.
   */
  typeSelect.onchange = function(e) {
      map.removeInteraction(draw);
      addInteraction();
  };
  
  addInteraction();
  } //end init
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="init()"&gt;  
  &lt;div id="map" style="width: 800px; height: 600px"&gt;&lt;/div&gt;
  &lt;form class="form-inline"&gt;
      &lt;label&gt;Geometry type &amp;nbsp;&lt;/label&gt;
      &lt;select id="type"&gt;
          &lt;option value="None"&gt;None&lt;/option&gt;
          &lt;option value="Point"&gt;Point&lt;/option&gt;
          &lt;option value="LineString"&gt;LineString&lt;/option&gt;
          &lt;option value="Polygon"&gt;Polygon&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>