topic Re: PopupTemplate override on KMLLayer in Javascript V4.26 in ArcGIS JavaScript Maps SDK Questions

PopupTemplate override on KMLLayer in Javascript V4.26

MikeBehan — Thu, 27 Jul 2023 01:00:54 GMT

I have been search for a way to override the popup template on a KMLLayer in the ESRI v4 api for a while with no luck. I am trying to avoid a rewrite of some functionality as we did not know all the constraints on KMLLayers. We would like to preserve style but not showing the extended data or having a way to add actions to the popup is kinda a deal Breaker

I have tried providing a template on creation, have also add this template to allSublayers. I have

also tried overriding the popupTemplate manually on the layer.

const customButtonPopUp = {

title: "sync",

id: "c-popup"

};

const kmlLayer = new KMLLayer({

url: kmlFileUrl,

title: sitetrackerLayer.Name,

sForceInfo: { Id: sitetrackerLayer.Id, Type: sitetrackerLayer.Type },

popupTemplate: new PopupTemplate({

title: "{Name}",

content: "{balloonStyleText}",

actions: [customButtonPopUp]

})

});

I have tried doing this manually on click by setting the content and disabling the popupEnabled property

on the Layer

mapview.on("click", function(event) {

mapview.hitTest(event).then(function(response) {

if (response.results.length) {

const graphic = response.results.filter(function (result) {

// check if the graphic belongs to the layer of interest

return result.graphic.layer.uid === kmlLayer.uid;

})[0].graphic;

const attributes = graphic.attributes;

mapview.popup.content = `

<b>${attributes.Name}</b>

<br/>

${attributes.Description}

<br/>

Custom content goes here

mapview.popup.open({

title: "Custom Popup Title",

location: event.mapPoint

});

}

});

Any sample code or knowledge on whether this is possible would be be appreciated.

Re: PopupTemplate override on KMLLayer in Javascript V4.26

UndralBatsukh — Thu, 27 Jul 2023 19:35:40 GMT

Hi there,

The first approach won't work. KMLLayer has sublayers and we don't know about the sublayers. So we can't define popupTemplate on the layer directly.

The second approach should work. You can disable the popupEnabled on the MapView.

However, you can set the popupTemplate by accessing the graphics which can be accessed via allVisiblePoints, allVisiblePolylines or allVisiblePolygons. The document is wrong these properties return collection of graphics not geometries. We will get the document correct. You can watch the changes on these collections and change the popupTemplate on the graphics.

Here is a simple codepen that shows the worflow: https://codepen.io/U_B_U/pen/rNQqgxR?editors=0010

Re: PopupTemplate override on KMLLayer in Javascript V4.26

MikeBehan — Fri, 28 Jul 2023 02:19:15 GMT

Thanks allVisiblePoints, allVisiblePolylines or allVisiblePolygons works thanks for the quick response