0

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?

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.