nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Encontre mais publicações marcadas com

Accepted answers

khutchins

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

All comments

khutchins

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!

khutchins

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.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.