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.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;
    var shape = layer.toGeoJSON()
    var shape_for_db = JSON.stringify(shape);
    return shape_for_db;
    var popup = L.popup()
        .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()"/>')

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;


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?

  • Just a little insight on the Name and Description fields for the drawings - these values are saved as key values to the drawing object. When I wrote the application that has the popup functionality on completed drawings, I wanted to export the drawings as a KML (hence the properties title and content). Using L.KML, I could then get the key values of the drawing and create the KML (which was then downloadable for end users). It's a slightly different approach than what you're wanting but hope that helps.
    – evv_gis
    Jan 23, 2015 at 14:26
  • Can you post a link to a working example? I don't understand what you are finding to be wrong with what you have now. Also check out this tutorial for crowsourcing points with Leaflet duspviz.mit.edu/web-map-workshop/cartodb-data-collection
    – raphael
    Nov 7, 2015 at 4:47

1 Answer 1


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.