title: geoJson layer to save [for send DB] the features drawn on the map-Leaflet-Draw
body: <p>I used <a href="https://github.com/learn-js/making-maps-with-leafletjs/blob/master/chapters/07-drawing.md" rel="nofollow">this method</a>, but</p>
  
  <pre><code>var features = [];
  map.on('draw:created', function (e) {
    drawnItems.addLayer(e.layer);
    var layers = drawnItems._layers;
    for (var key in layers) features.push(layers[key].toGeoJSON());
    console.log(drawnItems)
  });
  </code></pre>
  
  <p>But the following error appears in the console log:</p>
  
  <pre><code>Object { options: Object, _layers: Object, _initHooksCalled: true, _leaflet_id: 24, _map: Object, _leaflet_events: Object }
  </code></pre>
  
  <p>And when I try the following code:
          </p>
  
  <pre><code>        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
              osmAttrib = '&amp;copy; &lt;a href="http://openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors',
              osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
              map = new L.Map('map', {layers: [osm], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });
  
          var drawnItems = L.geoJson();
          map.addLayer(drawnItems);
  
          var drawControl = new L.Control.Draw({
              draw: {
                  position: 'topleft',
                  polygon: {
                      title: 'Draw a sexy polygon!',
                      allowIntersection: false,
                      drawError: {
                          color: '#b00b00',
                          timeout: 1000
                      },
                      shapeOptions: {
                          color: '#bada55'
                      },
                      showArea: true
                  },
                  polyline: {
                      metric: false
                  },
                  circle: {
                      shapeOptions: {
                          color: '#662d91'
                      }
                  }
              },
              edit: {
                  featureGroup: drawnItems
              }
          });
          map.addControl(drawControl);
  
          var geojson_for_FeatureCollection = drawnItems.toGeoJSON();
  
  //to get the drawn item geo data--for poly line
  //initialize the array for collect drawn items.
  var features = [];
  
  
  map.on('draw:created', function (e) {
  
      var type = e.layerType,
          layer = e.layer;
  
      if (type === 'polyline') {
          // structure the geojson object
          var geojson = {};
          geojson['type'] = 'Feature';
          geojson['geometry'] = {};
          geojson['geometry']['type'] = "Polyline";
  
          // export the coordinates from the layer
          coordinates = [];
          latlngs = layer.getLatLngs();
          for (var i = 0; i &lt; latlngs.length; i++) {
              coordinates.push([latlngs[i].lng, latlngs[i].lat])
          }
  
          // push the coordinates to the json geometry
          geojson['geometry']['coordinates'] = [coordinates];
  
          // Finally, show the poly as a geojson object in the console
          console.log(JSON.stringify(geojson));
  
      }
      else if 
  //to get the drawn item geo data--for polygon   
      (type === 'polygon') {
          // structure the geojson object
          var geojson = {};
          geojson['type'] = 'Feature';
          geojson['geometry'] = {};
          geojson['geometry']['type'] = "Polygon";
  
          // export the coordinates from the layer
          coordinates = [];
          latlngs = layer.getLatLngs();
          for (var i = 0; i &lt; latlngs.length; i++) {
              coordinates.push([latlngs[i].lng, latlngs[i].lat])
          }
  
          // push the coordinates to the json geometry
          geojson['geometry']['coordinates'] = [coordinates];
  
          // Finally, show the poly as a geojson object in the console
         // console.log(JSON.stringify(geojson));
  var down = JSON.stringify(geojson);
  var a = document.createElement('a');
  a.href = 'data:' + down;
  a.download = 'down.json';
  a.innerHTML = 'download JSON';
  
  var container = document.getElementById('container');
  container.appendChild(a);
  
  console.log(down);
      }
  
      drawnItems.addLayer(layer);
  
  });
  
  //testing.........for featureGroup geo json once  download
  map.on('draw:edited', function (e) {
    var layers = drawnItems._layers;
    for (var key in layers) features.push(layers[key].toGeoJSON());
    console.log(drawnItems)
  });
  
  map.on('draw:created', function (e) {
    drawnItems.addLayer(e.layer);
    var layers = drawnItems._layers;
    for (var key in layers) features.push(layers[key].toGeoJSON());
    console.log(JSON.stringify(geojson_for_FeatureCollection));
  });`enter code here`
  
      &lt;/script&gt;
  </code></pre>
  
  <p>The console shows:</p>
  
  <pre><code>{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[175.26536464691162,-37.77241087974657],[175.26291847229004,-37.778007869815774],[175.273175239563,-37.77410698208879]]]}}
  
  {"type":"FeatureCollection","features":[]}
  </code></pre>
  
  <p>What i want to know is how can I append the drawn items to a geojson object to send it to a database?</p>