I am working on an application that will leverage the leaflet draw plugin so that a user can open my map and drop comments in the form of markers. Then the user can click submit and it will serve me that drawn layer with comments as a geoJSON. It isn't important that other users see each others comments, I just need the location and the comment so I can compile them later. I have found two resources that I think are pointing me in the right direction but I am having trouble piecing them together and my JavaScript is terrible at best.Here are the resources I have been using
Leaflet Draw - add title to marker or symbol
How to save a completed polygon points leaflet.draw to mysql table
Here is what I have so far after tweaking the above resources...
var drawControl = new L.Control.Draw({draw: { polygon: false, polyline: false, rectangle: false, circle: false,},edit: { featureGroup: drawnItems}});map.addControl(drawControl);map.on('draw:created', function (e) { var type = e.layerType, layer = e.layer; drawnItems.addLayer(layer); var shape = layer.toGeoJSON() var shape_for_db = JSON.stringify(shape); return shape_for_db; var popup = L.popup() .setLatLng(layer.getLatLng()) .setContent('Shape Name
<b>Shape Description<b/>
') .openOn(map);});function savePopup(){ var sName = $('#shapeName').val(); var sDesc = $('#shapeDesc').val(); var drawings = drawnItems.getLayers(); drawings[drawings.length - 1].title = sName; drawings[drawings.length -1].content =sDesc; map.closePopup();};When I run the above in my leaflet application I can successfully drop points, each one has a popup that comes up and disappears when I click save, but I can't really tell whats happening. I've tried inserting some return commands to see what is working at what isn't but I get nothing. Any suggestions on how to debug this thing?
أكثر...
Leaflet Draw - add title to marker or symbol
How to save a completed polygon points leaflet.draw to mysql table
Here is what I have so far after tweaking the above resources...
var drawControl = new L.Control.Draw({draw: { polygon: false, polyline: false, rectangle: false, circle: false,},edit: { featureGroup: drawnItems}});map.addControl(drawControl);map.on('draw:created', function (e) { var type = e.layerType, layer = e.layer; drawnItems.addLayer(layer); var shape = layer.toGeoJSON() var shape_for_db = JSON.stringify(shape); return shape_for_db; var popup = L.popup() .setLatLng(layer.getLatLng()) .setContent('Shape Name
<b>Shape Description<b/>
') .openOn(map);});function savePopup(){ var sName = $('#shapeName').val(); var sDesc = $('#shapeDesc').val(); var drawings = drawnItems.getLayers(); drawings[drawings.length - 1].title = sName; drawings[drawings.length -1].content =sDesc; map.closePopup();};When I run the above in my leaflet application I can successfully drop points, each one has a popup that comes up and disappears when I click save, but I can't really tell whats happening. I've tried inserting some return commands to see what is working at what isn't but I get nothing. Any suggestions on how to debug this thing?
أكثر...