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

var creds = {
    'cloudmade': '534d7b971d044dcaafa6678414f26924',
    'bing': 'AkZ3bI3sTc4kQwkQBOMQlM8ZzTPoYy0FrUIZ7SH82Qn8cZKrG638H38NH5kwVgBL'
}

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/' + creds.cloudmade + '/997/256/{z}/{x}/{y}.png',
    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
    bingRoadsLayer = new L.BingLayer(creds.bing, {'type': 'Road'}),
    bingSatelliteLayer = new L.BingLayer(creds.bing, {'type': 'Aerial'})
    bingSatelliteWithLabelsLayer = new L.BingLayer(creds.bing, {'type': 'AerialWithLabels'})

    map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(19.11577, 72.855211), zoom: 11 });



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");
        return false;
    }    
    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);

var wmsLayers = {};    
wmsLayers['Test Warped Map'] = L.tileLayer.wms("http://mapwarper.net/maps/wms/336", {
      'format': 'image/png'
}).addTo(map);

var baseLayers = {
    'OpenStreetMap': cloudmade,
    'Bing Satellite Imagery': bingSatelliteLayer,
    'Bing Road Map': bingRoadsLayer,
    'Bing Satellite with Labels': bingSatelliteWithLabelsLayer
};

var layersControl = L.control.layers(baseLayers, wmsLayers, {
    'position': 'topleft',
    'collapsed': false
}).addTo(map);


loadGeoJsonFeatures("/geojson/" + CONTENT_TYPE_ID);

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);

    });

}


$(function() {
    $('#ctypeList').change(function() {
        var ctype_id = $(this).val();
        location.href = '/edit/' + ctype_id;
    });

    $('#opacityRange').change(function() {
        var val = $(this).val();
        for (wmsLayer in wmsLayers) {
            if (wmsLayers.hasOwnProperty(wmsLayer)) {
                wmsLayers[wmsLayer].setOpacity(val);
            }
        }
    });

});