Adding and retrieving layer properties in Leaflet.Draw

by rahulkalimuthu

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css">
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    width:100%;
    padding:0px;
    margin:0px;
}

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////
var map = L.map('map').setView([34.05, -118.25], 10);
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
  '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
L.tileLayer(CDB_URL, {
  attribution: ATTR
}).addTo(map);

////////////////////////////////////////////////////////////////////////////////////////////
//adding draw controls//
////////////////////////////////////////////////////////////////////////////////////////////
var featureGroup = L.geoJson().addTo(map);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: featureGroup
  },
  draw: {
    polygon: true,
    polyline: false,
    circle: false,
    rectangle: false,
    marker: false
  }
}).addTo(map);

map.on('draw:created', function(e) {
  console.log('Layer created: ' + L.stamp(e.layer));
  e.layer.options.color='red';
  e.layer.on('edit', logProps);
  featureGroup.addLayer(e.layer);
});

function logProps(e) {
  console.log('Layer edited: ' + L.stamp(e.target));
  console.log('Color: ' + e.target.options.previousOptions.color);
}