Adding a drawn layer to a layer group dynamically

Question

I am trying to save a layer drawn using OpenLayers 3.9 and add it to the map and list it using ol3-layerswitcher. The layer is being saved and can be accessed through the GeoServer using WMS.

Currently I am generating a JS file using PHP every time the map page loads, which contains all the saved layers. These layers are displayed on map and are listed using ol3-layerswitcher. The problem with this method is the map page needs to be reloaded every time a new layer is saved for it to display on map. I want to save the layers and display them dynamically without reloading the page.

I was able to achieve it with this code.

var num = 0;
var tmp = "tmp"+num;
var s = "s"+num;

$('#savelayer').click(function() {
    var slyrname = $('#slyrname').val();
    var getdrawn = $('#getdrawn').val();

    //TO SAVE THE DRAWN LAYER

    $.ajax({
        type: 'POST',
        url: 'savelyr.php',
        data: 'slyrname='+slyrname+'&getdrawn='+getdrawn,
        success: function() {
            console.log("Success");

            //TO DEFINE THE SAVED LAYER

            var s = document.createElement("script");
            s.innerHTML = 
                    "var "+tmp+" = new ol.layer.Tile({"+
                        "title: '"+slyrname+"',"+
                        "source: new ol.source.TileWMS({"+
                        "url: 'http://localhost:8080/geoserver/TEST/wms',"+
                        "params:{'Layers':'"+slyrname+"'}}),"+
                        "zIndex:'1'});";

            document.getElementById("scripts").appendChild(s);

            //TO ADD THE LAYER TO LAYER GROUP
            map.addLayer(tmp);
            //drawngroup.getLayers().getArray().push(tmp);

            num++;
            console.log("Success 2");
        }
    }); 
});

This adds the layer to the map and is displayed in the layer switcher without any issue but the problem is I need the saved layer to be listed under a layer group.

So I am trying to add the layer to the layer group using the method described in this answer

drawngroup.getLayers().getArray().push(tmp);

This part of code is supposed to make it happen but it gives the following error when I add it to the code.

ol.js:152 Uncaught TypeError: a.Yf is not a function
    at ol.js:152
    at Array.forEach (<anonymous>)
    at Yc.k.forEach (ol.js:48)
    at uh.k.Yf (ol.js:152)
    at ol.js:152
    at Array.forEach (<anonymous>)
    at Yc.k.forEach (ol.js:48)
    at uh.k.Yf (ol.js:152)
    at G.k.Sp (ol.js:292)
    at G.<anonymous> (ol.js:279)

The same piece of code works when I try it on the browser's developer console and adds the layer to the group.

Can someone point me what the issue might be or what is it that I am doing wrong?

Answer 1

After a bit of struggle I found the problem was with the way I was handling the tmp variable. I was wrong to assume that since tmp = tmp0 the tmp0 variable would be pushed. Adding eval() fixed the issue.

drawngroup.getLayers().getArray().push(eval(tmp));

This is the final code.

var num = 0;
var tmp; var s;

$('#savelayer').click(function() {
    var slyrname = $('#slyrname').val();
    var getdrawn = $('#getdrawn').val();
    tmp = "tmp"+num; s = "s"+num;
    $.ajax({
        type: 'POST',
        url: 'savelyr.php',
        data: 'slyrname='+slyrname+'&getdrawn='+getdrawn,
        success: function(msg) {
            console.log(msg);
            var s = document.createElement("script");
            s.innerHTML = 
                        "var "+tmp+" = new ol.layer.Tile({"+
                        "title: '"+slyrname+"',"+
                        "source: new ol.source.TileWMS({"+
                        "url: 'http://localhost:8080/geoserver/TEST/wms',"+
                        "params:{'Layers':'"+slyrname+"'}}),"+
                        "zIndex:'1'});";
            document.getElementById("scripts").appendChild(s);
            drawngroup.getLayers().getArray().push(eval(tmp));
            num++;
            console.log("Success");
        }
    }); 
});