Search code examples
javascriptleafletpostgiscqlgeoserver

Leaflet cql_filter with user input

I have built a web map with PostGIS, Geoserver and Leaflet.However, I am hopelessly stuck with applying a cql_filter which accepts user input and updates the displayed WMS Layer. The map loads correctly with a static cql_filter. My javascript for my layer is as below and is housed in a function myMap():

var contours = L.tileLayer.wms('http://gis01-dbn:8080/geoserver/Inyaninga_243-198/wms', {
            layers: 'Inyaninga_243-198:contours_3857',
            format: 'image/png',
            transparent: true,
        });

contours.setParams({CQL_FILTER:"elevation = 100"});

I then created a function to pass as an updated cql_filter which will overwrite and update the previously stated filter parameters:

function updateParams() {
    var x = document.getElementById("myInput").value;
    var filter = "elevation = '" + x + "'";
    return contours.setParams({CQL_FILTER:filter});
}

My HTML has a form created which is meant to accept user input and apply it to the cql_filter yet I cannot get it to work accordingly:

<body>
    <form>
        Elevation(m):<br>
        <input type="text" id="myInput">
        <input type="button" value="Elevation" onclick="updateParams()">
    </form>
    <div id="map" class="map"</div>
    <script type="text/javascript">
        myMap();
    </script>
</body>

I am very new and this is a first attempt, am I perhaps missing something? Any help in the right direction will be much appreciated.

Solution

  • I have eventually managed to fix this and got the filter to work with a button.

    I had to move the var contours out from the myMap() function and place it within the script section of the HTML. Not the cleanest method but only option I could get working.

    I am presuming it was an issue of calling a function within another function.