What is the best way to utilize a WMS tile layer provided by GeoServer with the help of Vuelayers?

I am in the process of creating a web mapping application using the Vue Layers library, which is described as "Web map Vue components with the power of OpenLayers".

Within my template, I have the following code:

<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">
 ....

  <component v-for="layer in layers" :ref="layer.id" overlay
    :is="layer.cmp"
    :key="layer.id" v-bind="layer">
        <component :is="layer.source.cmp" v-if="layer.visible" v-bind="layer.source">
        </component>
    </component>
     ....
</vl-map>

In the data object, there is a property called "layers" defined in this way:

     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',
                },
            },
     ....
    ]

My question now is, how can I access the layer properties when it is clicked? It seems that the vl-tile-layer component does not have a click event like mentioned here.

javascriptvue.jsopenlayersgeoservervuelayers

Answer №1

To add a click handler to the main map component, follow these steps:

<vl-map @click="mapClick" @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">

</vl-map>

Within the click event, use the forEachLayerAtPixel function to iterate through each layer displaying at the clicked pixel. This function provides access to the ol.Layer.Layer object for each layer:

 methods: {
  mapClick: function(evt){
    evt.map.forEachLayerAtPixel(
        evt.pixel,
        function(layer){ layer.getProperties()},
        function(layer){/*apply filters if needed*/})
  }
}

Note that CORS must be configured on the server and you may need to set the crossOrigin setting on OpenLayers layers used by vue-layers. If you encounter an error like:

"SecurityError: Failed to execute 'getImageData' on 
'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data

You can alternatively use a more general approach such as:

evt.map.getLayers().item(0)

or

evt.map.getLayers.forEach(
    function(layer){
        layerProps = layer.getProperties()
        if(layerProps.id === "the one you want")
        {
            // Implement your own logic to check intersection with the layer.
        }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Find the first element in an array of resolved promises in sequential order

In my current setup, I am sending multiple requests to different APIs and each request takes a specific amount of time to fulfill. If one request is successful, I return the resolved value and stop. Currently, I am processing these requests one after the o ...

javascriptnode.jspromise

I am facing an issue with Lotties having a black background in my NextJS project. Is there a way to make them transparent

I am facing an issue with my LottieFiles (JSON) displaying a black background when imported into my NextJS project. Despite trying to set background='transparent' on both the Player and parent div, the problem persists. I made sure to export my ...

javascriptreactjsjsonnext.jslottie

Filtering Gridviews with Javascript or jQuery

My current project involves using an ASP.NET GridView with multiple ListBoxes representing Departments, Categories, Faculties, and more. The data in these ListBoxes and the GridView is dynamically loaded from a MSSQL database in the codebehind. I am in ne ...

javascriptjqueryasp.netgridview

Exploring the use of jQuery autocomplete to retrieve data attributes

Looking to retrieve additional data-attributes from the Mapbox API. The autocomplete plugin I implemented can be found here. (Utilizing Python/Django for backend) My goal is to send extra information such as country code, city, and country to my databas ...

javascriptjqueryajaxautocompletecustom-data-attribute

Explore an array of elements to find the correct objectId stored in mongodb

element, I am faced with a challenge of searching through an array of objects to find a key that contains nested object id for populating purposes. Exploring My Object { service: 'user', isModerator: true, isAdmin: true, carts: [ ...

javascriptmongodbexpressmongoose

Incorporate Angular frontend into current website or project

I've successfully built a website using bootstrap, but now I'm looking to integrate Angular in order to transform it into a single page application. The goal is that when a user clicks on a link, only the necessary content will be loaded from the ...

javascriptnode.jsangularexpress

React component not displaying HERE map controls

Having trouble implementing zoom in and zoom out controls on HERE maps in React. Despite following the documented steps, I am unable to find a solution. I have meticulously followed all instructions provided at: The link to my map component can be found ...

javascriptreactjsmapszoomingheremaps

The fixed sidebar refuses to pause before reaching the footer

I am facing an issue while building my blog. I am trying to figure out how to make my sidebar widget sticky and stop scrolling before reaching the #footer section. My widget is overlapping my footer and it would be really helpful if someone could assist m ...

javascriptjqueryhtmlcss

Preventing typing by detecting keypresses in a text input

I'm trying to set up a text input field so that it triggers a function when the Enter key is pressed. I currently have an if condition to check for the Enter key press, but this prevents users from typing in the input box. What should I include in the ...

javascriptjquery

How can I modify the dot colors on a graph using chart.js?

Need assistance with changing the color of graph data points https://i.sstatic.net/QGJBv.png Here is my JavaScript code snippet I have successfully created a graph using chart.js. However, I now want to differentiate data points by displaying different c ...

javascriptangularjschartschart.js

What is the best way to pause before executing the next npm command until the current command finishes running?

At first glance, creating an 'init' command seems like a straightforward task. However, as I dive deeper into the process, challenges start to surface. The goal is to develop an 'init' command that assists in preparing a cloned repo fo ...

javascriptnode.jsnpmnpm-scripts

Customizing the JavaScript Calendar in Qualtrics

I came across a JavaScript code snippet that allows you to embed a calendar into a Qualtrics question. Specify a date for the survey: <link href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" rel="stylesheet" type="text/css" /> <script sr ...

javascriptqualtrics

What is the best way to ensure that the checkbox is not affected when you click on the area?

If the user interacts with the checkbox, I don't want the handleClick function to execute. Is there a way to exclude it or prevent the click event from triggering? <div ... onClick={this.handleClick}> <div> some content here < ...

javascriptreactjs

Issue with .html causing .hover to malfunction

Attempting a basic image rollover using jQuery, I've encountered an issue with the code below: HTML: <div class="secondcircle" id="circleone"> <p> <img src="/../ex/img/group1.png"> </p> </div> JS: $("# ...

javascriptjqueryhtml

Leveraging Google Sheets as a Dynamic Database with Ajax

I found a helpful guide on using Google Sheets as a database with Apps Script and ajax. Here is the link. I understand that I need to include 'Google Sheet/Apps Script Code' in a spreadsheet. However, I'm unsure about what needs to be place ...

javascriptphpajaxgoogle-apps-scriptgoogle-sheets

Include two arguments when making a $http POST request

I am facing a situation where a single property can have multiple images, but each image can only be assigned to that one property (one-to-many relationship with propertyId as foreign key). In the HTML, I am fetching the propertyId and passing it along wi ...

javascriptphpangularjshttppost

creating movement in a display of data points

(I'm just starting to learn about html5, so please keep it simple) I want to make a scatterplot of some data where the points move around over time. Right now, I am using context.arc() to create the initial frame of the animation with specific coord ...

javascripthtmlhtml5-canvas

Incorporating a variety of functions into an external javascript file

I am currently working on enhancing the functionality of a basic HTML page by incorporating JavaScript with multiple buttons. The problem arises when I attempt to introduce another function in my external JS file, as it causes the existing code to stop wor ...

javascriptjqueryhtml

Equivalent of ResolveUrl for loading scripts without the need for server technology

I am in the process of converting an ASP.NET web page into a plain HTML web page. Most of the work is done, however, I am having trouble replacing the ASP.NET Page.ResolveUrl function when setting a reference to a javascript file: <script src="<%= ...

asp.nethtmljavascript

Order of AngularJS $q service response with error management

I am facing an issue with my function that handles asynchronous calls using promises in a sequence within a for loop. The problem is that the loop breaks when an exception occurs, but I need it to continue even after an exception is thrown. Here is my asy ...

javascriptangularjsnode.jspromiseq