view gis_gui/blocks/map.js @ 235:ed0cb46fb936

show line and polygon-layer
author fknauft
date Mon, 05 Sep 2011 11:37:10 +0200
parents 6e6e78adb447
children 52aa589f4c4d
line wrap: on
line source


guiBlocks.prototype.addMapBlock = function(url, baseId, params, firstLayer) {
    var block = this.addBlock(url, baseId, params, function() {
        // function after add block finished
        console.debug("in mapblock after block load!");
        var be = block.element;
        params = block.params;
        block.type = "map";
        params.type = "map";
        if (params.map_layers == null) {
            params.map_layers = [];
        }
        if (firstLayer != null) {
            block.appendMapLayer(firstLayer);
        }
        // show block
        block.showMapParams();
        $(be).fadeIn();

        // save map params in block.param -- too early
        //params = block.readLayerParams();
        
        // load map
        block.updateMap(be,params);
        
        // add layer button
        $(be).find(".layer_add_button").click(function() {
            console.debug("layer add");
            params = block.readMapParams();
            block.addMapLayer(be,params);
        });
        // update button
        $(be).find(".map_update_button").click(function () {
            console.debug("map update");
            params = block.readMapParams();
            block.updateMap(be,params);
        });
        // new window button
        $(be).find(".map_newwindow_button").click(function () {
            console.debug("map in new window");
            params = block.readMapParams();
            var newWindow = window.open("blocks/map_newwindow.html");
            block.updateMap(newWindow.document.getElementById("map_box"),params);
        });
        // save button
        $(be).find(".map_save_button").click(function () {
            console.debug("map save. this=",this," block=",block);
            params = block.readMapParams(be,params);
            block.storeBlock("test1");
        });
    });
};

guiBlocks.Block.prototype.appendMapLayer = function (layerparams) {
    // add layer to this map
    var layerinfo = {
        display: true, 
        layer: layerparams
        };
    var layers = this.params.map_layers;
    layers.push(layerinfo);
    // update indexes
    for (var i = 0; i < layers.length; i++) {
        layers[i].idx = i;
    }
    return this.params;
};

guiBlocks.Block.prototype.deleteMapLayer = function (idx) {
    // remove layer from this map
    var layers = this.params.map_layers;
    layers.splice(idx,1);
    // update indexes
    for (var i = 0; i < layers.length; i++) {
        layers[i].idx = i;
    }
    return this.params;
};

guiBlocks.Block.prototype.showMapParams = function (elem, params) {
    // create html with layer parameters from params
    var i, layers, $tmpl, lp, idx;
    var block = this;
    if (elem == null) {
        elem = this.element;
    }
    if (params == null) {
        params = this.params;
    }
    var $elem = $(elem);
    $elem.find(".map_name").val(params.name);
    layers = params.map_layers;
    // remove old info
    $(elem).find(".map_layer_table .layer_info").remove();
    // write new info
    if (layers.length > 0) {
        $tmpl = $elem.find(".layer_info_tmpl").tmpl(layers);
        $elem.find(".map_layer_header").after($tmpl);
        // arm edit and delete buttons
        for (i = 0; i < layers.length; ++i) {
            lp = layers[i].layer;
            idx = layers[i].idx;
            console.debug("showmapparams lp=", lp, " idx=", idx);
            $tmpl.find(".layer_edit_"+idx).click(function () {
                var param = lp;
                console.debug("open layer ",idx);
                blocks.addLayerBlock("blocks/layer.html?table="+escape(lp.table),"layer", param);
            });
            $tmpl.find(".layer_delete_"+idx).click(function () {
                var layerIdx = idx;
                console.debug("del layer ",layerIdx);
                params = block.deleteMapLayer(layerIdx);
                block.showMapParams(elem, params);
                block.updateMap(elem, params);
            });
        }
    }
};

guiBlocks.Block.prototype.readMapParams = function(elem,params) {
    // read layer parameters from html element and store in param
    if (elem == null) {
        elem = this.element;
    }
    if (params == null) {
        params = this.params;
    }
    params.name = $(elem).find(".map_name").val();
    var layers = params.map_layers;
    for (var i = 0; i < layers.length; i++) {
        layers[i].display = $(elem).find(".layer_display_"+i).attr("checked");
    }
    //params.position_field = $(elem).find(".map_position_select").val();
    //params.connect_line = $(elem).find(".layer_line_checkbox").attr("checked");
    return params;
};

guiBlocks.Block.prototype.updateMap = function(elem,map_params) {
    
    //************
    //alert("bin in updateMap:" + elem + ", " + map_params)
   //*************

	if (elem == null) {
        elem = this.element;
    }
    if (map_params == null) {
        map_params = this.params;
    }
    // update and draw the google map
    var le = $(elem).find(".map_box").get(0);
    // create empty map
    
    if (google != null) {
        var latlng = new google.maps.LatLng(29, 116);
        var mapOpts = {
                zoom: 2,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(le, mapOpts);
        console.debug("new google map=",map," on el=",le);
    }
    // add the layers
    var layerList = map_params.map_layers;
    for (var i = 0; i < layerList.length; i++) {
        if (!layerList[i].display) {
            continue;
        }
        var params = layerList[i].layer;
        var paramstr = "format=KML_URL";
        if (params.position_field && params.position_field != "Default") {
            paramstr += "&gis_id_field="+params.position_field;
        }
        if (params.color_field != "Default") {
            paramstr += "&color_field="+params.color_field;
        }
        if (params.geometry_field != "Default") {
            paramstr += "&geometry_field="+params.geometry_field;
        }
        if (params.connect_line) {
            paramstr += "&connect_line="+params.connect_line;
        }
        var layerurl = "../db/RESTdb/db/public/" + escape(params.table) + "?" + paramstr;
        jQuery.get(layerurl, function (data, textStatus, XMLHttpRequest) {
            // function after load kml url finished
            console.debug("kml url loaded! this=", this );
            console.debug("                data=", data );
            console debug("                data type=", typeof(data));
            if (typeof(data) == "string") {
                var kmlURL = data;
            } else {
                // broken, what now?
                return;
            }
            // render layer
            if (google != null) {
                var newMarker=new google.maps.KmlLayer(kmlURL);
                console.debug("new marker layer=",newMarker);
                console.debug("           map=",map);
                newMarker.setMap(map);
                console.debug("Map-Update finished");
            }
        });
    }
};

guiBlocks.Block.prototype.addMapLayer = function(elem,params) {
    var block = this;
    // show list of layers, select and add to map
    var layerList = [];
    var $dlg = $(elem).find(".dialog.add_layer_select");
    var $sel = $dlg.find("select.add_layer_select");
    // fill list of layers
    blocks.loadListOfItems("test1", "layer", function(data) {
        console.debug("add layer list of items=",data);
        layerList = data;
        $sel.empty();
        for (var i=0; i < data.length; i++) {
            var key = data[i].key;
            var val = data[i].val;
            var name = val.name;
            console.debug("layer",i," key=",key," value=",name);
            $sel.append('<option value="'+key+'">'+name+'</option>');
        }
    });
    console.debug("dlg=",$dlg);
    $dlg.dialog({
        buttons: {
            "Ok": function() {
                var layerName = $(this).find(".add_layer_select").val();
                $(this).dialog("close");
                var layerParams = jQuery.grep(layerList, function(x){return (x.key == layerName);})[0].val;
                console.debug("addlayerok params=",layerParams);
                params = block.appendMapLayer(layerParams);
                block.showMapParams(elem, params);
                params = block.readMapParams();
                block.updateMap(elem,params);
            }, 
            "Cancel": function() { 
                $(this).dialog("close"); 
            } 
        }
    });
};