1

After making the call for this WFS from GeoServer I'm able to display it on the map without any problem. But how do you run two (or more) requests to get another WFS?

Here's my WFS request for the streets layer:

var owsrootUrl = 'http://localhost:8080/geoserver/city.territorio/ows';

var defaultParameters =       
service : 'WFS',
version : '2.0',
request : 'GetFeature',
typeName : 'city.territorio:streets_city',
outputFormat : 'text/javascript',
format_options : 'callback:getJson',
SrsName : 'EPSG:4326'
};


var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

var WFSLayer = L.geoJson(null, {
    style: function (feature) {
        return {
            stroke: true,
            fillColor: '#B04173',
            fillOpacity: 2,
            color: '#000000',
            weight: 1,
        };
    }
 });

var ajax = $.ajax({
    url: URL,
    dataType: 'jsonp',
    jsonpCallback: 'getJson',
    success: function (response) {
        WFSLayer.addData(response);
        WFSLayer.addTo();
    }
});

Now, I would like to do the same thing with another WFS.

Once the second call is executed, in the Layer Control Tree I see correctly the Check/Uncheck Box but not the second layer. If I'm not mistaken, this error should have to do with the first request already executed making the second one impossible due to the Callback. How to solve this?

EDIT: I've modified and updated my question with everything I've done so far in order to make you better understand my current situation.

<!doctype html>
<html>
<head>

 <meta charset="utf-8" />

<!--Let browser know website is optimized for mobile-->
 <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webmap Comune di Colleferro</title>

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script src="src/plugins/leaflet-bing-layer.js"></script>
 <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
 <script src="src/plugins/leaflet-providers.js"></script>
 <script src="src/plugins/leaflet.ajax.min.js"></script>
 <script src="src/plugins/proj4.js"></script>
 <script src="src/plugins/proj4leaflet.js"></script>
 <script src="src/plugins/leaflet.wms.js"></script>
 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise"> 
 </script>





 <style type="text/css">
    html, body {width: 100%; height: 100%; margin: 0; }
 #map {width: 100%; height: 100%; }
 </style>
 </head>

 <body>

 <div id="map"></div>
 <link rel="stylesheet" href="src/css/L.Control.Layers.Tree.css" 
 crossorigin=""/>
 <script src="src/plugins/L.Control.Layers.Tree.js"></script>




 <script type="text/javascript">
    var center = [41.72707235373704, 13.004139599641844];


    var BING_KEY = 'my_key'
    var binglayer= L.tileLayer.bing(BING_KEY)





var osm = L.tileLayer(
        '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {attribution: '© OpenStreetMap contributors'}
    );

    
    var thunderAttr = {attribution: '© OpenStreetMap contributors. Tiles courtesy of Andy Allan'}
    var transport = L.tileLayer(
        '//{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
        thunderAttr
    );

    var cycle = L.tileLayer(
        '//{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
        thunderAttr
    );



    var stadiadark = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'}
    );


    var boundaries = L.tileLayer.wms('http://localhost:8080/geoserver/city.territorio/wms', {
        layers: 'city.territorio:administrative_boundaries',
        format: 'image/png',
        transparent: true,
    });

   var owsrootUrl = 
   http://localhost:8080/geoserver/city.territorio/ows';

   var defaultParameters = {
   service : 'WFS',
   version : '2.0',
   request : 'GetFeature',
   typeName : 'city.territorio:streets_city',
   outputFormat : 'text/javascript',
   format_options : 'callback:getJson',
   SrsName : 'EPSG:4326'
  };


 var parameters = L.Util.extend(defaultParameters);
 var URL = owsrootUrl + L.Util.getParamString(parameters);

var WFSLayer = L.geoJson(null, {
    style: function (feature) {
        return {
            stroke: true,
            fillColor: '#B04173',
            fillOpacity: 2,
            color: '#000000',
            weight: 1,
        };
    }
});

    var ajax = $.ajax({
    url: URL,
    dataType: 'jsonp',
    jsonpCallback: 'getJson',
    success: function (response) {
        WFSLayer.addData(response);
        WFSLayer.addTo();
    }
});




  var buildingsowsrootUrl = 
 'http://localhost:8080/geoserver/city.territorio/ows';

 var buildingsdefaultParameters = {
 service : 'WFS',
 version : '2.0',
 request : 'GetFeature',
 typeName : 'city.territorio:buildings_city',
 outputFormat : 'text/javascript',
 format_options : 'callback:getJson',
 SrsName : 'EPSG:4326'
 };


 var buildingsparameters = L.Util.extend(buildingsdefaultParameters);
 var buildingsURL = buildingsowsrootUrl + 
L.Util.getParamString(buildingsparameters);

var buildingsWFSLayer = L.geoJson(null, {
    style: function (feature) {
        return {
            stroke: true,
            fillColor: '#B04173',
            fillOpacity: 2,
            color: '#000000',
            weight: 1,
        };
     }
  });

   var ajax = $.ajax({
    url: buildingsURL,
    dataType: 'jsonp',
    jsonpCallback: 'getJson',
    success: function (response) {
       buildingsWFSLayer.addData(response);
        buildingsWFSLayer.addTo();
    }
  });
     

    var map = L.map('map', {
        renderer: L.canvas(),
        layers: [osm],
        center: center,
        zoom: 13
  });


  L.control.scale().addTo(map);



//baselayers

    var baseTree = {
        label: 'BaseLayers',
        noShow: true,
        children: [
            {
                label: 'OpenStreeMap',

                children: [
                    {label: 'OpenStreetMap Standard', layer: osm},
                ]
            },
            {
                label: 'Stadia Basemaps',
                children: [
                    {label: 'Stadia Alidade Smooth Dark', layer: stadiadark},
                ]
            },
            {
                label: 'Thunder',
                children: [
                    {label: 'Cycle', layer: cycle},
                    {label: 'Transport', layer: transport},
                ]

            },
            {
                         label: 'Bing',
                         children: [
                        {label: 'Bing Satellite', layer: binglayer}
                         ]
                     },
                ]
        };


 //Overlays

        var overlaysTree = {
            label: 'City',
            selectAllCheckbox: 'Un/select all',
            children: [
     {

            label: 'Territorio',
            selectAllCheckbox: true,
            children: [
            {
                label: 'Test',
                selectAllCheckbox: true,
                children: [
                    { label: 'Boundaries', layer: boundaries },
                    { label:'Streets', layer: WFSLayer},
                    {label: 'Buildings', layer: buildingsWFSLayer}


                ]
            },
            /* ... */

        ]
    }
  ]
 }


        //control options

        var lay = L.control.layers.tree(baseTree, overlaysTree,
        {
            namedToggle: true,
            selectorBack: false,
            closedSymbol: '&#8862; &#x1f5c0;',
            openedSymbol: '&#8863; &#x1f5c1;',
            collapseAll: 'Collapse all',
            expandAll: 'Expand all',
            collapsed: false,
        });



           lay.addTo(map).collapseTree().expandSelected().collapseTree(true);
           L.DomEvent.on(L.DomUtil.get('onlysel'), 'click', function() {
           lay.collapseTree(true).expandSelected(true);

        });


</script>
</body>
</html>

As @Falke Design said, I didn't add "map" inside the "AddTo" request because in this way I can start with the webmap without any layer selected and if, on the contrary I insert them, the layers are visible immediately and I have to uncheck them every time from the Layer Control.

Moreover, with my current situation, I see the Buildings box but when I go to activate it, I get the Roads layer and when I go to select the Roads one nothing appears. I am feeling a bit confused! I hope I'm not confusing you with what I wrote...it's just my first webmap

1
1

I think it should work to call both request. But the problem that I see is that you don't add it to the map in your code.

Replace it with:

...

    success: function (response) {
        WFSLayer.addData(response);
        WFSLayer.addTo(map);
    }
...
    success: function (response) {
        BuildingsWFSLayer.addData(response);
        BuildingsWFSLayer.addTo(map);
    }
...
1
  • I removed "Map" from the AddTo because otherwise I see the layer already on the map (which I don't want because everything has to be disabled). Anyway, I just updated my question with the full example. I hope it can be useful to better understand my problem. – Matteo Ruggieri Feb 4 at 10:48
0

I'm writing this to inform that I solved this problem by changing the name of the callback (both in format_options and jsonpcallback) making it unique in each WFS request I needed

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.