1

I'm creating a web map application using PostgreSQL, GeoServer and Leaflet. For now I can publish data, and also ask for some simple information when clicking on a feature in the map.

What I want to achieve is to get the information of all the points within a polygon with their properties (in an extra window or popup etc.)

What I'm trying is to create a spatial query in the postgres database then I get all the points in a table as a result.

I know how to use tables from the database in Leaflet and visualize them but how can I retrieve the information from the spatial query as text when clicking on the specific polygon in the map?

This is how I visualize my data from Geoserver, and the function I am using for asking for the props but it only works for one layer.

I'm using the following plug-in for my request to GeoServer:

https://github.com/iamtekson/leaflet-geoserver-request


wfsLayer = L.Geoserver.wfs("http://localhost:8080/geoserver/wfs", {
  layers: "cite:ffm ",
   style: {
   
            weight: 2,
            opacity: 0.5,
            color: 'white',
            dashArray: '3',
            fillColor: "yellow",
            fillOpacity: 0.3,
    
  },
      onEachFeature: onEachFeature

});
 wfsLayer.addTo(map);
 
wfsdc = L.Geoserver.wfs("http://localhost:8080/geoserver/wfs", {
  layers: "cite:dc ",
   style: {
   
    
  },
    onEachFeature: onEachFeature

});
 wfsdc.addTo(map);


    var info = L.control();
    
    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div','info');
        this.update();
        return this._div;
    };
    
    info.update = function (props) {
        this._div.innerHTML = '<h4>Info</h4>' +  (props ?
            '<b>' + props.sttlname + '</b><br />' + props.dc_id + ' ' : '');
    };

    info.addTo(map);
    
        function highlightFeature(e) {
        var layer = e.target;

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    var wfsLayer;
    

    function resetHighlight(e) {
        wfsLayer.resetStyle(e.target);
        info.update();
    }

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
    }
3
  • use the polygon in the filter you send geoserver in the WFS request
    – Ian Turton
    Jul 28 at 15:15
  • 1
    L.Geoserver.wfs has option CQL_FILTER where you can specify polygon filter for features, see docs.geoserver.org/latest/en/user/tutorials/cql/….
    – TomazicM
    Jul 28 at 19:34
  • I was trying to solve the issue with this. Can I only get Geometry as an Output here? And also can I use two layers with it? Because I am having two layers one point and one poly. and i want all point features in all the polygon as a list, when i click on the poly.
    – Nicola
    Aug 2 at 12:33

0

Your Answer

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

Browse other questions tagged or ask your own question.