Override Popup zoomTo Event?

4124
4
Jump to solution
05-26-2016 10:15 AM
LauraMiles1
Occasional Contributor III

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.

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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

View solution in original post

4 Replies
KellyHutchins
Esri Frequent Contributor

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
Occasional Contributor III

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!

0 Kudos
KellyHutchins
Esri Frequent Contributor

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

View solution in original post

LauraMiles1
Occasional Contributor III

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

0 Kudos