Create Popup Template

Create Popup Template

The Popup is a key feature of working with the ArcGIS API for JavaScript. It lets users quickly see the data associated with a location. Ideally, you would author your popup content in the online map viewer. But sometimes, you don’t have that option. You might be working a layer you are unfamiliar with, or maybe just need to make sure there are popups for any layers a user might add to your app dynamically.

That’s why the createPopupTemplate method on various layers is available. This method is available on a number of layers, like FeatureLayer, CSVLayer, Sublayer, which are used in the MapImageLayer.

const popupTemplate = featureLayer.createPopupTemplate();
featureLayer.popupTemplate = popupTemplate;

I kind of wish it was more complicated, so I could make this post incredibly insightful. But it’s not. This will return a basic popup template that displays all the visible fields of the layer. This is really useful if you want to add popups for all the sublayers of a MapImageLayer.

await mapImageLayer.loadAll();
for (let sublayer of mapImageLayer.allSublayers) {
    sublayer.popupTemplate = sublayer.createPopupTemplate();
}

If you want to clean up the popups a bit, there are some options you can use to ignore shape or guid fields, or set some visible fields.

That’s all there is to it. Simple, and incredible useful!

You can check out this video below for more information!