[GIS] Adding comments using leaflet draw

leafletleaflet-drawpopup

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('<span><b>Shape Name</b></span><br/><input id="shapeName" type="text"/><br/><br/><span><b>Shape Description<b/></span><br/><textarea id="shapeDesc" cols="25" rows="5"></textarea><br/><br/><input type="button" id="okBtn" value="Save" onclick="savePopup()"/>')
        .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?

Best Answer

please forgive the product promotion, but if you'd like to skip administering the database you might consider trying Esri's cloud hosted feature service storage and open source Esri Leaflet plugin to write in the features.

afterward you can execute both SQL and spatial queries and specify GeoJSON as the output format.

here's a sample which incorporates the Draw plugin to sketch polygons http://patrickarlt.github.io/uc-2014-esri-leaflet/demos/editing.html

you can create a free developer account at https://developers.arcgis.com to get 50 free credits a month to test out the tools. this gives you over 200MB of hosted feature service storage and individual queries against your data are free.

relevant links: Esri Leaflet API Reference and examples

sample REST query

Disclosure: ArcGIS Hub / oss @ esri

Related Question