Edit CartoDB Data with leaflet.draw

Question

I am new to leaflet.js and CartoDB. I've been able to display the leaflet.draw edit toolbar, but cant set the configuration options. This JSFiddle show the attempt at setting the options as well as defining the editable layer, see code below:

var options = {
    position: 'topright',
    draw: {
        polyline: false,
        polygon: false,
        circle: false, 
        rectangle: false,
        marker: {
            icon: new MyCustomMarker()
        }
    },
    edit: {
        featureGroup: layerUrl, //REQUIRED!!
        remove: false
    }
};

I am wondering if I am placing this code within the correct function?

score 0 · Answer 1 · answered Mar 17 '15 at 21:31

You're creating an options object and aren't using it anywhere. If you want to use custom options for Leaflet Draw you'll need to instanciate the control seperately so you can add the options object to it. Next you're referencing to editableLayers as the layer to hold your drawn objects but you're not creating the actual layer anywhere. Follow these steps:

First take out the drawnControl: true from your map options:

map = new L.Map('cartodb-map', { 
    center: [40,-98],
    zoom: 4,
})

Create an actual layer to use in your draw options and add it to the map:

var editableLayers = new L.FeatureGroup();

Now because of the line above editableLayers holds a reference to an actual layer and won't throw the Uncaught ReferenceError: editableLayers is not defined in your console:

var options = {
    position: 'topright',
    draw: {
        polyline: false,
        polygon: false,
        circle: false, 
        rectangle: false,
        marker: {
            icon: new MyCustomMarker()
        }
    },
    edit: {
        featureGroup: editableLayers, //REQUIRED!!
        remove: false
    }
};

Now create the draw control seperately with your options and add that to the map:

var drawControl = new L.Control.Draw(options).addTo(map);

Here's a working fork of your Fiddle: http://jsfiddle.net/ryntc3vv/

That all being said, i'm really wondering where you're coming up with the things you did/trying to do. It doesn't make any sense, so if you're following some sort of tutorial somewhere i say throw that out and stick to the documentation that is supplied with Leaflet draw at the Leaflet Draw repository: https://github.com/Leaflet/Leaflet.draw#adding-the-edit-toolbar All the things i've done here and in your previous question are perfectly covered.

Edit CartoDB Data with leaflet.draw

1 Answers1