I'm new to JavaScript and I'm struggling to figure out a solution to this problem.
I want a form to appear when the user clicks on the map. After filling out the form, I want to create a marker at that location with the popup content set to the values from the form. Additionally, I need to send the form data to a database once the user has finished adding forms.
The form itself is working fine, but I'm having trouble accessing the popup location data from the function that handles the form submission.
Below you'll find the code I have so far:
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();
});
If you need to reference the form, here it is:
var popupForm = '<form id="popup-form" class="form-container"> \
<h2>Add a point:</h2>\
<strong> The air quality here is: </strong> <br> \
<label for="type">Good</label> \
<input type="radio" name="goodBad" value ="good" id="good"> \
<label for="type">Bad </label> \
<input type="radio" name="goodBad" value = "bad" id="bad"> \
<br><br></c> \
<label for="location"><b>Location Name</b></label> \
<input type="text" placeholder="eg. Redbridge flyover" id="location" > \
<label for="reason"><b>Why are you adding this point? - be specific!</b></label> \
<input type="text" placeholder="eg. There is a traffic jam every saturday 11am" id="reason" > \
<label for="solution"><b>How would you improve air quality at this location? <br>(If you ran the city)</b></label> \
<input type="text" placeholder="eg. I\'d close the road when when school starts and stops" id="improve"> \
<button type="submit" id="btn-submit" class="btn">Save</button> \
<input type="hidden" id= "hiddenField" name="id" value="" /> \
</form>';
Thank you very much.