View related popup actions using components

AntonioMedrano

Howdy, I recently made the switch over to components, but I'm having trouble figuring out MapView related actions such as using popup buttons to rotate the MapView.

Since components don't use MapViews, how would I implement this using components? My old AMD code is as follows, where myView is an instance of a MapView. Thanks.

  // The action object that defines the action.
  let viewRotateAction = {
    title: "Rotate",
    id: "rotate",
    className: "esri-icon-rotate"
  };

  // Add the action to the pop-up window's actions.
  myView.popup.actions.push(viewRotateAction);

  // The function defining the operation.
  function rotateView() {
    let rotateAngle = myView.rotation + 45;
    myView.goTo({
      rotation: rotateAngle
    });
  };

  // Implement the event for the action.
  myView.popup.on("trigger-action", function (event) {
    console.log("Returned event: ", event)
    if (event.action.id === "rotate") {
      rotateView();
    }
  });

 

RRubalcava

As promised, I think this is easier to do now in 4.34 with our beta Popup component.

https://codepen.io/odoe/pen/JoGOaev?editors=1000

  <arcgis-map item-id="45725ba7d9fb47a0925398919b13d1fa">
    <arcgis-popup slot="popup"></arcgis-popup>
  </arcgis-map>
  <script type="module">
    // Update code here
    const mapElement = document.querySelector("arcgis-map");
    const popupElement = document.querySelector("arcgis-popup");
    
    await mapElement.componentOnReady();
    
    // The action object that defines the action.
    let viewRotateAction = {
      title: "Rotate",
      id: "rotate",
      icon: "rotate"
    };
    
    function rotateView() {
      // This property is on the element
      let rotateAngle = mapElement.rotation + 45;
      // This method is on the element too
      mapElement.goTo({
        rotation: rotateAngle
      });
    };
    
    popupElement.actions.push(viewRotateAction);
    
    popupElement.addEventListener("arcgisTriggerAction", (event) => {
      if (event.detail.action.id === "rotate") {
        rotateView();
      }
    });
  </script>

 

This is less code to write and more intuitive. Now yes, Popup comp is in beta, but it's really close. Since it's in beta, if you notice anything weird, let us know. 

 

Note: The snippet in my previous post for 4.33 will still work in 4.34 and if you don't want to use beta Popup component, stick with that for now.