details on various map layers using the map.on method for features

How do I retrieve all properties of a feature using the map.forEachFeatureAtPixel method? When I try to use a for loop to get all properties, it doesn't work. The code provided below fetches only a single value. By employing forEachFeatureAtPixel, I am able to specify the layer from which I want to extract information. Here is the snippet:

map.on('click', function (evt) {
    document.getElementById("divInformation").innerHTML = '<h1>Click for Info</h1>';
    var layer;
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, featureLayer) {
        layer = featureLayer;
        return feature;
    });
    var el = document.getElementById('divInformation');
    el.innerHTML = '';
        if(layer === vectorLayer1){
            el.innerHTML +=  feature.get('cod');
            el.innerHTML += feature.get('date);
        }else if(layer === vectorLayer2){
            el.innerHTML += feature.get('name');
            el.innerHTML += feature.get('Percent');
         }else{
             el.innerHTML = '<h1>click for Info</h1>';
         }
});

Answer №1

If you want to see all the details of a feature, you can use

JSON.stringify(feature.getProperties())
like shown in this example:

For more specific formatting control, a for ... in loop can be utilized. This way, you can choose which properties to display and exclude internal keys like geometry for better readability.

var key;
var properties = feature.getProperties();
for (key in properties) {
  el.innerHTML +=  key + ': ' + properties[key];
}

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

Is it feasible to modify a JavaScript value through the PHP GET method?

My HTML file contains the following JavaScript code: var a=["","#"] I want to append a value after the # symbol by specifying that value in the website URL. For example: site.com/#value Therefore, the updated JavaScript code will be: var a=["","#va ...

What steps should I take to convert this from a string to HTML format?

I recently encountered an issue where my code was being converted into a string instead of the HTML output I intended to achieve. My main query is how can I convert this into innerHTML before it gets converted? Is there any way to accomplish this task if ...

Tips for implementing next-iron-session with personalized api route middleware in NextJS?

Currently, I am working on implementing session storage with next-iron-session and using Firebase for authentication. Every API route requires both the auth middleware and next-iron-session. This is my first time using NextJS and I have tried several appro ...

A step-by-step guide on how to verify a selection using JavaScript

Is it possible to validate the select option with JavaScript? For example, if a user selects "Admin," then the page works for admin login. If they select "Vendor," then it works for vendor login. <table class="login_table" width="100%" border="0" cells ...

Ways to Implement Named Module Exports in Node.js Version 16 Application

Currently, I am working with Node 16.3.0 and Express 4.17.1 (although the Node version is open to change) In my project, I have a file named session.js structured as follows: // session.js exports.fetchUserId = async function(token){ ... } exports.sav ...

Attempting to display numerous react components on various divs instead of just one ID

Currently, I am facing a challenge in creating multiple react comment boxes. The package I am using is based on #id instead of class, which resulted in only rendering one box instead of all. To resolve this issue, I attempted to switch from GetelemntbyID t ...

Picking a specific field from an array depending on a filtered value

Hello everyone, I am a newcomer to Angular and the entire MEAN stack ecosystem. Currently, I have a MongoDB database collection structured like this: db.users({ username: "Test1", fname: "Bob", lname: "Saget", email: "<a href="/cdn ...

What is the best way to transfer a variable from a Node.js Express server to an EJS HTML file in order to toggle alert visibility?

Hello, I am currently facing a challenge in sending a variable from my app.js file to my ejs HTML file in order to toggle the display of an alert. Here is what the relevant part of my app.js code looks like: view image description here Initially, I attem ...

How can I retrieve an array of collections from multiple parent documents in Firebase and pass them as props in Next.js?

I need to access all the collections within the documents stored in a collection named users. This is how I currently retrieve all the user information: export async function getServerSideProps() { const snapshot = await firebase .firestore() .collection ...

Is there a distinction between including empty arrays within the method and passing them as object parameters in writing?

When it comes to writing empty arrays in JavaScript, is there a difference between declaring them inside the method like this: var example = { calcMethod: function() { this.array1 = []; this.array2 = []; } }; and declaring them as ...

Deleting images based on their class through a loop

Currently, I am in the process of constructing a carousel using data retrieved from an endpoint. The challenge I face is determining the appropriate image size to request from the server. To address this, I perform some front-end processing to dynamically ...

Best practice for resetting jquery datatables for proper functioning

A user on Stack Overflow was seeking a solution for working with DataTables.js and a variable number of columns. The provided solution can be found here: http://jsfiddle.net/gss4a17t/. It's worth noting that this solution relies on a deprecated funct ...

Converting JavaScript code to React requires excluding jQuery

I have been working on updating my old JavaScript code to make it compatible with React. The main goal is to integrate external data into a 3rd party form. Here is the original JS code: <script charset="utf-8" type="text/javascript" ...

Obtain information from an HTTP GET call

I have encountered an issue where I am unable to access the data that is passed with an HTTP GET request from the client to my server. Oddly enough, this setup works perfectly fine for POST requests but not for GET requests. The technologies being used ar ...

React hooks causing dynamic object to be erroneously converted into NaN values

My database retrieves data from a time series, indicating the milliseconds an object spends in various states within an hour. The format of the data is as follows: { id: mejfa24191@$kr, timestamp: 2023-07-25T12:51:24.000Z, // This field is dynamic ...

Guide to sending a post request with parameters in nuxt.js

I am trying to fetch data using the fetch method in Nuxt/Axios to send a post request and retrieve specific category information: async fetch() { const res = await this.$axios.post( `https://example.com/art-admin/public/api/get_single_cat_data_an ...

Unable to run the JSON.parse() function while using the 1.10.2 version of jquery.min.js

Has anyone else encountered a situation where using JSON.parse() to parse the PHP array return only works when applying 1.3.2/jquery.min.js and not 1.10.2/jquery.min.js? If so, what solution did you find? PHP array return $returnArray['vercode' ...

Eliminate any unnecessary tags located before the text

I am facing a challenge with the following code snippet. The Variable contains a string that includes HTML tags such as <img>, <a>, or <br>. My goal is to eliminate the <img> tag, <a> tag, or <br> tag if they appear befo ...

Using JQUERY for navigating through pages in a REST API while utilizing deferred functionality

I am utilizing a REST API in jSON format to fetch records. My Approach The REST API retrieves records in jSON format. Initially, I retrieve the top 6 records, along with an additional jSON node containing a forward paging URL. This URL is assigned t ...

Encountering difficulties loading Google Maps with jQuery

When attempting to load a map on my page, I encountered a problem when including the jquery.min.js file in the head tag. If it is included, I receive an initMap : no such method error. However, if I reverse the order of inclusion, with maps first and then ...