Vue2leaflet: WMS CQL_Filter and Group layer

[hulauwa]

I can not filter the WMS layer as what i can with leaflet.
I have try:
<l-wms-tile-layer :name="ten2" layer-type="base" :base-url="url2" :attribution="attribution" CQL_FILTER='maluuvuc=1' opacity="0.7" :layers="layers" styles="watershed" ,transparent= true, format= "image/png"></l-wms-tile-layer>
and
<l-wms-tile-layer :name="ten2" layer-type="base" :base-url="url2" :attribution="attribution" @CQL_FILTER='maluuvuc=1' opacity="0.7" :layers="layers" styles="watershed" ,transparent= true, format= "image/png"></l-wms-tile-layer>
But It does work.
I also have a problem with Overlay 2 layer.
Could you help me? Thank you so much!!

[DonNicoJs]

@hulauwa I think you should try to pass CQL_FILTER in the options prop

[hulauwa]

Thank you so much I did it bro.
How about group the layer, in the document, it does not available

[DonNicoJs]

@hulauwa you can use the @ready event on the component, it return the mapObject element where you can find the layer

[hulauwa]

Do you know how to use the method in leaflet, I use:
overlay.Watershed.setParams({CQL_FILTER:" watershedcode >0"});
overlay.Watershed.setParams({CQL_FILTER:" watershedcode >10"});

Thank you

[DonNicoJs]

@hulauwa you can investigate the mapObject, that mapObject is returned in the ready event and you can retrieve it with a ref on the l-map

[hulauwa]

Like this event right, I found in vue development. But dont have setParams. I will find on l-map

[DonNicoJs]

@hulauwa sorry! the ref on your wms tilelayer component

[hulauwa]

I read these sentences:
Most of our components do not emit events but all the components pass down listeners for leaflets events. It's possible to bind to them by simply writing @leafletEventName.

But I try to replace it like:
@overlay.Watershed.setParams({CQL_FILTER:" watershedcode >0"});
@setParams({CQL_FILTER:" watershedcode >0"});
It s Errorr.
How can I find the Groupname rand layername that Vue stores.
Thank you so much

[DonNicoJs]

@hulauwa I need a piece of code or better a codesanbox example to help you further

[Carnid]

@hulauwa setParams is a leaflet method, not an event. As for events, the @leafletEventName works only in your vuejs HTML template, for example:
<l-map @zoomstart="doSomething"></l-map>

As for the cql filter, you should be able to pass it within the options prop of the <l-wms-tile-layer> component like so: <l-wms-tile-layer :options="{ cql_filter: 'watershedcode >0'}"></l-wms-tile-layer>

I heavily suggest you consult the vuejs documentation, as it will greatly help you understand how this plugin interacts with leaflet.js

[hulauwa]

@hulauwa setParams is a leaflet method, not an event. As for events, the @leafletEventName works only in your vuejs HTML template, for example:
<l-map @zoomstart="doSomething"></l-map>

As for the cql filter, you should be able to pass it within the options prop of the <l-wms-tile-layer> component like so: <l-wms-tile-layer :options="{ cql_filter: 'watershedcode >0'}"></l-wms-tile-layer>

I heavily suggest you consult the vuejs documentation, as it will greatly help you understand how this plugin interacts with leaflet.js

Thank you, I have succeeded to display the the map with cql_filter just like the way you do. But I wan to update the map for the event. I create a button: I want to onclick the button the filter will be different for example: cql_filter: 'watershedcode >10'.
As normal, i could use the function in leaflet like overlay.Watershed.setParams({CQL_FILTER:" watershedcode >10"}); when click on the button. But for Vue-Leaflet. I cant find the way

[hulauwa]

Wonderful. I have found the way to do it. Thank you all.
this.$refs.watershed.mapObject.setParams({cql_filter: 'watershedcode >10});