TransWikia.com

How to add/remove Vector Layer from a Map

Geographic Information Systems Asked on June 2, 2021

I have doubts about how to show or hide a vector layer on the map once I have created it. I generate it after doing a php query and receiving the data in json.
This is the function that I use to send the data to the query and once the json is received I paint it on the map:

function search(){
    var element = document.getElementById("formName");
    obje = document.getElementById('cbx_esp');
    var txt='';
    txt = """+obje.value+""";
    url_obje = 'abundance='+txt;
    drawAbundance(obje.value);
}
function drawAbundance(cbx_espId){
    var vectorAbundance = new ol.source.Vector({
        format: new  ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {
            var proj = projection.getCode();
            var url = "obAbundance.php"
            var xhr = new XMLHttpRequest();

            var params = {
                abundance: cbx_espId
            }

            xhr.open('POST', url);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            var onError = function() {
               vectorAbundance.removeLoadedExtent(extent);
            }
            xhr.onerror = onError;
            xhr.onload = function() {
                xhr.responseText;
                console.log(xhr.responseText);
                if (xhr.status == 200) {
                    vectorAbundance.addFeatures(
                        vectorAbundance.getFormat().readFeatures(xhr.responseText)
                    );
                    map.getView().fit(vectorAbundance.getExtent());
                    $("#formName")[0].reset();
               } else {
                 onError();
               }
             }
             xhr.send(JSON.stringify(params));
        },
    });
    var vectorlayer = new ol.layer.Vector({
        source:vectorAbundance,
        visible:true,
        displayInLayerSwitcher: false,
        style: distICES,                
    });

    map.addLayer(vectorlayer)
}

//I tried this to show or not the veclayer
function add_de(e){
    if(e.checked){
        map.addLayer(vectorlayer);
    }else{
        map.removelayer(vectorlayer);
    }
}

I tried to create an input check and depending on whether it was checked or not, the vector layer was loaded, but it gives me the error that it is not defined:

Uncaught ReferenceError: vectorlayer is not defined

One Answer

Your declaration var vectorlayer is within function drawAbundance. You second function can't access it because of scope. See this article https://dmitripavlutin.com/javascript-scope/#3-function-scope as your issue is not really related to OpenLayers but to JavaScript in fact.

A correction below just for this issue.

function search(){
    var element = document.getElementById("formName");
    obje = document.getElementById('cbx_esp');
    var txt='';
    txt = """+obje.value+""";
    url_obje = 'abundance='+txt;
    drawAbundance(obje.value);
}

var vectorlayer;

function drawAbundance(cbx_espId){
    var vectorAbundance = new ol.source.Vector({
        format: new  ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {
            var proj = projection.getCode();
            var url = "obAbundance.php"
            var xhr = new XMLHttpRequest();

            var params = {
                abundance: cbx_espId
            }

            xhr.open('POST', url);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            var onError = function() {
               vectorAbundance.removeLoadedExtent(extent);
            }
            xhr.onerror = onError;
            xhr.onload = function() {
                xhr.responseText;
                console.log(xhr.responseText);
                if (xhr.status == 200) {
                    vectorAbundance.addFeatures(
                        vectorAbundance.getFormat().readFeatures(xhr.responseText)
                    );
                    map.getView().fit(vectorAbundance.getExtent());
                    $("#formName")[0].reset();
               } else {
                 onError();
               }
             }
             xhr.send(JSON.stringify(params));
        },
    });
    vectorlayer = new ol.layer.Vector({
        source:vectorAbundance,
        visible:true,
        displayInLayerSwitcher: false,
        style: distICES,                
    });

    map.addLayer(vectorlayer)
}

//I tried this to show or not the veclayer
function add_de(e){
    if(e.checked){
        map.addLayer(vectorlayer);
    }else{
        map.removelayer(vectorlayer);
    }
}

Correct answer by ThomasG77 on June 2, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP