2

I have hosted a Geoserver image in a docker container locally and I created a layer using some sample data stored in a Postgis database. I think the layer is correct, because when I click on layer preview->OpenLayers on the Geoserver webUI, everything looks OK. But I am not able to show the features inside my own Leaflet script. I only see a blank page with a grey background. Here is the code I am currently using:

var mymap = L.map('mapid').setView([52.296904, 4.852940], 18);

var rootUrl = 'http://localhost:8080/geoserver/wfs';

var defaultParameters = {
    service: 'WFS',
    version: '2.0.0',
    request: 'GetFeature',
    typeName: 'acme:pand',
    maxFeatures: 200,
    outputFormat: 'application/json',
    srsName:'EPSG:28992'

};

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

var WFSLayer = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'json',
    jsonpCallback : 'getJson',
    success : function (response) {
        WFSLayer = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            }
        }).addTo(mymap);
    }
});

I know that it is at least partially working, because the code does enter the 'success' and 'style' functions, I just can't see any features on the map. The firefox developer web console does not report any errors or warnings.

Is there anything wrong with my code or could there be something else that is causing my features not to show? I know I am centering the map at the right location.

  • 1
    Is your Leaflet map configured for EPSG:28992? – user30184 Jan 20 at 20:25
  • I don't think it is. I use this to declare the map: var mymap = L.map('mapid').setView([52.296904, 4.852940], 18); I will edit the question, and add this piece of code, because it wasn't copied before. – SilverTear Jan 20 at 21:28
2

You can not see the output because your WFS data is fully transparent. Just change fillOpacity: 0 to 1 in your code.

  • That worked, I was looking at this for quite a while, but totally missed it. – SilverTear Jan 21 at 13:50
1

Unless you have your map configured to a custom projection (which I am fairly certain you do not, given the starting coordinates in the code you posted), you need to serve the features in EPSG:4326 (WGS84 unprojected). If your WFS is already uploaded & configured for EPSG:28992 then you can go to its configuration page and declare it as such, but make sure you also specify to Reproject to Declared, as seen in this image (but obviously with EPSG:28992 as the native SRS):

enter image description here

Keep in mind this will cause a slight decrease in performance on the server side as the coordinates now have to go through a projection before being delivered to the client application. This is probably not an issue for you but it is something to keep in mind if the application is intended to scale up significantly.

  • Thanks. I changed declared SRS to EPSG:4326 and also specified "Reproject to declared", but I am still getting a grey page. Do I also need to change the code? If it would help, I can temporarily host the container in the cloud. so you can access it. – SilverTear Jan 20 at 22:57
  • Try logging the response to the console and inspecting it, maybe there is some other problem. – wfgeo Jan 21 at 10:28
  • Changing the opacity from 0 to 1 worked. I tried reverting the settings and it still worked. So perhaps it doesn't matter in this case? Any thoughts on this? – SilverTear Jan 21 at 13:49
  • Oh, yeah, I completely missed that in your code. That would certainly make it invisible. But in any case, Leaflet definitely does default to EPSG:4326 so I am a little surprised and your findings. Maybe newer versions of Leafet do implicit reprojection if you specify the EPSG in the WFS request. – wfgeo Jan 21 at 19:24

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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