Override Popup zoomTo Event?

[LauraMiles1]

I'd like to change the popup window's zoomTo link functioning so that it zooms to the extent of the polygon/line feature rather than a zoom level. I'm not sure how to go about it though. Should I hide the current "zoom to" link and add my own? If so, how do I add something to the popup's actionsPane?

Or can I somehow detach the current event listener and add a new custom one? I already have my function set up to zoom to the proper extent, just not sure how to override the current "zoom to" click event.

[KellyHutchins]

I think its easiest just to set the overwriteAdvancedActions property on the popup template to true and create your own zoom-to link. You can use the esri class name so the same icon appears. Here's an example:

      var customZoomAction = {
        title: "Zoom to",
        id: "custom-zoom",
        className: "esri-icon-zoom-in-magnifying-glass"
      };
      var template = { // autocasts as new PopupTemplate()
        title: "Trail run",
        content: "{name}",
        actions: [customZoomAction, measureThisAction]
      };
      template.overwriteActions = true;

Then in trigger-action you just check for your id and execute your custom zoom code:

      view.popup.on("trigger-action", function(evt) {
        if(evt.action.id === "custom-zoom"){
          console.log("Zoom to feature");
        }
        // Execute the measureThis() function if the measure-this action is clicked
        if (evt.action.id === "measure-this") {
          measureThis();
        }
      });

[LauraMiles1]

Hi Kelly, I'm not sure how to fit the above in with how I have things. I tried fitting things into this jsfiddle but it's not working. I've not encountered PopupTemplate before, how does it know to assign "template" to the PopupTemplate?

Thanks for your help!

[KellyHutchins · Accepted solution]

Hi Laura,

Sorry for the confusion I thought you were using version 4.0 of the api not 3.16. Here's one way to do this with 3.16.

First add a bit of css to hide the existing zoom to button:

      .calcite .esriPopup .actionsPane .action:first-child{
        display: none;
      } 

Next add the dojo/query and dojo/on modules to your application then add code to create your new zoom to button.

         var link = domConstruct.create("a",{
          "class": "action zoomTo", 
          "id": "customZoom",
          "innerHTML": "Zoom to", 
          "href": "javascript: void(0);"
        }, query(".actionList", map.infoWindow.domNode)[0]);
         on(link, "click", function(){
          console.log("Custom Click Code");
         });

Here's an updated fiddle showing this:

Search - Multiple Results - JSFiddle

[LauraMiles1]

Perfect, thanks Kelly! Your first answer will come in handy too when we move to 4.0.