1

I'm using the 'Popup Feature' popup example to show the information of my layers, with Openlayers.

I'm showing two attributes in the popup: ID and NAME. But, I have several other attributes. How do I show them all, without having to write each of the attributes? I won't change their title.

The popup code is as follows:

var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select_interaction,
    canFix: true,
    template: {
        title: 
             'NAME',   // only display the name
            
        attributes: 
        {
            'NAME': { title: 'NAME' },
            'ID': { title: 'ID' },
             
        }
    }
});

1 Answer 1

2

As described in the docs for template you can also provide a function that takes a feature as argument.

Your code could then look like this:

var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select_interaction,
    canFix: true,
    template: function (feature) {
        var properties = feature.getProperties();
        var attributes = {};
        for (const [key, value] of Object.entries(properties)) {
            // add your your business logic here ... 
            // ... maybe rename or hide some properties ... 
            attributes[key] = {
                title: value
            };
        }
        return {
            title: 'NAME',
            attributes: attributes
        }
    }
});
1
  • thanks, that was exactly what I needed. I managed to adapt to what I need to show. Dec 6, 2022 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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