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

[JeffreyThompson2]

You can access the mapView by giving your Map Component an id then using the document.getElementById() function. I don't understand why this works, but it does.

const mapView = document.getElementById('myMap')

[ReneRubalcava]

This is an interesting one, I hadn't really though about. Making note of it though.

So components have most of the same props and methods that the View does, so you can access them directly on the component. 

With components, you can do a couple of things.

• Set properties on components before they are fully loaded. These properties will be used during component set up.
• Access properties/methods after component is loaded, something like map or goTo.

Popup is kind of special, it is a lazy loaded property, so it's not a real popup until you click on the map. The view.popup has some magic in it to let you do the listeners on it before it's really a popup. We don't have that bit of magic on the component, not really, so need a couple of extra steps to do this.

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

    const mapElement = document.querySelector("arcgis-map");
    // Set popup actions as an empty array
    mapElement.popup = {
      actions: []
    };
    // Wait for the map component to fully be ready
    await mapElement.viewOnReady();
    // The action object that defines the action.
    let viewRotateAction = {
      title: "Rotate",
      id: "rotate",
      className: "esri-icon-rotate"
    };
    // Add the action to the pop-up actions.
    mapElement.popup.actions.push(viewRotateAction);
    // The function defining the operation.
    function rotateView() {
      // This property is on the element
      let rotateAngle = mapElement.rotation + 45;
      // This method is on the element too
      mapElement.goTo({
        rotation: rotateAngle
      });
    };
    // Wait for the popup to be visible, just once
    // At this point, it's a Popup instance
    // and you can listen for events
    when(
      () => mapElement.popup.visible,
      () => {
        // Implement the event for the action.
        mapElement.popup.on("trigger-action", function(event) {
          console.log("Returned event: ", event)
          if (event.action.id === "rotate") {
            rotateView();
          }
        });
      }, {
        once: true
      }
    );

This might be easier in 4.34, so keep an eye out.

Edit - Yes, this will be much easier in 4.34.

[ReneRubalcava · Accepted solution]

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.

[AntonioMedrano]

Thank you for following up! I'll have to spend some time familiarizing myself with all of the changes in 4.34, but indeed at first glance this does look simpler and more intuitive. I'll also have to look through the new Popup section of the sample codes. I wish the "search-component-multisource" sample code had been updated to use popup components with the search component in order to use actions with search results, but I'll see if I can figure it out. Thanks again!