Select to view content in your preferred language

PopupTemplate override on KMLLayer in Javascript V4.26

451
2
07-26-2023 06:00 PM
MikeBehan
New Contributor

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.

 

0 Kudos
2 Replies
UndralBatsukh
Esri Regular Contributor

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

 

0 Kudos
MikeBehan
New Contributor

Thanks allVisiblePointsallVisiblePolylines or allVisiblePolygons works thanks for the quick response 

0 Kudos