title: How do I interact with WMS tile layer served by GeoServer using Vuelayers?
body: <p>I'm developing a web mapping application using the <a href="https://vuelayers.github.io" rel="nofollow noreferrer"><code>Vuelayers</code></a> library which is <em>Web map Vue components with the power of OpenLayers</em>.</p>
  
  <p>I have the following code in my template:</p>
  
  <pre><code>&lt;vl-map @singleclick="hideOverlay" @postcompose="onMapPostCompose"
   :load-tiles-while-animating="true" ref="map"
  :load-tiles-while-interacting="true" data-projection="EPSG:4326"
  style="height: 900px" @mounted="onMapMounted"&gt;
   ....
  
    &lt;component v-for="layer in layers" :ref="layer.id" overlay
      :is="layer.cmp"
      :key="layer.id" v-bind="layer"&gt;
          &lt;component :is="layer.source.cmp" v-if="layer.visible" v-bind="layer.source"&gt;
          &lt;/component&gt;
      &lt;/component&gt;
       ....
  &lt;/vl-map&gt;
  
  </code></pre>
  
  <p>And in the data object I have the following property:</p>
  
  <pre><code>     layers: [
  
              {
                  id: 'sections',
                  title: 'Sections',
                  cmp: 'vl-layer-tile',
                  visible: true,
  
                  source: {
                      cmp: 'vl-source-wms',
                      url: 'http://localhost:8080/geoserver/sager/wms',
                      layers: 'sections',
                      tiled: true,
                      format: 'image/png',
                      serverType: 'geoserver',
                  },
              },
       ....
      ]
  </code></pre>
  
  <p>So how do I get the layer properties when I click on it?  Knowing that <code>vl-tile-layer</code> doesn't have the <code>@click</code> event as mentioned <em><a href="https://vuelayers.github.io/#/docs/component/tile-layer" rel="nofollow noreferrer">here</a></em>.</p>