topic Re: Override Popup zoomTo Event? in ArcGIS JavaScript Maps SDK Questions

Override Popup zoomTo Event?

LauraMiles1 — Thu, 26 May 2016 17:15:07 GMT

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.

Re: Override Popup zoomTo Event?

KellyHutchins — Sat, 11 Dec 2021 20:58:26 GMT

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();
        }
      });

Re: Override Popup zoomTo Event?

LauraMiles1 — Thu, 26 May 2016 22:29:26 GMT

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!

Re: Override Popup zoomTo Event?

KellyHutchins — Sat, 11 Dec 2021 20:58:29 GMT

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

Re: Override Popup zoomTo Event?

LauraMiles1 — Fri, 27 May 2016 01:39:17 GMT

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