Jump to content

getProperties() problem


elcaiaimar

Recommended Posts

Hello everybody!

 

I'm working with openlayers 3 and I have several features, such as buildings, sewers, etc in my map. This features contain differents elements with values which have been put for me, such as name, coordinates, etc. My purpose was get this information of this features and I got it, but only in console.log. I want to visualize this information but in a innerHTML.

I 've tried to put this in my code:

 

if (feature) { content.innerHTML = feature.getProperties(); return container.style.display = 'block'; }

 

getProperties get an object of all property names and values and returns an Object. More information here:

http://openlayers.org/en/master/apidoc/ol.Feature.html?unstable=true#getProperties

 

With this code, when I click on the features I obtain: [object Object].

But I could check with console.log that when I click on the features, info is ok:

 

if (feature) { console.log(feature.getProperties()); return container.style.display = 'block'; }

 

Another way to get information is change the code such as:

 

if (feature) {

content.innerHTML = feature.getId() + ': ' + feature.get('name');

return container.style.display = 'block';

}

 

But it's not the correct way to do it because each feature has different data.

 

So, my question is: How could I show the feature data? I mean, the same info which appears using console but with innerHTML or something similar.

 

Thank you very much!

Link to comment
Share on other sites

If it returns an object then you'll need to access the specific properties of the object that you want to show and write those out. You can't just write an object or array to innerHTML, because innerHTML takes a string. "[object Object]" is what you get when you convert an object to a string. You should be able to see which properties the object has available in the console, so you can access those properties and build your string to write to innerHTML.

Link to comment
Share on other sites

So, if I get this in console when I click on a feature:

 

Object { geometry: Object, codimbornal: "B12", coorx: 725694.19931, coory: 4372192.91419, tipo: "RECTANGULAR PEQUENO", origen: "SIRA-II", observaciones: "Imbornal Pl. Ayuntamiento" }

 

I should write something similar to the next?

 

content.innerHTML = feature.getId() + ': ' + feature.get('codimbornal') + feature.get('coorx') + feature.get('coory')...etc

 

It works but only for this feature. Other features have different elements and then it appears 'undefined' in the news elements.

 

I think you are speaking about other thing right?

 

I know I have to add something to my code but I don't know what

 

Could you tell me what would I have to do if, for example, all my features only had one element? (This element would have a different name to each feature)

 

Thank you very much!

Link to comment
Share on other sites

Those are just properties, you don't need to use a get method. You could just write feature.coorx or feature.coory, etc.

Could you tell me what would I have to do if, for example, all my features only had one element? (This element would have a different name to each feature)

If you don't know the name of the property then you can use Object.keys to get an array of the property names for an object:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Link to comment
Share on other sites

I' ve solved this problem with the next:

 

if (feature) { var objeto = feature.getProperties(), propiedades; for (propiedades in objeto){ content.innerHTML += propiedades + ':' + objeto[propiedades] + "<br />"; } return container.style.display = 'block';}

 

Now, when I click on the features, I obtain its info. It's great! But, there is one problem more, when I click in the first feature, everything is ok, but when I click in the second I get the info about the first one and the second one. It's a problem of duplicity. It happens the same if I click in the same feature:

first time, ok; second time, info appears twice, and successively.

 

How could I solve this problem?

 

Thank you very much!

Link to comment
Share on other sites

You just need to set it to an empty string before you begin the loop.

var propiedades;content.innerHTML = "";for (propiedades in objeto){    content.innerHTML += propiedades + ':' + objeto[propiedades] + "<br />";}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...