Redraw/Refresh WMS layer in Leaflet

Question

I have a WMS layer in my leaflet map:

var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/volonteri/wms?', {
            layers: "trgovine",
            transparent: true,
            format: 'image/png'
        }).addTo(map);

In backend, there is a simple PHP script that stores new points into PostGIS table which is served via geoserver as WMS.

I use an AJAX request to send data to backend PHP script. I need to refresh the layer after successful insert to draw the new point on map, but cannot find any method for refreshing. The code looks like this:

$.ajax({
        type: 'POST',
        url: 'http://localhost:8000/api/trgovina',
        data: { 
            'name': name,
            'shop': shop,
            'geom': geometry
        },
        success: function(){
            /* Redraw/refresh/reload should go here */
        }
    });

How can I solve this? I remember the older versions of openlayers had something simple like .redraw() method, but I'm pretty new to leaflet.

Answer 1

Let me quote from the Leaflet API documentation, about methods for L.TileLayer.WMS:

setParams(<Object> params, <Boolean> noRedraw?)

Merges an object with the new parameters and re-requests tiles on the current screen (unless noRedraw was set to true).

After this moment of RTFM, you should try to simply

wmsLayer.setParams({});

or even

wmsLayer.setParams({}, false);

---

That makes Leaflet tell the browser to re-request the tiles. But if the tile URLs are actually the same, your web browser might pull the tiles from its cache instead of re-requesting the tiles to the WMS server.

If this is the case, you might want to use some form of cache busting, e.g. adding an ever-changing fake WMS parameter:

wmsLayer.setParams({ wmsParameterThatDoesntExist: Date.now() }, false);

If you do implement cache busting, be aware that this can negatively affect performance, specially if you expect lots of concurrent clients.

Answer 2

An alternative could be

Util.setOptions(<your_layer>, {})

Util comes from leaflet library; <your_layer> it the layer (in your case a WMS layer) you want to update; {} is the object that contains the properties you want to change.