title: Leaflet.Draw saving data with GeoJson
body: <pre><code>map.addControl(new L.Control.Draw({
          draw: {
              polygon: false,
              polyline: false,
              rectangle: false,
              circle: false
  
           },
          edit: {featureGroup: drawnItems}
  
      }));
  
      map.on('draw:created', function(e) {
          var type = e.layerType;
          var layer = e.layer;
          var idIW = L.popup();
          var content = '&lt;span&gt;&lt;b&gt;Title&lt;/b&gt;&lt;/span&gt;&lt;br/&gt;&lt;input id="salrepnu" type="text"/&gt;&lt;br/&gt;&lt;br/&gt;&lt;span&gt;&lt;b&gt;Report&lt;b/&gt;&lt;/span&gt;&lt;br/&gt;&lt;textarea id="salrep" cols="25" rows="5"&gt;&lt;/textarea&gt;&lt;br/&gt;&lt;br/&gt;&lt;input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/&gt;';
          idIW.setContent(content);
          idIW.setLatLng(layer.getLatLng());
          idIW.openOn(map);
          drawnItems.addLayer(layer)
      });
  
      function saveIdIW() {
          var sName = $('#salrepnu').val();
          var salRep = $('#salrep').val();
          var drawings = drawnItems.getLayers(); //drawnItems is a container for the drawn objects
          drawings[drawings.length - 1].title = sName;
          drawings[drawings.length - 1].content = salRep;
          map.closePopup();
      };
  
          //Export
      document.getElementById('export').onclick = function(e) {
          // Extract GeoJson from featureGroup
          var data = drawnItems.toGeoJSON();
          // Stringify the GeoJson
          var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
          // Create export
          document.getElementById('export').setAttribute('href', 'data:' + convertedData);
          document.getElementById('export').setAttribute('download', 'drawnItems.geojson');
      }
  </code></pre>
  
  <p>I added leaflet.draw.js and leaflet.draw.css and I can set up a map from an external geoJson file; but I can't for the life of me figure out how to save input html to a geoJson feature as the featureGroup drawnItems will export the long and lat but not the html features.</p>
  
  <p>I want the featureGroup markers to append to a geoJson file that will then show up on a live map. Any help is appreciated</p>
  
  <pre><code>map.on('draw:created', function(e) {
          var type = e.layerType;
          var layer = e.layer;
          var feature = layer.feature = layer.feature || {}; // Intialize layer.feature
  
          feature.type = feature.type || "Feature"; // Intialize fueature.type
          var props = feature.properties = feature.properties || {}; // Intialize feature.properties
  
          if (type === 'marker'){
              props.repnumb =  prompt("Sales Report No. ");
              props.sales = prompt("Sales");
              var popContent = "&lt;p&gt;&lt;b&gt;SALUTE Report No. " +
                  props.repnumb + "&lt;/b&gt;&lt;/br&gt;" +
                  "&lt;b&gt;Sales: " + props.sales + "&lt;/b&gt;&lt;/p&gt;";
              layer.bindPopup(popContent);
          }
          drawnItems.addLayer(layer)
      });
  </code></pre>
  
  <p>I figured out how to create clean feature inputs, but the prompt method seems lacking in the format department. There is a popup that asks a question, but at least the question comes up on the marker now after it is set.</p>