title: Leaflet - How to create a marker using data from a pop-up form
body: <p>I'm starting out in javascript and tieing myself in knots trying to solve this one. </p>
  
  <p>I'd like a form to appear when the user clicks the map. When they fill in the form I'd like to create a marker at that location with the popup content for that marker set to the values from the form. I also send the form data to a database once they are done adding forms.</p>
  
  <p>The form works but I can't work out how to access the popup location data from the function which handles the form submit.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>function onMapClick(e) {
      popLocation = e.latlng;
      var popup = L.popup({
          closeButton: true})
          .setLatLng(e.latlng)
          .setContent(popupForm)
          .openOn(map);
  
       $("#popup-form").submit(function(e){
           e.preventDefault();
           console.log(e);
           var geojsonFeature = {
              "type": "Feature",
              "properties": {
                  "type": $("input[name='goodBad']:checked").val(),
                  "location":  L.DomUtil.get('location').value,
                  "reason": L.DomUtil.get('reason').value,
                  "improve": L.DomUtil.get('improve').value
              },
              "geometry": {
                  "type": "Point",
                  "coordinates": popLocation
              }
          };
  
          L.geoJson(geojsonFeature, {
              pointToLayer: function (feature, latlng) {
                  marker = L.marker(geojsonFeature.geometry.coordinates, {
                      icon: L.AwesomeMarkers.icon({icon: 'info', prefix: 'fa', markerColor: markCol}),
                      riseOnHover: true,
                      draggable: true //define the content to be added to the marker
                  }).bindPopup(popupForm);
                  marker.on("popupopen", onPopupOpen);
                  openOn(map);
                  return marker;
              }
          }).addTo(map);
          map.closePopup();
       });
  </code></pre>
  
  <p>The form if you need it is here:</p>
  
  <pre><code>var popupForm = '&lt;form id="popup-form" class="form-container"&gt; \
                  &lt;h2&gt;Add a point:&lt;/h2&gt;\
                  &lt;strong&gt; The air quality here is: &lt;/strong&gt; &lt;br&gt; \
                  &lt;label for="type"&gt;Good&lt;/label&gt; \
                  &lt;input type="radio" name="goodBad" value ="good" id="good"&gt; \
                  &lt;label for="type"&gt;Bad &lt;/label&gt; \
                  &lt;input type="radio" name="goodBad" value = "bad" id="bad"&gt; \
                      &lt;br&gt;&lt;br&gt;&lt;/c&gt; \
                  &lt;label for="location"&gt;&lt;b&gt;Location Name&lt;/b&gt;&lt;/label&gt; \
                  &lt;input type="text" placeholder="eg. Redbridge flyover" id="location" &gt; \
                  &lt;label for="reason"&gt;&lt;b&gt;Why are you adding this point? - be specific!&lt;/b&gt;&lt;/label&gt; \
                  &lt;input type="text" placeholder="eg. There is a traffic jam every saturday 11am" id="reason" &gt; \
                  &lt;label for="solution"&gt;&lt;b&gt;How would you improve air quality at this location? &lt;br&gt;(If you ran the city)&lt;/b&gt;&lt;/label&gt; \
                  &lt;input type="text" placeholder="eg. I\'d close the road when when school starts and stops" id="improve"&gt; \
                  &lt;button type="submit" id="btn-submit" class="btn"&gt;Save&lt;/button&gt; \
                  &lt;input type="hidden" id= "hiddenField" name="id" value="" /&gt; \
              &lt;/form&gt;';
  </code></pre>
  
  <p>Very many thanks</p>