Adding labels removes default pop-up.

LukeCalladine

Hey everyone,

Running in to a peculiar problem with JSAPI 4.21 where the labeling of a sublayer stops the default pop-up from appearing with no console errors, I've not been able to find in the documentation why it occurs either.

Below is the my original new MapImageLayer code where the pop-ups work correctly:

 

 

const fieldsView = new MapImageLayer({
    portalItem: { // autocasts as esri/portal/PortalItem
        portal: "https://lon6p2irsap04.ihsglobal.local/portal/",
        id: "cf92769bd1354947853aa021cc863c4b"
    },
    title: "Oil & Gas Fields",
    listMode: "hide-children",
})

 

 

If I then add the following code between the portalItem and title options above:

    sublayers: [{
        id: 0,
        labelingInfo: [{
            labelExpression: "[FIELD_NAME]",
            labelPlacement: "always-horizontal",
            symbol: {
                type: "text", // autocasts as new TextSymbol()
                color: "black",
                haloSize: 1,
                haloColor: "white",
                font: {
                    size: 12,
                    weight: "bolder"
                }
            },
        }]
    }],

 The addition of the above code then seems to cause the pop-up to stop working. Is this working as intended? Why would adding a label remove the default pop-up? I've tried putting the default pop-up back in with: mapview.popup.defaultPopupTemplateEnabled = true but had no success.

I can recreate the problem by cutting the code - viewing the pop-up and then re-pasting the code and see the pop-ups not appear.

Here is the GitHub repo for it: https://github.com/LukeCalladineIHS/vite-edin-knockoff/

Any ideas?

RRubalcava

This type of thing has bit users before.

When you define the sublayers upfront like in your snippet, you override the layers default settings. So since you don't define the popupTemplate, it's no longer available. If you want to modify some properties of the sublayer, but keep others, you can load the layer and it's sublayers up front, then modify them.

Something like this.

 

layer.load().then(() => {
    Promise.all(layer.sublayers.map((sublayer) => sublayer.load())).then(() => {
        const sub = layer.sublayers.find(x => x.id === 1);
        console.log(sub)
        sub.popupTemplate = {
            title: "{route}",
            content: "{type}"
        }
    })
});

 

Here is a demo.

https://codepen.io/odoe/pen/MWvqWGm?editors=1000