Adding labels removes default pop-up.

238
2
Jump to solution
11-11-2021 08:31 AM
LukeCalladine
New Contributor III

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?

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

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

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor II

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

LukeCalladine
New Contributor III

Thanks for the insight Rene, I had a sneaking suspicion that defining the sublayers was wiping the default out as I was able to re-introduce the pop-up by defining my own template.

Your code snippet worked a charm - although I switched it around and put my labels in it in order to keep default pop-up.

Many thanks for your help!

0 Kudos