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.