openmumbai/openmumbai/places/static/js/edit.js

var creds = {
    'cloudmade': '534d7b971d044dcaafa6678414f26924'
}
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/' + creds.cloudmade + '/997/256/{z}/{x}/{y}.png',
    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
    map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });

var drawControl = new L.Control.Draw({
//	position: 'topright',
	polygon: {
		allowIntersection: false,
		drawError: {
			color: '#b00b00',
			timeout: 1000
		},
		shapeOptions: {
			color: '#bada55'
		}
	},
	circle: {
		shapeOptions: {
			color: '#662d91'
		}
	}
});

map.addControl(drawControl);


map.on('draw:poly-created', function (e) {
    console.log("drawn poly", e.poly);
    initNewFeature(e.poly)    
	//drawnItems.addLayer(poly);
});


map.on('draw:rectangle-created', function (e) {
    console.log("drawn rect", e.rect);
    initNewFeature(e.rect);
//	drawnItems.addLayer(rect);
});

map.on('draw:circle-created', function (e) {
    console.log("drawn circle", e.circ);
    initNewFeature(e.circ);
//	drawnItems.addLayer(circ);
});

map.on('draw:marker-created', function (e) {
    console.log("drawn marker", e.marker);
    initNewFeature(e.marker);
//	drawnItems.addLayer(marker);
});

var featureBeingEdited = false;

function initNewFeature(feat, type) {
//    GLOBFEAT = feat;        
    if ($('.selectedItem').length == 0) {
        alert("please select an item from the list first");
        
    }    
    var $selectedItem = $('.selectedItem');
    $selectedItem.data("layer", feat);
    feat.addEventListener("click", function(e) {
        map.fire("clear-current-edit");
        e.target.editing.enable();
        featureBeingEdited = e.target;
        $selectedItem.addClass("selectedItem");
    });
    drawnItems.addLayer(feat);
/*
    feat.addEventListener("click", function(e) {
        selectFeatureOnMap(e.target);
    });
*/    
    return feat;
}

function selectFeatureOnMap(feature) {
    console.log("selected feature", feature);
}

var drawnItems = new L.LayerGroup();

map.on("clear-current-edit", function(e) {
    console.log("clear-current-edit");
    if (featureBeingEdited) {
        featureBeingEdited.editing.disable();
        featureBeingEdited = false;
    }
    $('.selectedItem').removeClass("selectedItem");

});

//map.on("select-item", function(e) {
//    var id = e.itemId;
//    $('#item' + id).addClass("selectedItem");
//    

//});


//map.on("click", function(e) {
//    console.log("clicked");
//    map.fire("clear-current-edit", e);
///*
//        featureBeingEdited.editing.disable();
//        featureBeingEdited = false;    
//*/
//});

/*
drawnItems.addEventListener("click", function(e) {
    console.log(e);
});
*/
map.addLayer(drawnItems);

//geoJsonLayer = L
//    .geoJson(null, {
//    'onEachFeature': function(feat, layer) {
//        console.log(feat);
//        GLOB = feat;
//        if (feat.hasOwnProperty("addEventListener")) {
//            feat.addEventListener("click", function(e) {
//                console.log("clicked json feature", e);
//            });            
//        }

//        //initNewFeature(feat);
//    }})
//    .addEventListener("click", function(e) {
//        console.log("clicked json layer", e);
//    })
//    .addEventListener("featureparse", function(f) {
//        alert("features parsed");
//    })
//    .addTo(map);
    

loadGeoJsonFeatures("/geojson/10/");

function loadGeoJsonFeatures(url, params) {
    //alert("hi");
    if (!params) {
        var params = {};
    }
    var $xhr = $.getJSON(url, params, function(data) {
        console.log(data);
        features = data.features;
        var $itemsList = $('#itemsList');
        features.forEach(function(f, i) {
            var $item = $('<li />')
                .attr("id", "item" + f.properties.id)
                .text(f.properties.name)
                //.data("feature", f)
                .click(function(e) {
                    map.fire("clear-current-edit");
                    if ($item.data("layer")) {
                        var layer = $item.data("layer");
                        layer.editing.enable();
                        featureBeingEdited = layer;
                        //layer.fire("click");
                    }
                    $(this).addClass("selectedItem");
                    //$('.selectedItem').removeClass("selectedItem");
                    //$(this).addClass("selectedItem");
                })
                .appendTo($itemsList);
            if (!$.isEmptyObject(f.geometry)) {
                geom = L.geoJSON.geometryToLayer(f.geometry);
                $item.data("layer", geom);
                
                geom.on("click", function(e) {
                   map.fire("clear-current-edit"); 
                   e.target.editing.enable();
                   $item.addClass("selectedItem");                    
                   featureBeingEdited = e.target;
                });
                //initNewFeature(geom);
                drawnItems.addLayer(geom);

//                thisLayer = L.geoJson(f).on("click", function(e) {
//                    console.log("clicked json layer", e);
//                    map.fire("clear-current-edit");
//                    e.target.eachLayer(function(feature) {
//                        feature.editing.enable();
//                        featureBeingEdited = feature;
//                    });     
//                });
//                drawnItems.addLayer(thisLayer);
//                $item.data("layer", thisLayer);
            }


        });
        
//        geoJsonLayer.addData(data);

    });

}