title: update properties of geojson to use it with leaflet
body: <p>I have a requirement of using leaflet.js to add a map to my site. The site has an administration view where an admin can add markers and add description and image to each marker.</p>
  
  <p>I used the leaflet.draw plugin, and on the create event I try to update the GeoJSON object I got using <code>event.layer.toGeoJSON()</code> to add some properties like image and text but with no luck.</p>
  
  <p>Can any one help me on this?</p>
  
  <pre class="lang-js prettyprint-override"><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(31.9500, 35.9333),
          zoom: 15
      }),
      drawnItems = L.geoJson().addTo(map);
  map.addControl(new L.Control.Draw({
      edit: {
          featureGroup: drawnItems
      }
  }));
  
  map.on('draw:created', function(event) {
      var layer = event.layer;
      var json = event.layer.toGeoJSON();
      json.properties.desc = null;
      json.properties.image = null;
      drawnItems.addLayer(L.GeoJSON.geometryToLayer(json));
      addPopup(layer);
  });
  
  function addPopup(layer) {
      var content = '&lt;input id="markerDesc" type="text"/ onblur="saveData(layer);"&gt;';
      layer.bindPopup(content).openPopup();
      alert('out');
  }
  
  function saveData(layer) {
      var markerDesc = $('#markerDesc').val();
      var json = layer.toGeoJSON();
      json.feature.properties.desc = markerDesc;
  }
  </code></pre>