1

I have multiple features that I display, and on click a popup appears, with a button to store it to favorites (with intention of show only favorites afterwards)

The thing is, when I click the button, I retrieve the selected feature through the select interaction, but the feature that retrieves is not a feature type, is an object like this:

featureAtClick Object { $a: Object, ta: Object, qa: Object, f: 1, ko: 568, I: Object, a: undefined, : "geometry", g: null, l: undefined, 2 more… }

Instead of:

Object { type: "Feature", geometry: Object, properties: Object }

The properties of my feature are all inside of the I key from the first object, but for a reason I can not access to it.

I tried this:

Object.keys(selected).forEach(function (prop){console.log(selected[prop])})
console.log('selected',selected['I'])

But it returns only empty objects.

How do I convert it to a feature type, so I can add it to a featurecollection and display it later?

EDIT

As requested I add the click event code. This is the click on the feature:

favorites = { "type": "FeatureCollection", "features": [] }
                map.on('click', function (evt) {               
                    var coordinate = evt.coordinate;
                    map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                        if (feature) {
                            console.log('favorites', favorites)
                            console.log('featureatclick',feature)
                            if (favorites.features.indexOf(feature) === -1) {
                                $('#fav-select').text('☆')
                            } else {
                                $('#fav-select').text('★')
                            }
    /// So the idea is that if the feature is on the favorite list, display either one text or another
                            $('#popup-content').html('<p><span>Name</span>: ' + feature.get('name') + '</p>');
                            $('#popup-content').append('<p><span>Address</span>: ' + feature.get('address') + '</p>');
                            if (feature.get('rank') != undefined) {
                                $('#popup-content').append('<p><span>Rank</span>: ' + feature.get('rank') + '</p>');
                                $('#popup-content').append('<p><span>Reviews</span>: ' + feature.get('reviews') + '</p>');
                            }
                            overlay.setPosition(coordinate);
                            map.addOverlay(overlay)


                        }
                    });
                });

And this the click on the favorites button:

                $('#fav-select').on('click', function (t) {

                var selected = selectInteraction.getFeatures()
                Object.keys(selected).forEach(function (prop){console.log(selected[prop])})
                console.log('selected',selected['I'])
/// Here I retrieve the feature that is selected again, and check if it is on the list to either remove it or add it
                if (favorites.features.indexOf(selected) === -1) {
                    console.log('fav')
                    favorites.features.push(selected)
                     $('#fav-select').text('★')
                     console.log('favoritesfavselect', favorites)
                } else {
                    console.log('unfav')
                    $('#fav-select').text('☆')
                    favorites.features.splice(favorites.features.indexOf(selected), 1)
                    console.log('favoritesfavselect', favorites)
                }

                console.log('selected', selected)
                console.log()

            })
  • 1
    Can you please add to your post how you handle the click event? – Alexis_A Apr 16 '17 at 12:05
  • Sure, I just updated it – ImanolUr Apr 16 '17 at 19:29
1

If you want to get an object like this:

Object { type: "Feature", geometry: Object, properties: Object }

Just use:

new ol.format.GeoJSON().writeFeature(yourFeature);

If you want to access the properties use this:

yourFeature.getProperties();

To create a new collection with selected features you can also use:

var featureCollection = new ol.Collection();
// add feature
featureCollection.push(yourFeature);
  • If I try your appoach (.writeFeature) I get this error: TypeError: a.U is not a function And getProperties returns this: Object [ <1 empty slot> ] – ImanolUr Apr 17 '17 at 12:39
  • Please try to define your variable selected as: var selected = selectInteraction.getFeatures().item(0). Currently your selected variable is not a ol.Feature but a ol.Collection – Lars Apr 17 '17 at 16:30
  • 1
    I can't press +1 to your answer yet, but that did the trick, thank you so much! The object is returned as an string, but with JSON.parse I get it as an object. Although now favorites.features.indexOf(selected) does not recognize the same object in the array.. I'm gonna work on it, thanks again – ImanolUr Apr 18 '17 at 12:11
  • If you want to avoid the same feature to be added multiple times I suggest to use the uniqueoption of ol.Collection (openlayers.org/en/latest/apidoc/ol.Collection.html). – Lars Apr 18 '17 at 12:28
  • I did not manage to make the collection work, at the end I continued using the feature collection with the strings, and I just parse it at the moment of creating the layers. All works as intended now! Thanks – ImanolUr Apr 18 '17 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.